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.