Phenquestions
O protocolo WebSocket permite a comunicação bidirecional entre um cliente e um servidor. Este processo é semelhante à forma como as chamadas ocorrem no seu telefone: primeiro, você estabelece uma conexão e, em seguida, pode começar a se comunicar um com o outro. O protocolo WebSocket é usado em quase todos os lugares - de jogos de navegador para vários jogadores a aplicativos de chat.
Este artigo mostra como criar um protocolo WebSocket e usá-lo para se comunicar com vários usuários.
Pré-requisitos
Antes de prosseguir para o processo de criação e uso de um protocolo WebSocket, você primeiro precisa instalar algumas coisas que são necessárias para este processo. A primeira coisa que você precisa instalar é o Node.js, uma plataforma do lado do servidor que converte a linguagem de programação JavaScript em código de máquina que permite executar JavaScript diretamente no seu computador. Para instalar o Node.js, os usuários do Windows podem simplesmente ir para o nó oficial.js website e clique no botão verde LTS localizado no centro da tela.
Para usuários de Linux e macOS, clique no Transferências seção no subtítulo do site.
Depois de abrir o Transferências seção, você verá os arquivos de instalação para todas as três plataformas principais. Selecione um pacote que seja compatível com o seu sistema.
Execute o instalador que vem com os arquivos baixados e o Node.js será instalado no seu computador. Para verificar se o programa foi instalado, abra o terminal e emita o seguinte comando:
$ node -v
Depois de instalar o Node.js, agora você tem acesso a vários módulos JavaScript, o que tornará seu trabalho mais eficiente a longo prazo. Abra o diretório no qual deseja criar sua arquitetura de cliente e servidor, abra o terminal dentro desse diretório e execute o seguinte comando:
$ npm init -y
Este comando é usado para criar o pacote.arquivo json que permite configurar e instalar diferentes Node.pacotes js. Instale o pacote de protocolo WebSocket emitindo o seguinte comando no terminal:
$ npm install ws
Crie três arquivos, chamados índice.html, cliente.js e servidor.js. Conforme indicado pelos nomes, esses arquivos JavaScript são a arquitetura cliente e servidor de nosso protocolo WebSocket. Agora, podemos finalmente começar a escrever o código de nossos aplicativos cliente e servidor.
Criação de um servidor WebSocket
Para criar um servidor WebSocket, começaremos escrevendo o código para o servidor. Abra o servidor.js arquivo que você criou dentro de seu editor de texto ou IDE na seção anterior e insira as seguintes linhas dentro do arquivo.
const WebSocket = require ('ws');const ws = novo WebSocket.Servidor (porta: 8080);
console.log ("Servidor iniciado");
ws.em ('conexão', (wss) =>
console.log ("Um novo cliente conectado")
wss.send ('Bem-vindo ao Servidor!');
wss.on ('mensagem', (mensagem) =>
console.log ('Servidor recebido: $ mensagem');
wss.enviar ('Recebi sua mensagem:' + mensagem);
);
);
Agora, vamos explicar o que cada linha está fazendo com mais detalhes.
Explicação do código
Conforme mencionado anteriormente, existem alguns módulos integrados disponíveis no Node.js que tornam seu trabalho muito mais fácil. Para importar esses módulos, usaremos o exigir palavra-chave.
const WebSocket = require ('ws');const ws = novo WebSocket.Servidor (porta: 8080);
console.log ("Servidor iniciado");
A primeira linha é usada para importar o Nó.Módulo js WebSocket. Usando este módulo, na próxima linha, criamos nosso servidor WebSocket, que está escutando na porta 8080. O console.registro() linha está lá simplesmente para nos informar que o servidor foi iniciado. Você verá isso aparecer dentro de seu terminal ao executar o seguinte comando no terminal:
servidor $ node
Na próxima linha, estamos estabelecendo uma conexão entre o servidor e o cliente.
ws.em ('conexão', (wss) =>console.log ("Um novo cliente conectado")
);
Depois que uma conexão for estabelecida, o wss.A linha send () envia uma mensagem ao cliente. Neste caso, a mensagem é “Bem-vindo ao Servidor.”
wss.send ('Bem-vindo ao Servidor!');Finalmente, o wss.on ('mensagem') é para o servidor receber a mensagem do cliente. Para confirmação, o servidor envia esta mensagem de volta ao cliente na última linha.
wss.on ('mensagem', (mensagem) =>console.log ('Servidor recebido: $ mensagem');
wss.enviar ('Recebi sua mensagem:' + mensagem);
);
Criação de um cliente WebSocket
Para o lado do cliente, precisamos tanto do índice.arquivo html e o cliente.arquivo js. Claro, você pode simplesmente adicionar o conteúdo do cliente.arquivo js em seu índice.arquivo html, mas prefiro mantê-los separados. Vamos primeiro olhar para o cliente.código js. Abra o arquivo e digite as seguintes linhas dentro do arquivo:
const socket = new WebSocket ('ws: // localhost: 8080');tomada.addEventListener ('open', () =>
console.log ('Conectado ao Servidor!');
);
tomada.addEventListener ('mensagem', (msg) =>
console.log ('Cliente Recebido: $ msg.dados');
);
const sendMsg = () =>
tomada.enviar ('Como está indo, amigo!');
Explicação do código
Como com o servidor.js, vamos criar um novo WebSocket que está escutando a porta 8080, que pode ser visto no localhost: 8080 seção do código.
const socket = new WebSocket ('ws: // localhost: 8080');Na próxima linha, addEventListener faz seu cliente ouvir quaisquer eventos que estão acontecendo atualmente. Nesse caso, seria criar e iniciar o servidor. Uma vez que a conexão é estabelecida, o cliente envia uma mensagem para o terminal.
tomada.addEventListener ('open', () =>console.log ('Conectado ao Servidor!');
);
Mais uma vez, o cliente escuta todos os eventos que estão acontecendo. Quando o servidor envia uma mensagem, o cliente recebe e exibe a mensagem no terminal.
tomada.addEventListener ('mensagem', (msg) =>console.log ('Cliente Recebido: $ msg.dados');
);
As últimas linhas são simplesmente uma função em que o cliente está enviando uma mensagem para o servidor. Iremos conectar isso a um botão em nosso arquivo html para uma melhor compreensão de como isso está funcionando.
const sendMsg = () =>tomada.enviar ('Como vai, amigo!');
Preparando um arquivo HTML
Finalmente, abra o índice.arquivo html e adicione uma referência ao seu cliente.arquivo js dentro dele. No meu caso, simplesmente adicionarei as seguintes linhas de código:
Como você pode ver nas linhas abaixo, src (dentro da tag de script) refere-se ao arquivo javascript do cliente. A função sendMsg, que foi criada no cliente.arquivo js, também foi conectado à função onClick do botão.
Juntando tudo
Agora você pode começar a testar sua arquitetura de cliente e servidor. Primeiro, abra o terminal e execute o seguinte comando para iniciar o servidor:
servidor $ node
Depois de iniciar o seu servidor, abra o diretório no qual o seu índice.arquivo html está presente e clique duas vezes nele para abri-lo em seu navegador. Você verá a seguinte mensagem aparecer no terminal informando que um cliente se conectou:
Você também pode verificar as mensagens enviadas do servidor para o cliente pressionando o botão direito do mouse e abrindo o Inspecionar janela. Nesta janela, clique no Console seção, e você poderá ver as mensagens enviadas do servidor.
Depois de clicar no botão, o servidor e o cliente poderão enviar e receber mensagens um do outro.
Servidor:
Cliente:
Voilà, sua conexão WebSocket foi estabelecida!
Conclusão
O protocolo WebSocket é uma excelente forma de estabelecer comunicação entre um cliente e um servidor. Este protocolo é usado em vários campos, incluindo jogos de navegador multiplayer, sistemas de chat de várias plataformas de mídia social e até mesmo processos de colaboração entre codificadores.
