Programa de exemplo da webSocket

O protocolo WebSocket permite que a comunicação bidirecional ocorra entre um cliente e um servidor. Esse processo é semelhante à maneira pela qual ocorre o seu telefone: primeiro, você estabelece uma conexão e depois pode começar a se comunicar. O protocolo WebSocket é usado em quase todos os lugares - desde jogos de navegador multiplayer até aplicativos de bate -papo.

Este artigo mostra como criar um protocolo WebSocket e usá -lo para se comunicar com vários usuários.

Pré -requisitos

Antes de passar para o processo de criação e uso de um protocolo WebSocket, você primeiro precisa instalar algumas coisas necessárias para este processo. A primeira coisa que você precisa instalar é o nó.JS, uma plataforma do lado do servidor que converte a linguagem de programação JavaScript em código de máquina que permite que você execute JavaScript diretamente no seu computador. Para instalar o nó.JS, os usuários do Windows podem simplesmente ir para o nó oficial.Site JS e clique no botão Green LTS encontrado no centro da tela.

Para usuários de Linux e MacOS, clique no Transferências seção no sub-cabeçalho do site.

Depois de abrir o Transferências Seção, você verá arquivos de instalação para todas as três principais plataformas. Selecione um pacote suportado pelo seu sistema.

Execute o instalador que vem com os arquivos baixados e o nó.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 nó.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 você deseja criar sua arquitetura de cliente e servidor, depois 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 um nó diferente.Pacotes JS. Instale o pacote WebSocket Protocol 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 do cliente e do servidor do nosso protocolo WebSocket. Agora, podemos finalmente começar a escrever o código de nossos aplicativos de clientes e servidores.

Criando 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 do seu editor de texto ou IDE na seção anterior e insira as seguintes linhas dentro do arquivo.

const webSocket = requer ('ws');
const ws = novo websocket.Servidor (porta: 8080);
console.log ("servidor iniciado");
ws.on ('conexão', (wss) =>
console.log ("um novo cliente conectado")
WSS.Enviar ('Bem -vindo ao servidor!');
WSS.on ('mensagem', (mensagem) =>
console.log ('servidor recebido: $ message');
WSS.send ('recebeu sua mensagem:' + mensagem);
);
);

Agora, explicaremos o que cada linha está fazendo em mais detalhes.

Explicação de código

Como mencionado anteriormente, existem alguns módulos embutidos disponíveis no nó.JS que facilita o seu trabalho. Para importar esses módulos, usaremos o exigir palavra -chave.

const webSocket = requer ('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á ouvindo na porta 8080. O console.registro() Line está simplesmente lá para nos informar que o servidor começou. Você verá isso aparecer dentro do seu terminal quando você executar o seguinte comando no terminal:

$ Node Server

Na próxima linha, estamos estabelecendo uma conexão entre o servidor e o cliente.

ws.on ('conexão', (wss) =>
console.log ("um novo cliente conectado")
);

Depois que uma conexão foi estabelecida, o WSS.send () linha envia uma mensagem para o cliente. Nesse caso, a mensagem é “bem -vindo ao servidor.”

WSS.Enviar ('Bem -vindo ao servidor!');

Finalmente, o WSS.em ('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: $ message');
WSS.send ('recebeu sua mensagem:' + mensagem);
);

Criando um cliente WebSocket

Para o lado do cliente, precisamos de ambos o í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 insira as seguintes linhas dentro do arquivo:

const soket = new websocket ('ws: // localhost: 8080');
soquete.addEventListener ('aberto', () =>
console.log ('conectado ao servidor!');
);
soquete.addEventListener ('mensagem', (msg) =>
console.log ('cliente recebeu: $ msg.dados');
);
const sendmsg = () =>
soquete.send ('como vai amigo!');

Explicação de código

Como no servidor.JS, criaremos um novo webSocket que está ouvindo a porta 8080, que pode ser vista no LocalHost: 8080 seção do código.

const soket = new websocket ('ws: // localhost: 8080');

Na próxima linha, addEventListener faz com que seu cliente ouça todos os eventos que estão acontecendo atualmente. Nesse caso, estaria criando e iniciando o servidor. Depois que a conexão é estabelecida, o cliente gera uma mensagem para o terminal.

soquete.addEventListener ('aberto', () =>
console.log ('conectado ao servidor!');
);

Mais uma vez, o cliente ouve qualquer evento que está acontecendo atualmente. Quando o servidor envia uma mensagem, o cliente recebe isso e exibe a mensagem no terminal.

soquete.addEventListener ('mensagem', (msg) =>
console.log ('cliente recebeu: $ msg.dados');
);

As últimas linhas são simplesmente uma função em que o cliente está enviando uma mensagem para o servidor. Vamos conectar isso a um botão em nosso arquivo html para uma melhor compreensão de como isso está funcionando.

const sendmsg = () =>
soquete.send ('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:

Enviar mensagem para o servidor

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.O arquivo JS, também foi conectado à função OnClick do botão.

Enviar mensagem para o servidor

Juntando tudo

Agora você pode começar a testar sua arquitetura de cliente e servidor. Primeiro, abra o terminal e execute o comando a seguir para iniciar seu servidor:

$ Node Server

Depois de iniciar seu servidor, abra o diretório em que seu índice.O arquivo html está presente e clique duas vezes para abri-lo no seu navegador. Você verá a seguinte mensagem aparecer no terminal afirmando que um cliente se conectou:

Você também pode verificar as mensagens enviadas do servidor para o cliente pressionando o botão Clique com o botão direito e, em seguida, 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 para e de.

Servidor:

Cliente:

Voilà, sua conexão WebSocket foi estabelecida!

Conclusão

O protocolo WebSocket é uma excelente maneira de estabelecer comunicação entre um cliente e um servidor. Este protocolo é usado em vários campos, incluindo jogos de navegador multiplayer, sistemas de bate -papo de várias plataformas de mídia social e até processos de colaboração entre codificadores.