-
+
-
-
-
-
-
-
Offline
+
+
@@ -98,4 +215,68 @@ permalink: /live.html
}
})
+
+ // URL do servidor WebSocket
+ const socket = new WebSocket('ws://alice.ufsj.edu.br:8081/chat');
+
+ // Variáveis para armazenar o nome do usuário e a mensagem
+ let username = prompt('Qual é o seu nome?');
+ let message = '';
+
+ // Função que envia a mensagem
+ function sendMessage(event) {
+ event.preventDefault(); // Previne o comportamento padrão do formulário
+
+ // Cria um objeto com os dados da mensagem
+ const msgData = {
+ nome: username,
+ mensagem: message
+ };
+
+ // Envia a mensagem como uma string JSON
+ socket.send(JSON.stringify(msgData));
+
+ // Limpa o campo de entrada de mensagem
+ document.querySelector('.chat-enter').value = '';
+ }
+
+ // Função que adiciona uma nova linha de mensagem ao chat
+ function addMessage(msg) {
+ const chatLines = document.querySelector('.chat-lines');
+
+ // Cria o elemento da mensagem
+ const newMessage = document.createElement('div');
+ newMessage.classList.add('chat-line');
+ newMessage.innerHTML = `
+
+
+
+
+
+
Offlinee
+
+
+
+
+
+
+
+
+
+
+ Live chat
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${msg.nome}: ${msg.mensagem}
`; + + // Adiciona a nova mensagem no final da lista de mensagens + chatLines.appendChild(newMessage); + + // Rola o chat para baixo para mostrar a nova mensagem + chatLines.scrollTop = chatLines.scrollHeight; + } + + // Event listener para quando o WebSocket abrir a conexão + socket.addEventListener('open', () => { + console.log('Conectado ao servidor WebSocket'); + }); + + // Event listener para quando uma mensagem é recebida do servidor + socket.addEventListener('message', event => { + // Parseia a mensagem recebida como JSON + const msg = JSON.parse(event.data); + + // Adiciona a mensagem ao chat + addMessage(msg); + }); + + // Event listener para o envio de mensagem no formulário + document.querySelector('.chat-input-form').addEventListener('submit', event => { + // Captura o valor do input + message = document.querySelector('.chat-enter').value; + + // Chama a função que envia a mensagem + sendMessage(event); + }); + \ No newline at end of file