Como criar um chat em tempo real com Node.js e WebSockets
Criar um chat em tempo real é uma maneira prática e envolvente de aplicar comunicação bidirecional em suas aplicações, e com as tecnologias certas, como Node.js e WebSocket, esse processo se torna simples e eficiente. Imagine um chat onde várias pessoas trocam mensagens instantaneamente — é exatamente isso que você vai aprender aqui!
Neste tutorial, vamos construir um chat em tempo real utilizando Node.js, Express e Socket.IO, com direito a uma explicação clara de como rodar o projeto de maneira simplificada no final. Então, prepare-se, porque o assento do foguete está prestes a decolar e levar suas habilidades de desenvolvimento para o próximo nível!
1. Node.js e sua relevância.
Node.js é amplamente utilizado para criar aplicações que exigem alta performance e baixa latência, como chats, jogos em tempo real e sistemas de notificação. Quando combinado com WebSockets, ele permite a troca de mensagens constante entre o cliente e o servidor, oferecendo uma experiência fluida e dinâmica.
Com seu modelo orientado a eventos e sua arquitetura não bloqueante, Node.js torna-se uma escolha ideal para aplicações em tempo real que necessitam de comunicação rápida e eficiente. É por isso que usaremos Node.js como a base do nosso servidor, junto com Express para o roteamento e Socket.IO para a comunicação em tempo real.
2. O que são WebSockets?
WebSockets permitem comunicação bidirecional contínua entre cliente e servidor, sem a necessidade de reconectar a cada mensagem, como acontece com o HTTP. O WebSocket mantém a conexão aberta, tornando-o ideal para aplicações que exigem atualização em tempo real, como chats e jogos online.
Quer se aprofundar ainda mais no uso de WebSockets? Clique aqui e descubra como essa tecnologia incrível pode levar suas aplicações a outro nível!
3. Configurando o projeto.
1. Inicializando o projeto
Para começar, crie um novo diretório para o seu projeto e inicialize um novo projeto Node.js:
mkdir chat-realtime cd chat-realtime npm init -y
Esse comando cria um arquivo package.json com as configurações básicas do projeto.
2. Instalando as dependências
Instale as dependências que serão usadas no projeto, como Express (para o servidor) e Socket.IO (para WebSockets):
npm install express socket.io
Estrutura do projeto
A estrutura básica do projeto será a seguinte:
4. Configurando o Servidor com Node.js e Express.
Crie um arquivo chamado server.js na raiz do projeto e adicione o seguinte código:
const express = require('express'); const http = require('http'); const { Server } = require('socket.io'); const app = express(); const server = http.createServer(app); const io = new Server(server); app.use(express.static('public')); io.on('connection', (socket) => { console.log('Novo usuário conectado'); socket.on('chat message', (msg) => { io.emit('chat message', msg); }); socket.on('disconnect', () => { console.log('Usuário desconectado'); }); }); server.listen(3000, () => { console.log('Servidor rodando em http://localhost:3000'); });
Esse código configura o servidor Express e utiliza o Socket.IO para gerenciar a comunicação em tempo real entre cliente e servidor.
5. Criando a Interface do Chat.
Crie a pasta
public/ e dentro dela o arquivo index.html. Este será o front-end da aplicação, contendo um campo de texto para as mensagens e uma área para exibir as mensagens enviadas.<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chat em tempo real</title> <link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet"> <style> body { font-family: 'Roboto', sans-serif; background-color: #121214; color: #e1e1e6; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } #chat { background-color: #202024; border-radius: 8px; padding: 20px; width: 100%; max-width: 600px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } ul { list-style-type: none; padding: 0; margin-bottom: 20px; max-height: 300px; overflow-y: auto; } ul li { background-color: #323238; margin-bottom: 10px; padding: 10px; border-radius: 8px; } form { display: flex; gap: 10px; } input { flex: 1; padding: 10px; border: none; border-radius: 8px; background-color: #323238; color: #e1e1e6; font-size: 16px; } button { background-color: #8257E5; color: white; border: none; border-radius: 8px; padding: 10px 20px; cursor: pointer; font-weight: bold; transition: background-color 0.3s ease; } button:hover { background-color: #9466ff; } h1 { text-align: center; color: #04d361; margin-bottom: 20px; } ul::-webkit-scrollbar { width: 8px; } ul::-webkit-scrollbar-track { background: #202024; } ul::-webkit-scrollbar-thumb { background-color: #8257E5; border-radius: 10px; } </style> <script src="/socket.io/socket.io.js"></script> </head> <body> <div id="chat"> <h1>Chat em tempo real.</h1> <ul id="messages"></ul> <form id="form" action=""> <input id="message" autocomplete="off" placeholder="Digite sua mensagem..." /> <button type="submit">Enviar</button> </form> </div> <script> const socket = io(); const form = document.getElementById('form'); const messageInput = document.getElementById('message'); const messages = document.getElementById('messages'); form.addEventListener('submit', function(e) { e.preventDefault(); if (messageInput.value) { socket.emit('chat message', messageInput.value); messageInput.value = ''; } }); socket.on('chat message', function(msg) { const item = document.createElement('li'); item.textContent = msg; messages.appendChild(item); window.scrollTo(0, document.body.scrollHeight); }); </script> </body> </html>
Esse arquivo HTML cria a interface do usuário com um campo para digitar as mensagens e um botão para enviá-las. O Socket.IO será usado para enviar e receber as mensagens do servidor em tempo real.
Curtiu construir essa interface?
Quer aprender mais sobre HTML e CSS para deixar suas páginas ainda mais incríveis? Dá uma olhada nesses artigos e aprofunde seus conhecimentos 👇
6. Como Rodar o Projeto.
Rodar o projeto é simples e envolve apenas alguns comandos.
1. Instalar Node.js
Caso você ainda não tenha o Node.js instalado no seu sistema, faça o download e a instalação a partir do site oficial: Node.js.
2. Instalar as dependências
Na pasta do projeto, após ter criado todos os arquivos, execute o seguinte comando para instalar as dependências do projeto:
npm install
Esse comando vai instalar o Express e o Socket.IO, que são necessários para rodar a aplicação.
3. Iniciar o servidor
Agora, basta iniciar o servidor Node.js com o seguinte comando:
node server.js
Se tudo estiver configurado corretamente, você verá a seguinte mensagem no terminal:
Servidor rodando em http://localhost:3000
Agora é só acessar o endereço na URL e testar sua criação.
4. Acessar o Chat
Abra o navegador e acesse o endereço http://localhost:3000. Você verá a interface do chat. Abra várias abas ou janelas do navegador para simular diferentes usuários e enviar mensagens em tempo real.
Se você quer se aprofundar ainda mais e entender como WebSockets funcionam na prática, a Rocketseat tem um vídeo incrível que explica tudo de forma didática e passo a passo.
Nesse vídeo criamos uma aplicação de chat em tempo real conversando com um servidor em NodeJS.
Conclusão
Você aprendeu a criar um chat em tempo real usando Node.js, Express e Socket.IO. Esse projeto pode ser expandido de várias maneiras, incluindo a adição de autenticação, histórico de mensagens utilizando um banco de dados como MongoDB e personalização da interface.
Se você deseja se aprofundar no desenvolvimento de aplicações modernas, a Rocketseat oferece uma variedade de formações que vão levar suas habilidades a outro nível. Com a formação de Node.js, você aprenderá construindo projetos práticos, ganhando a confiança necessária para enfrentar desafios reais do mercado.
