Reagir WebSockets: Tutorial

30. Mai 2024 Roberto Magalhães

Crie um sistema de comunicação na Web em tempo real com nosso tutorial WebSockets for React.

React WebSockets é uma ferramenta incrivelmente poderosa para desenvolvedores web. Eles fornecem uma maneira de criar comunicação em tempo real entre servidor e cliente. Isso pode ser usado para criar uma ampla variedade de aplicativos, desde salas de bate-papo até jogos multijogador. Com React WebSockets, os desenvolvedores podem implementar uma ampla gama de recursos em seus projetos, como sistemas de notificação, atualizações e dados em tempo real.

Neste artigo, discutiremos os fundamentos do React WebSockets e como implementá-los em seus projetos. Portanto, quer você faça parte de uma equipe profissional de serviços de desenvolvimento React ou seja um solopreneur, você saberá como configurar o servidor e o cliente e como mostrar o funcionamento da transmissão de mensagens em tempo real por meio de WebSockets. Também discutiremos por que você deve usar React WebSockets, como funcionam as conexões e as diferenças em outras opções de protocolo de comunicação. Com as informações deste artigo, você poderá começar a criar projetos incríveis com React WebSockets rapidamente.

O que são WebSockets?

Com os avanços atuais na comunicação web, é padrão introduzir comunicação bidirecional ou bidirecional entre um servidor e um cliente. React WebSockets são protocolos que facilitam a comunicação full-duplex e em tempo real entre o navegador do usuário e o servidor. WebSockets atuam como uma fina camada de comunicação acima do Transport Control Protocol (TCP) para garantir que não haja atrito.

A forma como o WebSockets funciona é enviando uma solicitação de handshake, que vem de um navegador para o servidor para atualizar a comunicação. Depois que o servidor e o cliente aceitam o handshake, eles enviam e recebem dados à vontade com menos sobrecarga. Reagir WebSockets solicitações de handshake incluem um cabeçalho para garantir que o servidor não responda a trocas WebSocket anteriores.

Assim que o handshake for concluído, o servidor e o cliente entram em uma conexão binária que não está em conformidade com o protocolo HTTP. Já o servidor se comunicando com múltiplas conexões WebSocket, ele pode se comunicar individualmente com cada uma delas até que o outro lado feche a sessão. Reagir WebSockets preenche a lacuna do seu sistema típico de solicitação-resposta HTTP, fornecendo comunicação web rápida e em tempo real.

WebSockets, pesquisa HTTP, streaming HTTP e eventos enviados pelo servidor: qual é a diferença?

Quando você pensa em Reagir WebSockets como protocolos de comunicação em tempo real, você não pode deixar de se perguntar sobre os outros métodos que oferecem um propósito semelhante de criar comunicação bidirecional entre o cliente e o servidor. Embora WebSockets e HTTP sejam protocolos de comunicação, a diferença entre eles é noite e dia. HTTP é um protocolo unidirecional que usa o sistema de solicitação-resposta, enquanto WebSockets são protocolos bidirecionais.

Antes dos WebSockets, se alguém precisasse criar aplicativos da web, encontrar e usar brechas no protocolo HTTP era a única maneira de introduzir uma transferência de dados full-duplex. Embora métodos como polling HTTP, streaming HTTP e eventos enviados pelo servidor (SSE) tenham servido ao seu propósito, todos eles tinham suas restrições. Aqui estão as desvantagens de usar outros protocolos em vez do React WebSockets.

Pesquisa HTTP

O primeiro método para comunicação em tempo real para uma aplicação web no protocolo HTTP é sondar o servidor regularmente. Aqui está o ciclo de vida da pesquisa HTTP e as complicações que você pode evitar usando React WebSockets:

Para se comunicar com o servidor, o cliente envia uma solicitação. Depois disso, o cliente deve aguardar a resposta do servidor.
O servidor suspende a solicitação do cliente até atingir o tempo limite ou uma alteração ou atualização de acordo com a solicitação. O cliente fica esperando até que o servidor tenha algo para retornar para aquela solicitação.
Após qualquer atualização ou alteração, o servidor finalmente envia uma resposta ao cliente.
O longo ciclo continua enquanto o cliente envia uma nova solicitação de pesquisa e aguarda a resposta.
Exceto pela comunicação lenta, também existem várias falhas na pesquisa HTTP, como tempos limite, cache, sobrecarga de cabeçalho incluída e latência. React WebSockets remove todas essas falhas.

