Introdução
Esteja você criando um aplicativo de bate-papo, um aplicativo de compartilhamento de vídeo ou até mesmo um aplicativo de videoconferência, Socket.io fornece uma conexão entre seus clientes, permitindo a transferência de dados na velocidade da luz entre eles.
Consiste no lado do cliente e no lado do servidor, com o lado do servidor lidando com diferentes conexões e dispersão de informações. Você deve saber que Socket.io não é um WebSocket, mas sim uma implementação de protocolo de transferência em tempo real personalizado construída em outros protocolos em tempo real.
Este artigo cobre os fundamentos do Socket.io, desde a configuração de uma conexão até a conexão do lado do cliente ao lado do servidor.
O que é WebSocket?
WebSocket é um protocolo de comunicação da web que permite a transferência de dados do lado do cliente para o servidor (e do lado do servidor para o cliente) assim que um canal entre eles é criado. Esta conexão persiste até que o canal seja encerrado. Ao contrário do protocolo HTTPS, o WebSocket permite a transferência de dados em ambas as direções.
O WebSockets pode ser usado para desenvolver qualquer coisa, desde um aplicativo de negociação em tempo real até um aplicativo de bate-papo, ou praticamente qualquer coisa que requeira transferência de dados eficiente em tempo real.
O que são soquetes e Socket.io?
Sockets são conexões feitas entre determinados pontos de uma rede. Uma conexão em um soquete persiste uma vez criada até que seja encerrada. As conexões de soquete podem ser um servidor para o cliente, cliente para servidor ou entre dois clientes ou servidores.
Socket.io é uma biblioteca JavaScript que funciona de forma semelhante ao WebSockets. A transferência de dados é feita por meio de uma conexão aberta, permitindo a troca de dados em tempo real. Cada conexão, também conhecida como soquete, consiste em duas partes: o lado do servidor e o lado do cliente. Socket.io usa Engine.io para obter uma conexão do lado do servidor com Engine.io-client para o lado do cliente.
A transferência de dados em Socket.io é feita principalmente na forma de JSON (JavaScript Object Notation), então usaremos o formato JSON neste artigo.
Instalação e configuração
Como o Socket.io precisa de um servidor e um cliente para estabelecer uma conexão, faremos instalações para ambos (servidor e cliente), começando pelo servidor e depois passando para o cliente.
Lado do servidor
Certifique-se de ter Node.js e node gerenciador de pacotes (npm) já instalado em seu sistema. Caso contrário, vá para o site Node.js para saber mais sobre a instalação.
Na sua linha de comando, execute o seguinte comando:
npm install express Socket.io
Isso instalará as dependências necessárias.
O próximo passo é configurar nosso servidor. Prossiga para exigir o Socket.io, Express e o módulo HTTP conforme mostrado abaixo em seu arquivo index.js. Estaremos usando o módulo HTTP para criar nosso servidor em vez de Express para passar nosso servidor para Socket.io facilmente:
const express=require ("express");
const http=requer ("http");
const socketio=require ("socket.io"); const app=express (); const PORT=process.env.PORT || 5000; servidor const=http.createServer (app); io=socketio (servidor); server.listen (PORT, ()=> { console.log (`servidor rodando na porta $ {PORT}`);
});
Conforme mostrado acima, criamos nosso servidor com sucesso. Podemos iniciar nosso servidor executando o seguinte:
node index.js
Nosso servidor deve estar instalado e funcionando na porta 5000. Observe que nosso servidor foi passado para Socket.io.
Lado do cliente
Para a configuração do lado do cliente, vamos importar o script Socket.io para o nosso arquivo index.html:
Prossiga para conectar o lado do cliente ao lado do servidor, conforme mostrado abaixo:
=let ENDPOINT="http://localhost: 5000" deixe socket=io.connect (ENDPOINT); =
Como alternativa, você pode instalar o socket.io-client para o lado do cliente se estiver usando React:
npm install socket.io-client
Você pode então prosseguir para importar e criar uma conexão da seguinte maneira:
import React from"react"; importar io de"socket.io-client"; deixe ENDPOINT="http://localhost: 5000" deixe soquete=io (ENDPOINT);
Conexão e desconexão de soquete
Conseguimos configurar o lado do servidor e o lado do cliente. Agora, uma vez que o lado do cliente está conectado, somos notificados dessa conexão no lado do servidor. Socket.io nos ajuda a lidar com essa conexão da seguinte maneira:
io.on ("conexão", (soquete)=> { //seu snippet de código
})
Este evento, equipado com uma função de retorno de chamada, é acionado quando ocorre uma conexão.
Para aplicativos mais complexos, você pode criar salas específicas para diferentes grupos de usuários. Esse recurso pode ser facilmente obtido usando Socket.io. Você pode ingressar em salas específicas usando o método de junção, uma vez que uma conexão seja obtida:
io.on ("conexão", (soquete)=> { let roomID=2436 socket.join (roomID) })
O evento de desconexão é disparado assim que ocorre uma desconexão:
io.on ("conexão", (soquete)=> { socket.on ("desconectar", ()=> { });
})
Emissão e transmissão de eventos
Socket.io permite aos usuários emitir eventos e ouvi-los na outra extremidade. A emissão de eventos pode ocorrer tanto no lado do servidor quanto no lado do cliente. Um evento “join”, por exemplo, pode ser emitido no lado do cliente durante uma conexão:
socket.emit ("join", {nome: “peter paul”}, (err)=> { if (err) { alerta (errar); } });
Observe que o evento é emitido junto com uma carga útil na forma de um JSON, que contém o nome do usuário que está ingressando na conexão no momento.
Prossiga para lidar com este evento no lado do servidor:
socket.on ("join", ({name}, callback)=> { if (erro) { retorno de chamada (erro); } senão { let roomID=2436 socket.join (roomID) console.log (nome) });
Você também pode optar por transmitir informações a todos em uma sala específica durante o tratamento do evento:
socket.on ("join", ({name}, callback)=> { if (erro) { retorno de chamada (erro); } senão { let roomID=2436 socket.join (roomID) socket.broadcast.to (roomID).emit ("adminMessage", { nome:"admin", conteúdo: `$ {name} juntou-se`, }); } });
Todo o nosso código do lado do servidor deve ser semelhante a este neste ponto:
const express=require ("express");
const http=requer ("http");
const socketio=require ("socket.io"); const app=express (); const PORT=process.env.PORT || 5000; servidor const=http.createServer (app); io=socketio (servidor); io.on ("conexão", (soquete)=> { socket.on ("join", ({name}, callback)=> { if (erro) { retorno de chamada (erro); } senão { let roomID=2436 socket.join (roomID) console.log (nome) socket.broadcast.to (roomID).emit ("adminMessage", { nome:"admin", conteúdo: `$ {name} juntou-se`, }); }); socket.on ("desconectar", ()=> { });
}) server.listen (PORT, ()=> { console.log (`servidor rodando na porta $ {PORT}`);
});
O lado do cliente deve ser estruturado da seguinte forma:
let ENDPOINT="http://localhost: 5000"
deixe socket=io.connect (ENDPOINT); socket.emit ("join", {name: “peter paul”}, (err)=> { if (err) { alerta (errar); } });
Depuração e registro
Socket.io vem com um utilitário muito forte para depuração chamado Debug . Antes da introdução do Debug, Socket.io recorria a registrar tudo no console, o que a maioria dos usuários considerava irritante. Mais tarde, eles deram um novo passo ao não registrar nada por padrão.
Você pode escolher visualizar essas mensagens fornecendo a variável de ambiente Debug ou a propriedade localStorage.debug ao usar o navegador.
Para o console, é feito conforme mostrado abaixo:
DEBUG=* node yourfile.js
O * ajuda você a ver quais informações estão disponíveis.
Para o navegador, é assim:
localStorage.debug='*';
Conclusão
Socket.io, com toda a sua simplicidade, tornou-se a melhor escolha para desenvolvedores na construção de aplicativos que requerem transferência de dados em tempo real. Com quase todos os navegadores modernos suportando WebSocket, Socket.io está prestes a ficar ainda maior.
Agora que você já conhece os fundamentos do Socket.io, sugiro trabalhar em um projeto diferente com o mesmo conceito acima para aprimorar suas habilidades e obter uma compreensão mais clara do tópico.
A postagem Transferência de dados em tempo real com Socket.io apareceu primeiro no LogRocket Blog .
