Em aplicações cliente-servidor tradicionais, o cliente envia requests para o servidor, que por sua vez responde de maneira síncrona. Mas e quando queremos que o nosso cliente receba mensagens do servidor quando algo relevante acontecer nele, como fazer? Por exemplo, após o processamento de uma tarefa demorada, complexa, que não conseguiríamos ter uma resposta na mesma request que fizemos…Algumas empresas tem a brilhante ideia de fazer polling, que nada mais é do que ficar fazendo requests de tempos em tempos para ver se o servidor tem alguma novidade, uma técnica que até funciona, mas que ao mesmo tempo é extremamente ineficiente.
WebSocket é uma tecnologia que permite comunicação bi-lateral usando uma única conexão (socket) entre o cliente e o servidor. Assim, tanto o cliente pode enviar requests, quando o server, a hora que quiserem após a conexão ser estabelecida. Suportado em todos os browsers modernos, permite criarmos qualquer tipo de troca de informação assíncrona e leve, o que é ideal para aplicações real-time e front-ends reativos (as famosas SPAs ou Single Page Applications).
Em um tutorial aqui do blog, ensino a usar a biblioteca Socket.io para construção de uma aplicação de chat baseada em websockets, inclusive com um cliente para Android e em outro tutorial ensino a criar um servidor de websockets. No tutorial de hoje, eu vou ensinar como você pode construir um cliente de websockets em Node.js usando a biblioteca WS, a mais popular e leve, para servir dados assíncronos em real-time para seus clientes.
Veremos neste tutorial:
Se preferir, pode assistir ao vídeo abaixo, com o mesmo conteúdo:
Vamos lá!
#1 – Setup do Projeto
Crie uma nova pasta chamada client e dentro dela rode o comando abaixo para iniciar uma nova aplicação Node.js zerada.
|
1 2 3 |
npm init -y |
Instale neste projeto a dependência WS, que usaremos para fazer a conexão com um servidor público de websockets na Internet.
|
1 2 3 |
npm i ws |
Agora crie nesta pasta um arquivo chamado index.js, que será responsável por conectar no servidor de websockets. Dentro dele pode colocar apenas um console.log de olá mundo para ver se está tudo funcionando corretamente.
Vamos ajustar também nosso package.json para que incluir um script de inicialização que carrega as variáveis de ambiente e executa nosso index.js
|
1 2 3 4 5 6 |
//package.json "scripts": { "start": "node index" }, |
Agora basta executar a aplicação no terminal usando o comando de start.
|
1 2 3 |
npm start |
E temos uma aplicação Node.js pronta para ser programada!
#2 – Conexão via WebSockets
Nesta segunda parte do tutorial vamos aprender como realizar uma conexão via WebSockets. Para isso, usaremos o servidor de WebSockets da Binance, a maior exchange de criptomoedas do mundo, que disponibiliza de maneira pública e gratuitamente os seus dados em tempo-real via websockets. Eu já falei em mais detalhes da Binance e como criar bots para ela em outros tutoriais aqui do blog.
Basicamente você encontra na documentação deles todas as streams disponíveis para conexão e aqui, a título de exemplo, nos conectaremos na stream de Book Ticker, ou seja, receberemos em tempo real as melhores ofertas de compra e venda para um par de moedas via websockets.
Para isso, modifique o seu index.js para o código abaixo.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const WebSocket = require('ws'); const ws = new WebSocket("wss://stream.binance.com:9443/ws/btcbusd@bookTicker"); ws.onmessage = (event) => { process.stdout.write('\033c'); const obj = JSON.parse(event.data); console.log(`Symbol: ${obj.s}`); console.log(`Best ask: ${obj.a}`); console.log(`Best bid: ${obj.b}`); } |
O que o código acima faz? Primeiro, carregamos a classe WebSocket de dentro do pacote WS, para que possamos usá-la logo na sequência para nos conectarmos no endereço de uma stream da Binance. Esta stream em específico é para recebermos o Book Ticker do symbol BTCBUSD (Bitcoins negociados a Binance Dollars). Trocando o symbol/coinpair antes do @ muda a moeda monitorada, caso queira experimentar outras combinações.
Uma vez com a conexão realizada, o servidor de websockets da Binance passará a lhe enviar mensagens com os valores atualizados. Para recebermos e processarmos essas mensagens nós utilizamos o event handler onMessage, que declaramos logo abaixo através de uma função.
Essa função será disparada toda vez que uma nova mensagem for recebida vindo deste canal, sendo que o objeto event que é recebido possui uma propriedade data, com os dados que o servidor lhe enviou. Geralmente estes dados vem em texto, logo utilizei um JSON.parse para transformar em JSON e podermos pegar facilmente as suas propriedades para impressão.
Repare que cada servidor de websockets envia a mensagem com o seu padrão específico, então você deve sempre consultar a documentação do mesmo para entender o que ele vai lhe enviar e como usar esses dados para algo útil. No caso dessa stream da Binance, o objeto possui as propriedades s, a e b (usar nomes curtos é pré-requisito para boa performance e economia de banda); sendo o symbol, o ask e o bid, respectivamente.
Também usei um process.stdout ali imprimindo um caracter especial para manter o console limpo, mesmo com o volume de dados que iremos receber.
Experimente executar a aplicação e você vai rapidamente perceber o quão poderosa é este tipo de tecnologia.
#3 – Mensagens via WebSockets
Além de fazer uma conexão via websockets para receber dados do servidor, você pode querer ou precisar enviar mensagens para o servidor. Isso é comum em websocket servers que possuam diversas finalidades ou configurações.
No caso das streams da Binance, para manter o exemplo que já estamos trabalhando, você pode enviar mensagens para se inscrever ou desinscrever de streams, ao invés de simplesmente ficar preso a uma única stream como fizemos no exemplo anterior.
Para que o usuário possa informar o par de moedas que ele deseja usar, instale outro pacote em seu projeto chamado readline-sync, que permite mandar uma pergunta ao usuário no terminal e capturar a sua resposta.
|
1 2 3 |
npm i readline-sync |
Agora volte ao seu index.js e modifique o código inteiro para que fique como abaixo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const ws = new WebSocket("wss://stream.binance.com:9443/ws/bookTicker"); const readlineSync = require('readline-sync'); const symbol = readlineSync.question('Qual par de moedas deseja monitorar? '); ws.on('open', () => { ws.send(JSON.stringify({ "method": "SUBSCRIBE", "params": [`${symbol.toLowerCase()}@bookTicker`], "id": 1 })) }) ws.onmessage = (event) => { process.stdout.write('\033c'); const obj = JSON.parse(event.data); console.log(`Symbol: ${obj.s}`); console.log(`Best ask: ${obj.a}`); console.log(`Best bid: ${obj.b}`); } |
No exemplo acima, quando você responder à pergunta do readline-sync com um par de moedas (sem espaço entre as siglas) a linha de baixo será executada fazendo a conexão e definindo o event handler do evento open, que será disparado quando a conexão for estabelecida. Neste evento, estamos enviando um JSON como string contendo os parâmetros exigidos pelo servidor da Binance para assinar uma stream de dados específica, cujo symbol é o que o usuário escolheu.
O restante do código é o mesmo que já tínhamos antes.
Experimente agora executar esse cliente de websockets informando symbols diferentes como btcbusd e btcbrl, por exemplo.
E com isso agora você tem dois exemplos para se inspirar e criar os clients de websockets para os seus projetos reais.
Espero que seja útil!
Quer criar um front web que consome websockets? Confira este tutorial!
Quer aprender como usar WebSockets com JS “vanilla”, confira o vídeo abaixo.
Olá, tudo bem?
O que você achou deste conteúdo? Conte nos comentários.