Desbloqueando o poder do Nodejs Websocket: guia completo

Você já se viu em uma situação em que precisava construir um aplicativo em tempo real? Ainda assim, você achou os modelos tradicionais de comunicação cliente-servidor muito lentos e ineficientes. Se sim, os WebSockets são a solução que você procura. WebSockets é um protocolo poderoso que permite comunicação bidirecional e de baixa latência entre o cliente e o servidor. De acordo com Pesquisa de desenvolvedor Stack Overflow 2022, na categoria Web framework e tecnologia, Node.js ficou com 47,12%. Isso significa que é a tecnologia da web mais popular.

Portanto, muitas vezes surge uma pergunta: como você usa WebSockets em Node.js? Vamos investigar um servidor de aplicativos WebSocket fundamental com mais detalhes. Neste artigo, abordaremos os fundamentos dos WebSockets, como configurá-los usando Node.js, como criar um cliente WebSocket com JavaScript e muito mais. Você terá um bom domínio da utilização de WebSockets com Node.js para criar aplicativos em tempo real ao final deste artigo.

O que são WebSockets?

WebSocket é um protocolo de Internet que fornece canais de comunicação full-duplex (bidirecional) em uma única conexão TCP entre um navegador da Web ou outro aplicativo cliente e um servidor da Web. Ele foi projetado para ser implementado em navegadores e servidores web, mas pode ser usado por qualquer aplicação cliente ou servidor. O protocolo WebSocket permite a interação entre um cliente e um servidor com menor sobrecarga do que alternativas half-duplex, como a pesquisa HTTP, que requer viagens de ida e volta adicionais do cliente para manter as conexões ativas. Em contraste, os WebSockets permanecem abertos até que um lado os feche explicitamente ou devido a erros/tempo limite de rede em ambos os lados.

Os WebSockets tornam muito mais fácil para os desenvolvedores criar aplicativos interativos ricos porque eles não precisam mais se preocupar em criar ciclos de solicitação/resposta de longa duração. Em vez disso, eles apenas enviam mensagens através do soquete sempre que necessário, sem que seus usuários esperem por atualizações de página, etc., o que resulta em melhor capacidade de resposta e melhor experiência geral do usuário.

Além disso, como todos os dados transmitidos através deste canal são criptografados (usando TLS), as preocupações de segurança associadas às solicitações HTTP tradicionais são drasticamente reduzidas, tornando-as ideais para operações confidenciais onde a privacidade é mais importante, como transações bancárias, etc.

WebSockets também elimina a necessidade de escrever código personalizado sempre que uma atualização precisa ser propagada entre vários clientes conectados por meio da mesma sessão. Em vez disso, as alterações feitas em uma extremidade se propagam automaticamente nas outras, economizando recursos valiosos de desenvolvimento!

Implementando WebSockets usando Node.js

Para implementar WebSockets em Node.js, existem alguns pré-requisitos que você precisa ter em vigor. Também é importante que você siga as melhores práticas de segurança ao criar um aplicativo Node.js. Portanto, quando se trata de garantir a segurança de seus aplicativos Node.js, as práticas recomendadas de segurança do Node.js podem ajudá-lo a proteger seus dados e usuários.

Pré-requisitos

Aqui estão os pré-requisitos para criar um aplicativo WebSocket:

• Node.js: você deve ter a versão mais recente do Node.js instalada e pronta em sua máquina. Se você não possui o Node'js, você pode baixar e instalar a versão mais recente do site oficial do Node.js..
• Biblioteca WebSocket: você precisará instalar uma biblioteca WebSocket como ws para lidar com conexões de soquete para seu aplicativo.

Implementação

Agora que temos tudo configurado, estamos prontos para começar a criar nosso aplicativo WebSocket.

Etapa 1: inicializar o projeto para executar o Websocket Nodejs

Primeiro, crie um novo projeto Node.js no diretório de sua escolha. Em seguida, instale a biblioteca ws usando o gerenciador de pacotes do nó (npm):

mkdir nodejs-websockets
cd nodejs-websockets
npm init -y

Etapa 2: instale as dependências necessárias

Em seguida, precisamos instalar a biblioteca ws, que nos permitirá exibir o lado do cliente usando uma página HTML. Para instalar a biblioteca, abra seu terminal e digite o seguinte comando npm:

npm install ws express

Esta é a aparência do seu arquivo package.json:

{
  "name": "websockets-nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords":  ,
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "ws": "^8.13.0"
  }
}

Nota: Este tutorial é baseado na versão 8.13.0 do ws e na versão 4.18.2 do pacote expresso. Portanto, sua implementação pode diferir dependendo da versão mais recente durante a instalação.

Etapa 3: Crie um servidor WebSocket

Agora que temos tudo configurado, vamos criar o servidor WebSocket para nossa aplicação. Primeiro, crie um novo arquivo na pasta do projeto e nomeie-o server.js. Em seguida, adicione o seguinte código do lado do servidor:

