Socket.io para JavaScript (Node.js): guia completo com exemplos

O que é Socket.io e para que serve?

Socket.io é uma poderosa biblioteca JavaScript que fornece comunicação bidirecional em tempo real (real-time) entre o cliente (navegador) e o servidor (Node.js). Diferente do protocolo HTTP tradicional, onde o cliente envia uma requisição e aguarda uma resposta, o Socket.io permite que o servidor inicie o envio de dados para o cliente a qualquer momento, e vice-versa.

Para que serve? Imagine um aplicativo de chat, um jogo online, um painel de monitoramento com gráficos ao vivo ou um sistema de edição colaborativa de documentos. Em todos esses cenários, os dados precisam ser atualizados instantaneamente, sem recarregar a página. O HTTP não é adequado para isso, pois funciona no modelo "requisição-resposta". O Socket.io resolve esse problema estabelecendo uma conexão persistente (geralmente via WebSocket), através da qual os dados podem ser transmitidos em ambas as direções a qualquer momento.

Principais características do Socket.io:

\n
• Bidirecionalidade: Servidor e cliente podem enviar mensagens um para o outro.
\n
• Tempo real: As mensagens são entregues instantaneamente (com latência mínima).
\n
• Reconexão automática: Se a conexão cair, o Socket.io tenta restabelecê-la automaticamente.
\n
• Salas (Rooms): Possibilidade de agrupar clientes e enviar mensagens apenas para um grupo específico.
\n
• Namespaces: Divisão da aplicação em canais de comunicação independentes.
\n
• Confiabilidade: Se o WebSocket não for suportado, o Socket.io alterna automaticamente para outros métodos (long-polling, FlashSocket, etc.).
\n

Instalação do Socket.io

O Socket.io consiste em duas partes: a do servidor (para Node.js) e a do cliente (para o navegador). Ambas são instaladas via npm.

Instalação da parte do servidor

Abra o terminal na pasta do seu projeto e execute o comando:

npm install socket.io

Instalação da parte do cliente

O script do cliente pode ser incluído de duas maneiras:

1. Via CDN (mais simples para começar):

<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>

2. Via npm (para projetos com bundlers, como Webpack):

npm install socket.io-client

Início rápido: primeiro chat

Vamos criar um chat simples, onde as mensagens de um cliente são vistas por todos os outros.

Passo 1: Servidor (arquivo server.js)

// server.js\nconst http = require('http');\nconst { Server } = require("socket.io");\n\n// 1. Criar um servidor HTTP\nconst server = http.createServer((req, res) => {\n    res.writeHead(200, { 'Content-Type': 'text/plain' });\n    res.end('Servidor Socket.io iniciado');\n});\n\n// 2. Criar uma instância do Socket.io vinculada ao servidor\nconst io = new Server(server);\n\n// 3. Manipulador de conexão de novo cliente\nio.on('connection', (socket) => {\n    console.log('Novo usuário conectado:', socket.id);\n\n    // 4. Ouvir o evento 'chat message' do cliente\n    socket.on('chat message', (msg) => {\n        console.log('Mensagem:', msg);\n        // 5. Enviar a mensagem para TODOS os clientes conectados (incluindo o remetente)\n        io.emit('chat message', msg);\n    });\n\n    // 6. Manipulador de desconexão do cliente\n    socket.on('disconnect', () => {\n        console.log('Usuário desconectado:', socket.id);\n    });\n});\n\n// 7. Iniciar o servidor na porta 3000\nserver.listen(3000, () => {\n    console.log('Servidor rodando em http://localhost:3000');\n});\n

Passo 2: Cliente (arquivo index.html)

<!DOCTYPE html>\n<html>\n<head>\n    <title>Chat Socket.io</title>\n    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>