Antes da introdução do HTML5, as aplicações web dependiam de técnicas de poll baseadas em HTTP para comunicação em tempo real com servidores, o que resultava em latência e sobrecarga de rede. A emergência do WebSocket transformou essa abordagem, permitindo comuniacção bidirecional eficiente diretamente sobre uma conexão TCP persistente.

Mecanismo do WebSocket

O estabelecimento de uma conexão WebSocket inicia-se com um aperto de mão HTTP esepcializado. O cliente envia uma solicitação de atualização de protocolo, e o servidor responde confirmando a mudança para WebSocket. Após isso, os dados são trocados livremente sem a sobrecarga de requisições HTTP repetitivas.

Exemplo simplificado de uma solicitação de aperto de mão:

Solicitação do cliente:
GET /servico HTTP/1.1
Host: exemplo.com
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

Resposta do servidor:
HTTP/1.1 101 Mudando Protocolos
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

Este processo garante que tanto cliente quanto servidor concordem em mudar para a comunicação WebSocket. Uma vez estabelecida, a conexão é estável e suporta transferência de dados de baixa latência, eliminando problemas como o empacotamento de dados através de marcadores de início e fim.

Papel do Socket.io

O Socket.io não é simplesmente uma implementação do WebSocket. Ele é uma biblioteca que abstrai múltiplas técnicas de comunicação em tempo real, incluindo o WebSocket como um subconjunto. Além do WebSocket, o Socket.io suporta mecanismos de polling para garantir compatibilidade com ambeintes onde o WebSocket não é disponível.

As técnicas de polling implementadas incluem:

• Flash Socket: Utilizado em alguns navegadores via Adobe Flash, mas em desuso por ser proprietário e ter suporte limitado em dispositivos móveis.
• AJAX Long Polling: O cliente realiza requisições periódicas ao servidor, que responde quando novos dados estão disponíveis. Apesar de amplamente suportado, pode gerar sobrecarga no servidor e atualizações atrasadas.
• AJAX Multipart Streaming: Mantém uma conexão AJAX aberta, permitindo que o servidor envie múltiplas respostas dentro de uma única requisição. Exemplo de código ajustado:

// Exemplo de streaming multipart via AJAX
const conexao = new XMLHttpRequest();
conexao.open('GET', '/stream-dados', true);
conexao.multipart = true;
conexao.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
        const eventos = JSON.parse(this.responseText);
        processarDados(eventos);
    }
};
conexao.send();

• Forever Iframe: Usa um iframe oculto para receber atualizações do servidor via tags script. No entanto, é limitado por restrições de segurança e falta de suporte moderno em navegadores.
• JSONP Polling: Semelhante ao AJAX polling, mas suporta requisições cross-origin utilizando o mecanismo JSONP para contornar restrições de mesma origem.

O Socket.io integra automaticamente essas abordagens, proporcionando uma API unificada para comunicação em tempo real, independentemente das capacidades do ambiente do cliente.