Há mais de um ano desenvolvo um chat em meu trabalho. Sendo uma aplicação web que permite que os usuários conversem em tempo real, utilizamos WebSockets para tornar essa troca de mensagens possível.

Só que tem um porém nessa história: como um júnior em meu primeiro emprego, eu não fazia ideia de como WebSockets funcionavam - e sendo bem honesto, nem o que eram.

Hoje posso dizer que entendo a ponto de conseguir falar o que são WebSockets, para que servem e como funcionam. Então, de júnior para júnior, vamos ver como os WebSockets (e bibliotecas como o socket.io) funcionam.

Acessar páginas é como trocar cartas

Por padrão, acessar uma página na Internet é como fazer parte de uma troca de cartas: enviamos uma carta inicial, que tem como mensagem nossa requisição para acessar a página, e recebemos de volta do servidor uma carta com a página que pedimos.

Quando interagimos com a página de forma que ela precise mudar, como quando você clicou para abrir esse post, estamos escrevendo outra carta que será enviado ao Sr. Servidor esperando que ele mande de volta outra página.

Ainda que seja verdade que os frameworks JavaScript modernos mudaram de alguma forma essa lógica, já que em aplicações criadas com ferramentas como React e Vue tradicionalmente toda a aplicação existe e se mantém em nossos navegadores, essa é a base de como a Web funciona e acessamos sites. Uma troca sem fim de cartas entre pessoas e servidores.

Isso permite que diversas aplicações possam existir e tornar nossas vidas mais fáceis. Porém, nem todas as aplicações funcionam bem nesse formato de troca de cartas.

Imagine o cenário: o Rodolfo, que trabalha como investidor na Bolsa de Valores, não tira o olho de seu monitor para conseguir comprar as ações que estão em seu radar pelo melhor preço. Entre um gole e outro de energético, porém, ele precisa recarregar a página para ver o novo preço dessas ações, esperando alguns segundos para que as informações sejam carregadas novamente.

Para ele, que precisa tomar decisões envolvendo muito dinheiro em questões de segundos, esperar este tempo é um pesadelo. Ele pode estar, literalmente, perdendo dinheiro.

O que ele precisa é de uma aplicação que consiga atualizar os valores da ação de forma automática, sem que seja necessário que ele recarregue a página diversas vezes. Fazendo, por baixo dos panos, uma troca de informações com o servidor de forma contínua e interativa.

E é aí que entram os WebSockets.

WebSockets são os telefones dos protocolos da web

Antes de entrar à fundo na conversa sobre WebSockets, um lembrete importante: eles não foram a primeira forma de tornar possível a comunicação contínua e bidirecional entre nosso navegador e o servidor. Opções como HTTP long polling* já tornavam possível esse troca de mensagens simultânea, mas de uma forma complexa e criando bastante dor de cabeça para os desenvolvedores na hora de desenvolver a aplicação.

Pensando então em tornar nossas vidas mais fáceis e os sites que construímos mais ricos, nasceu o protocolo* WebSockets, para permitir essa comunicação iterativa e em tempo real entre o browser e o servidor.

Se antes precisávamos falar com o Sr. Servidor por meio de cartas, agora temos um telefone para fazer essa conversa. O WebSocket é como o smartphone dos protocolos, enquanto seus primos mais velhos, como o long polling, seriam aqueles telefones tijolões da década de noventa.

A ideia aqui não é entrar nos detalhes de como o protocolo funciona, mas de forma simplista, um WebSocket funciona sobre uma conexão TCP* que permite a troca de informações nas duas direções. Seu servidor pode falar quando quiser, assim como você. Como em uma ligação telefônica.

Mas pra essa ligação acontecer, é preciso que exista uma troca inicial de mensagens que a torne possível. Pra sair do famoso “bora marcar” pro “bora falar”. Por baixo dos panos, esse processo acontece no momento em que o WebSocket é conectado ao servidor, em um processo chamado de handshake - ou aperto de mão, em bom português.

O valor que é enviado pelo lado do cliente é esse aqui, que é a forma protocolar de dizer “ei, posso te ligar pra gente trocar uma ideia?”:

// Handshake do navegador
GET /chat HTTP/1.1
        Host: server.example.com
        Upgrade: websocket
        Connection: Upgrade
        Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
        Origin: <http://example.com>
        Sec-WebSocket-Protocol: chat, superchat
        Sec-WebSocket-Version: 13

E se tudo correr bem e o servidor estiver disponível para conversar, vamos receber dele algo como isso aqui, que quer dizer um “claro, vou te ligar!”:

// Handshake do servidor
HTTP/1.1 101 Switching Protocols
        Upgrade: websocket
        Connection: Upgrade
        Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
        Sec-WebSocket-Protocol: chat

Dessa forma, uma conexão WebSocket foi bem estabelecida, e a conversa já pode acontecer.

E assim conseguimos construir uma aplicação que atualiza o preço das ações para o Rodolfo automaticamente, fazendo com que ele consiga fazer seus investimentos sem passar tanto nervoso.

Tudo o que expliquei é interessante para entendermos porquê os WebSockets foram criados e como funcionam. Mas como falei antes, tudo isso acontece por baixo dos panos, e no dia-a-dia é quase certo que você vai usar, como eu, bibliotecas que abstraem as partes complexas do protocolo e facilitam nosso trabalho. Uma delas é a socket.io.

Trabalhando com WebSockets por meio da biblioteca socket.io

A socket.io é uma biblioteca JavaScript que facilita a criação de sites que usam conexões WebSockets. Entre todas as que encontramos no npm, o gerenciador de pacotes JavaScript, **ela é a mais famosa.

A ideia por trás dela é entregar uma experiência conjunta de WebSockets, HTTP Long Polling e vários macetes para que nossas aplicações consigam fazer essa comunicação simultânea com o servidor de forma performática e estável.

A biblioteca trabalha com base em eventos, que podem ser enviados ou recebidos tanto pelos clientes quanto pelo servidor, passando qualquer tipo de dado.

Um exemplo de um evento que envia mensagens poderia ser assim:

socket.emit('chat message', messageInput.value);

Sendo socket a instância que você vai criar importando a biblioteca.

Já o servidor poderia receber esse evento e fazer a lógica de acordo com um evento como:

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
  });
});

Para entender mais o que está acontecendo nesse código e ter um exemplo mais aprofundado de como o socket.io funciona, recomendo o Getting Started da documentação oficial.

A ideia desse texto foi apresentar de forma breve e abstrata o conceito do protocolo WebSocket e em quais situações ele pode ser usado.

Considero ser um conhecimento muito válido de aprender, já que vai te permitir criar aplicações robustas e com um funcionamento diferente do habitual.

Como forma de se aprofundar no tema, deixo aqui algumas recomendações de documentações e tutoriais:

WebSockets in 100 Seconds & Beyond with Socket.io

Web Sockets + JavaScript = Mini Poke Town feat. Codecon!

RFC 6455: The WebSocket Protocol

WebSockets - APIs da Web | MDN

Bons estudos.