Transmissão HTTP

Depois de usar o método de pesquisa HTTP, qualquer pessoa pode ver suas falhas. Sem escolha de outros métodos, a única resposta razoável é lidar com algumas falhas importantes para melhorar a experiência. É aqui que o streaming HTTP brilha. É um método de comunicação web em tempo real que lida com a latência na pesquisa HTTP.

A principal causa da latência na pesquisa HTTP é quando o servidor fecha a solicitação após fornecer uma resposta. Isso faz com que o cliente crie uma nova conexão sempre que uma nova solicitação for enviada. No streaming HTTP, a solicitação inicial enviada pelo cliente permanece aberta mesmo depois que o servidor responde e envia dados ao cliente. O ciclo de vida de streaming HTTP tem os mesmos três pontos iniciais de um ciclo de vida de pesquisa HTTP.

Isso leva o servidor e o cliente a uma comunicação web quase completa em tempo real quando a solicitação é aberta indefinidamente, e o servidor envia uma resposta ao cliente sempre que há uma alteração ou atualização. No entanto, você pode pular essas complicações com Reagir WebSockets e crie uma conexão sem latência.

Eventos enviados pelo servidor

A principal desvantagem de usar o método SSE para criar comunicação em tempo real entre o cliente e o servidor é sua ineficiência e complexidade. Quem vai implementar esses métodos é o desenvolvedor do software. O método SSE não é difícil, mas aumenta o nível de esforço do desenvolvedor, pois ele deve esgotar todos os seus esforços para dar vida ao código.

Neste método, o servidor envia dados para o cliente usando um sistema SSE. Embora pareça que o SSE seja melhor que a pesquisa e o streaming HTTP, ele não é ideal para um aplicativo de bate-papo na web ou de jogos. Um dos aplicativos que fazem o uso ideal do SSE é o Facebook. Sempre que novos uploads chegam ao feed de notícias do Facebook, o servidor os envia para a linha do tempo. Os eventos enviados pelo servidor também impõem restrições ao número de conexões abertas.

Como funcionam as conexões WebSocket

As conexões WebSocket são uma maneira fácil de transferir dados baseados em mensagens com a eficiência do TCP em um conceito semelhante ao UDP. Como outros protocolos de conexão, React WebSockets usa HTTP como módulo de transporte inicial. A principal diferença é que a conexão TCP nunca é encerrada. Isso fornece ao cliente e ao servidor uma maneira mais confiável de responder a solicitações e enviar mensagens. Com conexões WebSocket, você pode integrar um melhor sistema de comunicação web em tempo real para criar aplicativos sem longas pesquisas ou streaming HTTP.

Por que usar WebSockets para comunicação em tempo real?

Os pontos a seguir provarão por que React WebSockets são melhores para comunicação em tempo real e criação de jogos ou aplicativos de bate-papo.

Com WebSockets, você obtém atualizações em tempo real e canais de comunicação essenciais para aplicativos de jogos.
A maioria dos navegadores da Web oferece suporte a WebSockets, pois estão em conformidade com HTML5 e podem funcionar com conteúdo de versões anteriores de HTML.
WebSockets são excelentes protocolos de plataforma cruzada que oferecem a mesma eficiência ao funcionar em iOS, Android, Windows, macOS e aplicativos da web.
Em termos de segurança e confiabilidade, os WebSockets podem transmitir dados através de vários firewalls e proxies.
WebSockets são fáceis de usar e fáceis de incorporar para desenvolvedores que os utilizam pela primeira vez. O motivo são os recursos de código aberto e os tutoriais que ensinam como introduzir WebSockets em aplicativos como a biblioteca JavaScript Socket.io.
Um único servidor pode abrir muitas conexões WebSocket simultaneamente. Também permite escalabilidade criando múltiplas conexões com o mesmo cliente.

