From 7f060810264fbe24bd129cb2a9ae11e1328c1f9e Mon Sep 17 00:00:00 2001 From: emerson Date: Thu, 29 Aug 2024 17:01:40 -0300 Subject: [PATCH] add chat --- _includes/SideBar.html | 4 +- assets/css/stylesheet.css | 19 ++-- pages/live.html | 207 +++++++++++++++++++++++++++++++++++--- 3 files changed, 205 insertions(+), 25 deletions(-) diff --git a/_includes/SideBar.html b/_includes/SideBar.html index c415f85..b31de2d 100755 --- a/_includes/SideBar.html +++ b/_includes/SideBar.html @@ -1,6 +1,6 @@ -
+
-
+
-
- - -
-

Offline

+
+
+ + +
+

Offlinee

+
+ +
+
+
+
+

Live chat

+
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ + +
+
+
+
+ +
@@ -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 = `

${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