O chat online é uma aplicação muito popular que permite a várias pessoas conversarem em tempo real na Internet. Este tutorial mostra como criar um chat online em JavaScript, usando a API de WebSockets e acrescentando CSS e HTML para melhorar a interface.
Antes de começar, instala o NodeJS no teu computador
O Node.js é indispensável para este tutorial, porque é um runtime JavaScript que permite executar código JavaScript do lado do servidor. No nosso tutorial sobre a criação de um chat online em JavaScript usamos a API de WebSockets, disponível apenas do lado do servidor. O Node.js permite-nos assim criar um servidor WebSocket e gerir as ligações e as comunicações em tempo real entre os vários clientes.
É portanto necessário instalar o Node.js no teu computador antes de poderes seguir este tutorial. Podes descarregar o instalador do Node.js a partir do site oficial (https://nodejs.org/) e seguir as instruções de instalação no ecrã. Depois de instalado, deves conseguir executar código JavaScript do lado do servidor com o comando « node » no terminal.
Instalar o pacote ws através do NPM
Instala o módulo « ws » com o npm (Node Package Manager). Abre o terminal e escreve o seguinte comando:
npm install wsChat em Javascript
O chat online é uma aplicação muito popular que permite a várias pessoas conversarem em tempo real na Internet. Este tutorial mostra como criar um chat online em JavaScript, usando a API de WebSockets e acrescentando CSS e HTML para melhorar a interface.
Código HTML
Cria uma página HTML com um formulário de introdução de mensagem e um elemento para mostrar as mensagens. Podes usar o código seguinte:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Chat en ligne</title>
<link rel="stylesheet" href="http://style.css">
</head>
<body>
<div id="chat">
<div id="messages">
<!-- Les messages seront affichés ici -->
</div>
<form id="formulaire">
<input type="text" id="message" placeholder="Entrez votre message ici">
<button type="submit">Envoyer</button>
</form>
</div>
</body>
</html>Código CSS
Acrescenta CSS para melhorar a interface do teu chat online. Podes usar o código seguinte como base:
style.css
#chat {
width: 500px;
margin: 0 auto;
font-family: sans-serif;
}
#messages {
border: 1px solid #ccc;
height: 300px;
overflow-y: scroll;
padding: 10px;
}
#formulaire {
padding: 10px;
text-align: center;
}
#formulaire input[type="text"] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 8px;
width: 80%;
}
#formulaire button[type="submit"] {
border: none;
border-radius: 3px;
padding: 8px;
background-color: #4caf50;
color: #fff;
}Código JavaScript do lado do servidor
Cria um servidor WebSocket com o Node.js e o módulo « ws ». Podes usar o código seguinte para o servidor:
server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 9999 });
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
console.log('received: %s', message);
});
ws.send('Bienvenue sur le chat Gekkode!');
});
console.log('Server started on port 9999');Para arrancar o servidor NodeJS, escreve a linha seguinte na consola, na pasta que contém o teu projeto e o ficheiro server.js
server.js
node server.jsSe correu tudo bem, deves ver aparecer « Server started on port 9999 ». Ainda não acabámos de escrever o código do lado do servidor, mas voltamos a ele mais à frente no tutorial para o melhorar.
Entretanto, vamos antes ver o lado do front.
Código JavaScript do lado do front
Liga a tua página HTML ao servidor WebSocket através do objeto WebSocket do JavaScript. Podes usar o código seguinte para começar:
script.js
const socket = new WebSocket('ws://localhost:9999');
socket.onopen = function() {
console.log('Connecté au serveur WebSocket');
};
socket.onmessage = function(event) {
const message = document.createElement('div');
message.textContent = event.data;
document.getElementById('messages').appendChild(message);
};Envia as mensagens escritas pelo utilizador para o servidor WebSocket com o método « send » do objeto WebSocket. Podes usar o código seguinte para começar:
script.js
document.getElementById('formulaire').addEventListener('submit', function(event) {
event.preventDefault();
const message = document.getElementById('message').value;
socket.send(message);
document.getElementById('message').value = '';
});Como partilhar as mensagens do chat com os utilizadores ligados
Normalmente as mensagens não aparecem se o servidor Node.js não as enviar aos clientes ligados.
Temos de voltar ao nosso server.js e alterar algumas linhas para enviar mensagens aos clientes ligados do lado do servidor Node.js no nosso chat online em JavaScript:
script.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 9999 });
const clients = [];
wss.on('connection', function connection(ws) {
clients.push(ws);
ws.on('message', function incoming(message) {
console.log('received: %s', message);
broadcast(String(message));
});
ws.send('Bienvenue sur le chat Gekkode!');
});
function broadcast(message) {
clients.forEach(function(client) {
client.send(message);
});
}
console.log('Server started on port 9999');É possível que tenhas um problema de tipo de dados se aparecer “[object Blob]” no lugar das mensagens enviadas pelos utilizadores do lado do front no teu chat online em JavaScript.
Verifica que estás mesmo a enviar texto e não objetos Blob do lado do servidor. Certifica-te de que o método “send” do objeto WebSocket recebe uma string como argumento:
ws.send(String(message));
Tem agora todo o código do tutorial: não se esqueça de fazer npm install para descarregar as dependências e de lançar o servidor Node.js.
Pronto, já sabes como receber e mostrar as mensagens recebidas pelo utilizador do lado do front num chat online em JavaScript! Segue-me nas redes sociais do blog se o artigo te foi útil.