Como usar React WebSockets

O desenvolvimento da Web já percorreu um longo caminho em comparação com os primeiros dias. Agora, temos múltiplas opções para estabelecer uma comunicação web bidirecional ou full-duplex entre o servidor e o cliente. Porém, entre os métodos que temos à disposição, o mais eficiente e confiável é o uso de React WebSockets. WebSockets foi introduzido com o único propósito de permitir que o usuário e o servidor criem um sistema de comunicação web em tempo real impecável usando uma conexão de soquete TCP. Ao usar WebSockets, você deve ter dois objetivos em mente:

Estabeleça um handshake entre o cliente e o servidor.
Facilite o fluxo de dados com menos sobrecarga.

Depois de concluir esses dois objetivos, você poderá criar um aplicativo Web com um sistema integrado de comunicação em tempo real que transfere dados com baixa sobrecarga. Veja como você pode usar WebSockets.

Handshake em nível de servidor

PASSO 1: Você só precisa de uma única porta para iniciar o servidor HTTP e o servidor WebSockets.

const HTTP = required(‘http’);

const webSocketServerPort = 8000;

const webSocketServerPort = require(‘websocket’).server;

// Setting up the http websocket server

const server = http.createServer ;

server.listen(webSocketServerPort);

const wsServer = new webSockerServer({

httpServer: server

})

PASSO 2: Após a conclusão da configuração do servidor HTTP e do servidor WebSocket, a próxima etapa é aceitar a solicitação de handshake. Ao aceitar o handshake do seu servidor, você precisa criar um objeto para cada cliente conectado que envia uma solicitação usando um ID de usuário.

// All the active connections in this object

const clients = {};

// Create a specific user id for each user.

const generateUniqueID =   => {

const s4 =   => Math.floor((1+ Math.random ) * 0x1000).toString(16).substring(1);

return s4  + ‘-’ + s4  + ‘-’ + s4 ;

};

wsServer.on(‘request’, function(request) {

var userID = generateUniqueID ;

console.log((new Date  + ‘ Received a new connection from origin ‘ + request.origin + ‘.’);

});

const connection = request.accept(null, request.origin);

clients(userID) = connection;

console.log(‘connected: ‘ + userID)

Quando os clientes enviam uma solicitação, eles também transmitem uma chave de segurança para WebSockets no cabeçalho da solicitação. Isso estabelece uma conexão que evita que solicitações da mesma origem se misturem. O servidor codifica a chave de segurança e é referido como um GUID predefinido. O campo do cabeçalho da solicitação informa aos usuários se o servidor aceitou a solicitação. As solicitações aceitas possuem campos de cabeçalho atualizados, enquanto as rejeitadas não.

Transmissão de mensagens em tempo real

Para mostrar o funcionamento da transmissão de mensagens em tempo real por meio de WebSockets, a criação de um aplicativo básico lhe dará uma visão melhor. Aqui está o código de um aplicativo que permite aos usuários ingressar e editar um único documento. Existem as duas atividades principais deste aplicativo.

Do utilizador

Um usuário pode entrar e sair a qualquer momento enquanto edita o documento. Sempre que um usuário entra, cada cliente conectado recebe uma notificação. O mesmo acontece quando um usuário sai.

Mudanças de conteúdo

Quando um usuário modifica o conteúdo dos documentos, cada cliente recebe uma notificação sobre as alterações.

O seguinte código do aplicativo foi retirado de GitHub por Avanthika Meenakshi.

Conclusão

React WebSockets são uma ferramenta poderosa para criar comunicação em tempo real entre servidor e cliente. Eles podem ser usados para criar uma variedade de aplicativos, incluindo jogos multijogador e atualizações ao vivo. Esses aplicativos são alimentados por WebSockets, que são um protocolo de comunicação confiável e mais rápido em comparação com outras opções, como streaming HTTP ou SSE. Eles são fáceis de implementar e podem ser usados para criar recursos incríveis, como mensagens em tempo real. Se você estiver interessado em criar aplicativos de comunicação em tempo real de alta qualidade, o React WebSockets é para você.

Se você gostou deste artigo sobre React, confira estes tópicos;