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');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');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) =>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) =>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');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', () =>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) =>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 = () =>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.O 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 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.