DEV Community 👩‍💻👨‍💻

Cover image for Node.js - Usando WebSockets
Eduardo Rabelo
Eduardo Rabelo

Posted on

Node.js - Usando WebSockets

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.

const WebSocket = require('ws');
const server = new WebSocket.Server({
  port: 8080
});

let sockets = [];
server.on('connection', function(socket) {
  // Adicionamos cada nova conexão/socket ao array `sockets`
  sockets.push(socket);

  // Quando você receber uma mensagem, enviamos ela para todos os sockets
  socket.on('message', function(msg) {
    sockets.forEach(s => s.send(msg));
  });

  // Quando a conexão de um socket é fechada/disconectada, removemos o socket do array
  socket.on('close', function() {
    sockets = sockets.filter(s => s !== socket);
  });
});
Enter fullscreen mode Exit fullscreen mode

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.

let clients = [
  new WebSocket('ws://localhost:8080'),
  new WebSocket('ws://localhost:8080')
];

clients.map(client => {
  client.on('message', msg => console.log(msg));
});

// Esperamos o cliente conectar com o servidor usando async/await
await new Promise(resolve => clients[0].once('open', resolve));

// Imprimi "Hello!" duas vezes, um para cada cliente
clients[0].send('Hello!');
Enter fullscreen mode Exit fullscreen mode

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.

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

<html>
  <head>
    <script type="text/javascript">
      const ws = new WebSocket('ws://localhost:8080');

      // A classe `WebSocket` nos navegadores tem uma sintaxe um pouco diferente de `ws`
      // Ao invés da sintax de EventEmmiter `on('open')`, você adiciona um callback
      // a propriedade `onopen`.
      ws.onopen = function() {
        document.querySelector('#send').disabled = false;

        document.querySelector('#send').addEventListener('click', function() {
          ws.send(document.querySelector('#message').value);
        });
      };

      ws.onmessage = function(msg) {
        document.querySelector('#messages').innerHTML += `<div>${msg.data}</div>`;
      };
    </script>
  </head>
  <body>
    <h1>Chat</h1>
    <div>
      <input id="message" placeholder="Message">
      <button id="send" disabled="true">Send</button>
    </div>
    <div id="messages">
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!