WebSockets com Socket.io: Criando Aplicações Real-Time com Node.js

Introdução

Aplicações real-time têm se tornado essenciais em muitos aspectos da tecnologia moderna, oferecendo interações instantâneas que melhoram a experiência do usuário. Uma das tecnologias mais populares para criar essas aplicações em JavaScript é o Socket.io, uma biblioteca que facilita o trabalho com WebSockets. Neste artigo, vamos aprender a criar uma aplicação de chat real-time simples usando Socket.io e Node.js.

Configuração do Ambiente

Antes de começarmos, você precisa ter o Node.js instalado em seu sistema. Você pode baixá-lo e instalar a partir de nodejs.org.

Passo 1: Criando o Projeto

Primeiro, crie uma nova pasta para o projeto e inicialize um novo projeto Node.js:

mkdir chat-app
cd chat-app
npm init -y

Passo 2: Instalando Socket.io

Instale o Socket.io e o Express (um framework web para Node.js) através do npm:

npm install socket.io express

Passo 3: Configurando o Servidor

Crie um arquivo chamado server.js e adicione o seguinte código para configurar um servidor HTTP básico com Express e integrá-lo com Socket.io:

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');

  socket.on('disconnect', () => {
    console.log('Usuário desconectado');
  });

  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Servidor rodando na porta ${PORT}`);
});

Passo 4: Criando a Interface do Usuário

Crie um arquivo index.html na raiz do projeto para a interface do usuário do chat:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chat com Socket.io</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      var socket = io();
      var form = document.getElementById('form');
      var input = document.getElementById('input');

      form.addEventListener('submit', function(e) {
        e.preventDefault();
        if (input.value) {
          socket.emit('chat message', input.value);
          input.value = '';
        }
      });

      socket.on('chat message', function(msg) {
        var item = document.createElement('li');
        item.textContent = msg;
        document.getElementById('messages').appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
      });
    });
  </script>
</head>
<body>
  <ul id="messages"></ul>
  <form id="form" action="">
    <input id="input" autocomplete="off" /><button>Enviar</button>
  </form>
</body>
</html>

Passo 5: Executando a Aplicação

Para executar a aplicação, volte ao terminal e execute o seguinte comando:

node server.js

Agora, abra o navegador e acesse http://localhost:3000. Você deverá ver a interface do chat. Abra outra aba ou janela do navegador no mesmo endereço para simular outro usuário e comece a enviar mensagens.

Conclusão

Parabéns! Você acaba de criar uma aplicação de chat real-time simples usando Socket.io e Node.js. Esse exemplo básico demonstra o poder dos WebSockets para criar aplicações interativas e real-time na web. Explore mais sobre Socket.io e suas funcionalidades para expandir a aplicação, adicionando autenticação, salas de chat privadas, e muito mais.

Blog