Como criar conexões WebSocket em Node.js?

Como Criar Conexoes Websocket Em Node Js



WebSocket é basicamente um protocolo utilizado pelos desenvolvedores em seus aplicativos para permitir a comunicação full duplex entre o cliente e o servidor. Este tipo de comunicação permite que os usuários se comuniquem com o servidor em tempo real, sem qualquer demora. Hoje em dia, este protocolo está sendo utilizado em quase todas as aplicações web para proporcionar uma melhor experiência ao usuário.

Este artigo ilustra o procedimento para criar conexões webSocket em Node.js.

Como criar conexões WebSocket em Node.js?

A conexão WebSocket consiste em duas partes: desenvolvimento no lado do cliente e no lado do servidor. Também é necessário criar o site fictício que atua como meio entre ambos os lados. Ao utilizá-lo, as mensagens são transferidas de ambos os lados. Visite as etapas abaixo para a criação de WebSocket em NodeJs.







Etapa 1: Configurando o ambiente NodeJs

Com a ajuda do “ cd ”Comando, percorra a pasta do projeto e dentro dela execute o comando“ npm inicialização -y ” para instalar os módulos NodeJs padrão:



inicialização npm - e

Após executar o comando acima, o novo arquivo denominado “ pacote.json ”que armazena as informações básicas relacionadas ao projeto é criado:







Etapa 2: Instalando o Módulo WebSocket

Para usar o protocolo WebSocket o módulo denominado “ es ” precisa ser instalado no projeto NodeJs. O comando para instalação está inserido abaixo:



npm instalar ws

A saída abaixo mostra “ es ” foi instalado no diretório NodeJs desejado:

Etapa 3: configurando o servidor WebSocket

Para configurar o lado do servidor do protocolo webSocket, crie um novo “ .js ” digite o arquivo dentro da pasta do projeto com o nome “ lado do servidor ”E insira o código indicado abaixo:

const wsObj = exigir ( 'ws' ) ;

const es = novo wsObj. Servidor ( { porta : 3.000 } ) ;

console. registro ( 'Servidor Linuxhint foi iniciado' ) ;

A explicação para o código acima é a seguinte:

  • Primeiro, com a ajuda do “ exigir() 'Método, o' es ”O módulo que já está instalado na seção acima é importado dentro do atual“ serverSide.js ' arquivo.
  • Em seguida, invoque o “ Servidor() ”Método usando o objeto do“ es ”módulo chamado“ wsObj ”E passe o número da porta de“ 3.000 ”Para iniciar o servidor na porta especificada de Localhost.
  • Além disso, exiba alguma mensagem aleatória na janela do console para confirmar que o servidor foi iniciado no final do servidor.

Etapa 4: configurando o cliente WebSocket

Crie outro arquivo com o nome “ lado do cliente ”Para configurar o lado do cliente que se conecta ao servidor. Insira o código abaixo para configurar o lado do cliente básico que exibe uma mensagem aleatória quando se conecta ao servidor:

const obj = novo WebSocket ( 'ws://localhost:3000' ) ;

obg. addEventListener ( 'abrir' , ( ) => {

console. registro ( 'Você está conectado ao servidor Linuxhint!' ) ;

} ) ;

A descrição do bloco de código acima:

  • Primeiro, crie um novo objeto para o “ WebSocket() ”Protocolo que é ouvido no Localhost com o número da porta“ 3.000 ”.
  • Em seguida, armazene o novo objeto na variável chamada “ obj ”.
  • Depois disso, anexe o ouvinte de evento de “ abrir ' com isso ' obj ”. Este ouvinte de evento executará uma função anônima quando o servidor for carregado no Localhost com o número da porta fornecido.
  • A função exibe uma mensagem aleatória relacionada à conexão no console.

Etapa 5: Criação da página da Web

Dentro do diretório do projeto, crie um “ .html ”tipo de arquivo com o nome de“ índice ”que contém a estrutura básica do HTML junto com a tag de script única para importar o“ clienteSide.js ' arquivo:

DOCTYPEHTML >

< apenas HTML = 'em' >

< cabeça >

< meta conjunto de caracteres = 'UTF-8' >

< título > Cliente título >

cabeça >

< corpo >

< h1 > Site Linuxhint h1 >

corpo >

< fonte de script = 'clientSide.js' roteiro >

HTML >

Etapa 6: Execução

Abra o ' index.html ”Na página da web diretamente do diretório. Em seguida, vá para o terminal ou prompt de comando e execute o comando abaixo:

nó serverSide

A mensagem de saída mostra que o servidor foi iniciado.

Agora, sem fechar o servidor, acesse index.html e abra-o no navegador da web. Lá, a mensagem de sucesso da conexão aparecerá na janela do console:

A saída mostra que a conexão foi estabelecida entre o lado do cliente e do servidor. Este blog explicou o processo de criação da conexão webSocket em NodeJs.

Conclusão

Para criar uma conexão webSocket em NodeJs, crie um novo projeto NodeJs e instale o “ es ”módulo executando o“ npm instalar ws ” comando. Agora, crie um arquivo para o lado do servidor e dentro dele importe o “ es ”módulo. Use este módulo para criar um servidor WebSocket na porta “ 3.000 ”. Crie outro arquivo para o lado do cliente no qual você precisa definir um novo objeto para “ WebSocket ”nomeado“ obj ”E faça ouvir na porta“ 3.000 ”. Este blog ilustrou o procedimento para estabelecer uma conexão WebSocket em NodeJs.