Miguel Dev

Node.js: Como criar um chatroom

Miguel Rodrigues's photo
Miguel Rodrigues
·

2 min read

Um chatroom é uma aplicação que permite que usuários se comuniquem em tempo real através de mensagens de texto. É um bom projeto para treinar e aprender mais sobre node.js usando a lib socket.io, que contém vários protocolos de comunicação e vamos usar também html para criar o front da nossa aplicação.

  1. Primeiro instale os pacotes necessários usando npm install express socket.io .

  2. Crie um arquivo com o nome de index.js (ou de sua preferência) e adiciona o seguinte código:

     // Importa os módulos necessários
 const express = require('express');
 const http = require('http');
 const socketIo = require('socket.io');

 // Cria uma instância do Express
 const app = express();

 // Cria um servidor HTTP usando o Express
 const server = http.createServer(app);

 // Cria uma instância do Socket.io usando o servidor HTTP
 const io = socketIo(server);

 // Define o diretório público onde os arquivos estáticos do chatroom serão armazenados
 app.use(express.static('public'));

 // Escuta por conexões de clientes
 io.on('connection', (socket) => {

   // Escuta pelo evento 'chat message' enviado pelos clientes
   socket.on('chat message', (msg) => {

     // Emite o evento 'chat message' para todos os clientes conectados, com a mensagem recebida
     io.emit('chat message', msg);
   });
 });

 // Define a porta onde o chatroom irá rodar
 const port = process.env.PORT || 3000;

 // Inicia o servidor HTTP na porta especificada
 server.listen(port, () => console.log(`Chatroom rodando na porta ${port}`));

Este servidor servirá arquivos estáticos de um diretório public, e qualquer mensagem enviada por um cliente será transmitida para todos os clientes conectados.

  1. Agora vamos criar um front-end simples para nosso sistema. Crie um diretório public e, em seguida, crie um arquivo index.html dentro dele com o seguinte conteúdo:

     <!DOCTYPE html>
 <html>
 <head>
     <title>Chatroom</title>
 </head>
 <body>
     <ul id="messages"></ul>
     <form action="">
         <input id="m" autocomplete="off" /><button>Enviar</button>
     </form>
     <script src="/socket.io/socket.io.js"></script>
     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
     <script>
         $(() => {
             const socket = io();
             $('form').submit((e) => {
                 e.preventDefault();
                 socket.emit('chat message', $('#m').val());
                 $('#m').val('');
                 return false;
             });
             socket.on('chat message', (msg) => {
                 $('#messages').append($('<li>').text(msg));
             });
         });
     </script>
 </body>
 </html>

    Agora para rodar o servidor, é só usar o comando: node index.js .

    Em seguida, acesse localhost:3000 em seu navegador da web. Insira uma mensagem no campo de entrada e pressione enviar.

Lembre-se sempre de validar e sanitizar a entrada do usuário tanto no lado do cliente quanto no lado do servidor, especialmente quando você a utilizará na lógica da aplicação ou a exibirá na interface. Este exemplo não aborda várias questões sérias de segurança para aplicativos do mundo real, como vulnerabilidades de cross-site scripting (XSS). Tenho outros artigos que falam sobre essas questões de segurança.

Node.jsbackend