Os aplicativos da web modernos geralmente exigem comunicação em tempo real, seja para sistemas de bate-papo, atualizações ao vivo, edição colaborativa ou notificações. A comunicação HTTP tradicional é insuficiente para aplicações em tempo real, pois depende de padrões de solicitação-resposta. É aqui que os WebSockets entram em ação, permitindo a comunicação full-duplex entre o servidor e o cliente.

Neste artigo, exploraremos:

1. O que são WebSockets e por que são essenciais para aplicações em tempo real.
2. Como implementar WebSockets em Node.js.
3. Usando Socket.IO para simplificar a implementação do WebSocket.
4. Exemplos de casos de uso reais.

O que são WebSockets?

WebSockets são um protocolo que fornece canais de comunicação full-duplex em uma única conexão TCP. Ao contrário das solicitações HTTP tradicionais, que são baseadas em solicitação-resposta e têm sobrecarga no estabelecimento contínuo de novas conexões, os WebSockets permitem comunicação persistente.

Principais recursos:

• Comunicação Full-Duplex: Tanto o cliente quanto o servidor podem enviar mensagens a qualquer momento, sem esperar um pelo outro.
• Menor latência: WebSockets eliminam a necessidade de abrir e fechar conexões constantemente, reduzindo a latência e melhorando o desempenho de aplicativos em tempo real.
• Orientado por eventos: Ambos os lados podem enviar dados, tornando-os ideais para aplicativos dinâmicos como bate-papo, jogos ou notificações em tempo real.

Implementando WebSockets em Node.js

Etapa 1: instalando a biblioteca ws WebSocket

No Node.js, WebSockets não são integrados, então precisamos de uma biblioteca. Uma das bibliotecas WebSocket mais populares para Node.js é ws.

npm install ws

Etapa 2: Criando um servidor WebSocket

Aqui está um servidor WebSocket simples usando a biblioteca ws:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    console.log('Client connected');

    // Listen for messages from the client
    ws.on('message', (message) => {
        console.log('Received:', message);
        // Respond to the client
        ws.send(`Hello, you sent -> ${message}`);
    });

    // On client disconnect
    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

console.log('WebSocket server running on ws://localhost:8080');

Neste exemplo:

• Criamos um servidor WebSocket na porta 8080.
• Quando um cliente se conecta, o evento de conexão é acionado.
• O servidor escuta mensagens do cliente e responde com uma mensagem de confirmação.
• Se o cliente se desconectar, registraremos uma mensagem.

Etapa 3: Criando um cliente WebSocket

Você pode criar um cliente WebSocket usando JavaScript no navegador:

    
    
    


    
WebSocket Example
    Send Message
    

• Quando a conexão WebSocket é aberta, o cliente registra uma mensagem de sucesso.
• Uma mensagem é enviada ao servidor quando o botão é clicado e a resposta do servidor é exibida.

Saída:

1. Registros de clientes:

   Connected to WebSocket server
   Message from server: Hello, you sent -> Hello from client

1. Registros do servidor:

   Client connected
   Received: Hello from client

Socket.IO: WebSockets simplificados

Embora os WebSockets sejam poderosos, eles exigem algum trabalho manual para lidar com eventos como reconexões, transmissão e gerenciamento de substitutos (por exemplo, pesquisas longas). Socket.IO simplifica a comunicação em tempo real, fornecendo recursos como:

• Reconexão automática.
• Transmissão de eventos para vários clientes.
• Retorne à pesquisa se WebSockets não forem suportados.

Etapa 1: Instalando o Socket.IO

npm install socket.io

Etapa 2: Criando um servidor Socket.IO

const http = require('http');
const socketio = require('socket.io');

// Create an HTTP server
const server = http.createServer();
const io = socketio(server);

io.on('connection', (socket) => {
    console.log('Client connected');

    // Listen for messages from the client
    socket.on('message', (msg) => {
        console.log('Received message:', msg);
        socket.emit('message', `Server received: ${msg}`);
    });

    // On client disconnect
    socket.on('disconnect', () => {
        console.log('Client disconnected');
    });
});

server.listen(3000, () => {
    console.log('Socket.IO server running on http://localhost:3000');
});

Aqui:

• Criamos um servidor usando Socket.IO que escuta conexões e mensagens recebidas.
• socket.emit é usado para enviar uma mensagem de volta ao cliente.

Etapa 3: Criando um cliente Socket.IO

    
    
    


    
Socket.IO Example
    Send Message
    
    

Neste exemplo, o cliente Socket.IO gerencia automaticamente a conexão com o servidor e permite a comunicação bidirecional.

Saída:

1. Registros de clientes:

   Connected to server
   Message from server: Server received: Hello from client

1. Registros do servidor:

   Client connected
   Received message: Hello from client

Casos de uso para WebSockets e Socket.IO

4.1 Aplicativo de bate-papo em tempo real

Problema: uma plataforma de mensagens precisa permitir a comunicação em tempo real entre os usuários.

Solução: WebSockets (ou Socket.IO) fornecem uma conexão persistente orientada a eventos, permitindo que os usuários enviem e recebam mensagens em tempo real sem atrasos.

4.2 Edição colaborativa de documentos em tempo real

Problema: os usuários que colaboram em um documento precisam ver as alterações feitas por outras pessoas instantaneamente.

Solução: Ao usar WebSockets, as alterações são enviadas para todos os clientes em tempo real, garantindo que o documento permaneça sincronizado entre todos os usuários.

4.3 Notificações em Aplicações Web

Problema: um aplicativo da web precisa notificar os usuários sobre eventos como novas mensagens, atualizações ou alertas.

Solução: WebSockets permitem que o servidor envie notificações por push ao cliente assim que os eventos ocorrem, melhorando o envolvimento do usuário.

Dimensionando WebSockets e Socket.IO

Escalonar WebSockets e Socket.IO é um desafio devido à sua natureza persistente. Cada conexão WebSocket é uma conexão TCP de longa duração, que pode consumir muitos recursos à medida que o número de conexões aumenta.

Estratégias comuns para dimensionamento:

1. Escalonamento horizontal: Balanceamento de carga do tráfego WebSocket em vários servidores.
2. Sticky Sessions: Garantir que todas as conexões WebSocket de um cliente sejam roteadas para o mesmo servidor.
3. Redis para Pub/Sub: uso do Redis para publicação e assinatura de eventos em servidores, garantindo que todos os clientes recebam atualizações em tempo real.

npm install socket.io-redis

Aqui está um exemplo de configuração do Socket.IO para usar Redis:

const io = require('socket.io')(server);
const redisAdapter = require('socket.io-redis');
io.adapter(redisAdapter({ host: 'localhost', port: 6379 }));

Conclusão

WebSockets e Socket.IO são tecnologias essenciais para comunicação em tempo real em aplicações web modernas. Embora os WebSockets forneçam um protocolo de baixo nível para comunicação full-duplex, o Socket.IO simplifica a implementação, oferecendo recursos adicionais como reconexão automática e transmissão. Ambas as tecnologias têm aplicações significativas no mundo real, desde aplicações de chat até ferramentas colaborativas.

No próximo artigo, vamos nos aprofundar nos Streams Node.js e explorar como eles lidam com grandes dados de forma eficiente, com foco na escalabilidade e no desempenho.