Criando um Chat Simples com Socket.IO e Node.js 💬

Neste tutorial, vamos criar um chat em tempo real usando Socket.IO e Node.js. O Socket.IO é uma biblioteca que permite a comunicação em tempo real, bidirecional e baseada em eventos entre o navegador e o servidor.

Anúncio

Preparando o Ambiente

Para começar, certifique-se de que você tem Node.js e npm instalados em seu sistema. Se você não tiver, pode baixar Node.js aqui. Após a instalação, você pode instalar o Socket.IO com o seguinte comando:

npm install socket.io

Configurando o Servidor

Vamos começar criando um servidor HTTP simples em Node.js. Em seguida, vamos configurar o Socket.IO para usar esse servidor:

const express = require('express');const http = require('http');const socketIo = require('socket.io');const app = express();const server = http.createServer(app);const io = socketIo(server);app.get('/', (req, res) => {  res.sendFile(__dirname + '/index.html');});io.on('connection', socket => {  console.log('Um usuário se conectou');});server.listen(3000, () => {  console.log('Servidor ouvindo na porta 3000');});

Criando a Interface do Usuário

Agora, vamos criar uma interface de usuário simples para o nosso chat. No arquivo index.html, vamos adicionar um formulário para enviar mensagens e uma área para exibir as mensagens recebidas:

<!DOCTYPE html><html>  <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>      const socket = io();      document.querySelector('form').addEventListener('submit', event => {        event.preventDefault();        const input = document.getElementById('m');        socket.emit('chat message', input.value);        input.value = '';      });      socket.on('chat message', msg => {        const item = document.createElement('li');        item.textContent = msg;        document.getElementById('messages').appendChild(item);      });    </script>  </body></html>

Finalizando o Chat

Agora, vamos voltar ao nosso servidor e adicionar o código para receber e enviar mensagens:

io.on('connection', socket => {  console.log('Um usuário se conectou');  socket.on('chat message', msg => {    io.emit('chat message', msg);  });});

Conclusão

Parabéns! Você criou um chat em tempo real básico com Socket.IO e Node.js. Este é um ótimo ponto de partida para a criação de aplicações mais complexas em tempo real!

Para continuar aprimorando suas habilidades em Node.js e Socket.IO, confira o artigo sobre Aprendendo sobre RESTful APIs em Node.js.