Node.js — Usando WebSockets

Image for post
Image for post

WebSockets são uma ferramenta para comunicação bidirecional entre um cliente de navegador e um servidor. Em particular, os WebSockets permitem que o servidor envie dados para o cliente. Isso é diferente de sua solicitação HTTP padrão usando fetch() ou Axios porque o servidor não pode se comunicar com o cliente a menos que o cliente envie uma solicitação primeiro.

WebSockets são mais flexíveis, mas também são mais difíceis de implementar e escalar. Os WebSockets sobrecarregam ainda mais o desenvolvedor, portanto, use-os com moderação e apenas quando for absolutamente necessário. Neste artigo, você aprenderá como construir um aplicativo simples de bate-papo em tempo real usando WebSockets.

O Servidor WebSocket

O pacote ws npm é a "de fato" biblioteca WebSocket para Node.js. Você também pode usar Socket.IO, mas Socket.IO é uma abstração de nível superior sobre WebSockets, ao invés de uma implementação do protocolo WebSocket.

Abaixo está um exemplo básico de um servidor WebSocket que rastreia todos os sockets abertos e envia mensagens de entrada para todos os sockets abertos. Você pode pensar nisso como um simples servidor de bate-papo: quando uma pessoa envia uma mensagem, o servidor a transmite para todos que estão ouvindo.

Cliente WebSocket em Node.js

Uma conexão WebSocket possui dois componentes, um cliente e um servidor. No exemplo acima, você criou um servidor. Os clientes iniciam uma solicitação para abrir uma conexão WebSocket e os servidores respondem às solicitações de entrada para abrir conexões WebSocket.

Você também pode criar um cliente WebSocket em Node.js usando ws. Isso é ótimo para testar sua lógica WebSocket, embora você também possa usar WebSockets para comunicação entre serviços de back-end. Abaixo está um exemplo de um cliente WebSocket que se comunica com o servidor acima.

Cliente WebSocket no navegador

A maioria dos navegadores modernos oferece suporte para WebSockets por padrão . Em outras palavras, você pode usar a classe WebSocket no navegador sem ws ou sem transpiladores, a menos que queira oferecer suporte ao Internet Explorer 9 ou Opera Mini. Abaixo está uma imagem da seção de WebSockets do caniuse.com.

Image for post
Image for post

E aqui está um exemplo de uma página de chat que se conecta ao servidor do início desse artigo:

Observe que os WebSockets no navegador têm uma sintaxe ligeiramente diferente para aguardar a conexão e receber mensagens do servidor . Ao invés de on('message', messageHandler), você deve escrever onmessage = messageHandler.

Créditos

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store