const express = require('express')

const webserver = express 
 .use((req, res) =>
   res.sendFile('/ws-client.html', { root: __dirname })
 )
 .listen(3000,   => console.log(`Listening on ${3000}`))

const { WebSocketServer } = require('ws')
const sockserver = new WebSocketServer({ port: 2048 })

sockserver.on('connection', ws => {
    console.log('New client connected!')
    
    ws.send('connection established')
    
    ws.on('close',   => console.log('Client has disconnected!'))
    
    ws.on('message', data => {
        sockserver.clients.forEach(client => {
        console.log(`distributing message: ${data}`)
        client.send(`${data}`)
        })
    })
    
    ws.onerror = function   {
        console.log('websocket error')
    }
}
)

Isso criará um novo servidor WebSocket na porta 2048 que escutará novas conexões. Portanto, quando um novo cliente se conecta, envia mensagens ou se desconecta, o servidor registrará uma mensagem no console.

Etapa 4: Crie um cliente WebSocket

Para disponibilizar o servidor através do navegador, você deve em seguida construir uma página em HTML chamada ws-client.html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebSocket Chat App</title>

    <link href="https://cdn.jsdelivr.net/npm/(email protected)/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <style>
      body{
        padding:4rem;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>WebSocket Chat App</h1><br /><br /><br />
    
    <form >
      <input  type="text"  placeholder="Enter message here" name="message"><br /><br />
      <input  type="submit" value="Send"><br /><br />
    </form>
    
    <div ></div>
  </body>
</html>

Adicione o seguinte código ao elemento script do arquivo HTML para construir um cliente WebSocket:

const webSocket = new WebSocket('ws://localhost:2048/');

webSocket.onmessage = (event) => {
  console.log(event)
  document.getElementById('messages').innerHTML += 
    'Message from server: ' + event.data + "<br />";
};

webSocket.addEventListener("open",   => {
  console.log("Client is now connected");
});

function sendMessage(event) {
  var inputMessage = document.getElementById('message')
  webSocket.send(inputMessage.value)
  inputMessage.value = ""
  event.preventDefault ;
}

document.getElementById('input-form').addEventListener('submit', sendMessage);

Ao usar a porta 2048 para conectar-se ao servidor, esse código estabelece um novo cliente WebSocket. Enviamos uma mensagem ao servidor assim que a conexão é estabelecida e registramos uma mensagem no console. Também ficamos atentos às mensagens do servidor e as registramos no console. Quando o cliente se desconecta, finalmente aguardamos o evento de encerramento para registrar uma mensagem.

O arquivo HTML final deve ficar assim:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebSocket Chat App</title>

    <link href="https://cdn.jsdelivr.net/npm/(email protected)/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <style>
      body{
        padding:4rem;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>WebSocket Chat App</h1><br /><br /><br />
    
    <form >
      <input  type="text"  placeholder="Enter message here" name="message"><br /><br />
      <input  type="submit" value="Send"><br /><br />
    </form>
    
    <div ></div>
    <script>
      const webSocket = new WebSocket('ws://localhost:2048/');

      webSocket.onmessage = (event) => {
        console.log(event)
        document.getElementById('messages').innerHTML += 
          'Message from server: ' + event.data + "<br />";
      };

      webSocket.addEventListener("open",   => {
        console.log("Client is now connected");
      });

      function sendMessage(event) {
        var inputMessage = document.getElementById('message')
        webSocket.send(inputMessage.value)
        inputMessage.value = ""
        event.preventDefault ;
      }

      document.getElementById('input-form').addEventListener('submit', sendMessage);
    </script>
  </body>
</html>

Sua página HTML ficaria assim.

Etapa 5: inicie o servidor e execute o cliente

Por fim, inicie o servidor executando o seguinte comando em seu terminal:

node server.js

Você deverá ver a seguinte saída em seu terminal:

Isso indica que o servidor está em execução agora.

Agora, vá para o seu navegador e abra

A saída mostra que o cliente se conectou com sucesso ao servidor.

Você pode ver que o aplicativo cliente está conectado ao servidor. Agora, você pode abrir várias instâncias do aplicativo e tentar enviar e receber mensagens. Como você pode ver, você recebe uma mensagem de resposta em tempo real do servidor na página web, logo abaixo do botão enviar.

Alternativas para a biblioteca ws

Embora a biblioteca ws seja uma escolha popular para trabalhar com WebSockets em Node.js, várias outras bibliotecas e estruturas podem ser usadas para obter resultados semelhantes. Vejamos algumas dessas alternativas e compará-las com a biblioteca ws.

Soquete.io

Trabalhar com conexões WebSocket em Node.js é simplificado e intuitivo pelo conhecido módulo WebSocket Soquete.io. Os desenvolvedores podem criar aplicativos que rodam em uma variedade de dispositivos, pois isso permite mecanismos de fallback para navegadores que não oferecem suporte a WebSockets.

A capacidade de projetar aplicativos complicados com vários canais de comunicação graças ao suporte do Socket.io para namespaces e salas é um de seus principais benefícios. É uma excelente opção para aplicações em tempo real porque possui um método integrado para lidar com desconexões e reconexões de clientes.

Mas comparado à biblioteca ws, o Socket.io tem uma base de código maior e mais dependências, o que pode torná-lo mais lento e usar mais recursos. Além disso, o código é difícil de ler e manter devido à forte dependência de retornos de chamada.

SockJS

Para navegadores que não suportam WebSockets, uma opção alternativa é oferecida pelo SockJS, outra biblioteca WebSocket. Além disso, ele suporta uma variedade de transportes, como polling, o que pode ser vantajoso ao interagir com navegadores e dispositivos mais antigos.

SockJS oferece suporte a implementações do lado do servidor em muitas linguagens, incluindo Java, Python e Ruby, que é um de seus principais benefícios. É uma opção maravilhosa para desenvolver aplicativos multiplataforma por causa disso.

No entanto, o SockJS é menos conhecido e utilizado do que a biblioteca ws e o Socket.io, tornando mais difícil localizar assistência e informações online. Além disso, oferece menos recursos e pode não ser apropriado para aplicações sofisticadas.

uWebSockets.js

Uma estrutura WebSocket leve chamada uWebSockets.js oferece uma interface de alto desempenho para gerenciar conexões WebSocket em Node.js. É uma boa opção para aplicações de transmissão de dados em alta velocidade, pois utiliza um núcleo C++ de baixo nível para fornecer desempenho rápido e pouca latência.

Um dos principais benefícios do uWebSockets.js é sua base de código compacta e pouca utilização de recursos, o que pode reduzir os custos do servidor e aumentar o desempenho. É uma opção adequada para aplicações em tempo real porque possui um sistema integrado para lidar com desconexões e falhas.

A curva de aprendizado de uWebSockets.js é mais acentuada do que a de outras bibliotecas WebSocket, portanto, pode não ser apropriada para programadores novatos ou desenvolvedores com pouca experiência em programação de baixo nível.

Prós e contras das bibliotecas WebSocket

Cada biblioteca tem vantagens e desvantagens, dependendo dos requisitos da aplicação e da experiência do desenvolvedor.

Aqui estão alguns prós e contras gerais do uso de bibliotecas WebSocket em Node.js.

Alternativas de WebSockets

Vamos mergulhar nas alternativas aos WebSockets e compará-las com os WebSockets.

É crucial levar em consideração os requisitos específicos do seu aplicativo ao comparar WebSockets com diversas alternativas. WebSockets são capazes de oferecer suporte a vários clientes ativos e fornecer comunicação bidirecional de baixa latência. Os navegadores modernos também oferecem suporte frequente a WebSockets, que são simples de criar em Node.js usando o pacote ws.

Por outro lado, embora possam ser mais fáceis de construir, algumas alternativas, como Long Polling e SSE, podem não ser tão eficazes ou escaláveis. Embora o WebRTC envolva configuração adicional e nem sempre seja necessário, ele é excelente para alguns casos de uso. O MQTT funciona bem para aplicativos da Internet das Coisas; no entanto, pode não funcionar para todos os cenários de comunicação em tempo real.

Conclusão

Concluindo, WebSockets são uma ferramenta poderosa que pode fornecer ótimas soluções para a construção de aplicações em tempo real. Eles permitem comunicação bidirecional e de baixa latência entre o cliente e o servidor.

Quando usados ​​junto com o Node.js, eles fornecem uma solução escalonável e de alto desempenho para que os desenvolvedores criem aplicativos em tempo real com GUIs ricas, interativas e responsivas, sem se preocupar com ciclos de solicitação/resposta de longa duração. Além disso, os WebSockets melhoram a segurança de operações confidenciais, como transações bancárias, e eliminam a necessidade de código personalizado sempre que uma atualização precisa ser transferida entre vários clientes.

Ao desenvolver aplicativos Node.js, é importante encontrar uma equipe confiável e experiente de desenvolvedores que possa fornecer serviços Node.js escalonáveis ​​e de alta qualidade. A empresa de desenvolvimento de Node.js deve ter experiência prévia na construção de aplicativos Node.js inovadores e voltados para o desempenho.

Se você gostou deste artigo, confira nossos outros guias abaixo;

• Alterar versão do nó: um guia passo a passo
• Cache Node JS: aumentando o desempenho e a eficiência
• Desbloqueie o poder dos microsserviços Node.JS
• Desbloqueando o poder do Websocket Nodejs
• Melhores editores de texto e IDE Node JS para desenvolvimento de aplicativos