WebSocket API - JavaScript

WebSocket API permite a organização de uma conexão entre cliente e servidor, possibilitando que ambos possam enviar dados um ao outro a qualquer momento.

Para criar uma conexão através de WebSocket API, utilizamos o construtor WebSocket(), no qual passamos o endereço da conexão.

Gerenciando o Ciclo de Vida da Conexão

Para gerenciar a conexão, a WebSocket define três eventos principais:

• open: acionado ao abrir a conexão com sucesso. O manipulador pode ser configurado usando a propriedade onopen.

• error: acionado ao ocorrer um erro na conexão. O manipulador é configurado através da propriedade onerror. A função do manipulador recebe informações sobre o erro.

• close: acionado ao fechar a conexão. O manipulador é configurado usando a propriedade onclose.

Exemplo de tratamento de eventos:

const connection = new WebSocket("ws://example.com/test");

// se a conexão foi estabelecida com sucesso
connection.onopen = (event) => {
    console.log("Connection opened");
};

// se ocorreu um erro
connection.onerror = (error) => {
    console.log(`WebSocket Error: ${error}`);
};

// se a conexão foi fechada
connection.onclose = (event) => {
    console.log("Connection closed");
};

Enviando Dados para o Servidor

Para enviar dados ao servidor, utilizamos o método send() do objeto WebSocket. O método pode receber como parâmetro strings, dados binários (BLOB), objetos ArrayBuffer ou arrays tipados. A operação de envio de dados é possível apenas após a conexão ser estabelecida com sucesso. Por exemplo, enviando uma string:

// se a conexão foi estabelecida, enviamos a string
connection.onopen = (event) => {
    connection.send("Hello Programício");
};

Se quisermos enviar um objeto em formato JSON, primeiro precisamos convertê-lo para este formato:

const data = { message: "Hello" };
// enviando o objeto em formato JSON
connection.send(JSON.stringify(data));

Recebendo Dados

Quando os dados chegam do servidor, o objeto WebSocket aciona o evento message, cujo manipulador pode ser configurado usando a propriedade onmessage.

O manipulador do evento message recebe um objeto do tipo MessageEvent. Esse objeto oferece várias propriedades que permitem extrair os dados da resposta do servidor:

• data: retorna os dados recebidos.

• origin: armazena o endereço do remetente.

• lastEventId: armazena o identificador único do evento como uma string.

• source: retorna um objeto MessageEventSource, que pode ser um objeto WindowProxy, MessagePort ou ServiceWorker, representando o remetente dos dados recebidos.

• ports: retorna um array de objetos MessagePort, que contêm os ports usados para o envio.

A principal propriedade aqui é data, que representa os dados recebidos. Eles podem ser uma string ou dados binários. Se forem dados binários, a propriedade data pode representar o tipo ArrayBuffer ou Blob. Exemplo de recebimento de dados:

connection.onmessage = (event) => {
  console.log(event.data);
};

Se o cliente recebe dados binários, com a propriedade binaryType do objeto WebSocket podemos especificar o tipo de dados desejado, usando os valores "blob" (para dados no formato Blob) e "arraybuffer" (para dados no formato ArrayBuffer). Exemplo:

const connection = new WebSocket("ws://example.com/test");
connection.binaryType = "arraybuffer";

Fechando a Conexão

Para fechar a conexão, utilizamos o método close() do objeto WebSocket:

Interação com o Servidor

Vamos escrever um pequeno exemplo de interação entre cliente e servidor usando WebSocket. Primeiro, criaremos o código do servidor. Usaremos Node.js como a tecnologia do servidor por ser uma opção simples, além de utilizar JavaScript, a mesma linguagem do cliente. Portanto, primeiro é necessário instalar o Node.js. No entanto, é possível escolher qualquer outra tecnologia de servidor.

Poderíamos escrever todo o código do WebSocket do zero, mas isso não é uma tarefa simples. Para esta demonstração, usaremos uma biblioteca específica chamada ws. Então, criaremos um arquivo server.js e definiremos o seguinte código:

const WebSocket = require("ws");
const server = new WebSocket.Server({ port: 9000 });

server.on("connection", onConnect);

// manipulador de conexão do cliente
// o parâmetro é o cliente conectado
function onConnect(client) {
    console.log("Connection opened");

    // processa mensagens recebidas do cliente
    client.on("message", function (message) {
        console.log("Client message:", message.toString()); // para diagnóstico, exibe a mensagem do cliente no console

        client.send("Hello Client"); // envia mensagem ao cliente
    });

    // fechamento da conexão
    client.on("close", function () {
        console.log("Connection closed");
    });
}

console.log("Servidor iniciado na porta 9000");

Para criar o servidor WebSocket, chamamos a função Server da biblioteca ws:

Em seguida, adicionamos ao servidor um manipulador para o evento "connection", que é acionado quando um novo cliente se conecta, utilizando o método on():

No manipulador de eventos, passamos um objeto que permite a interação com o cliente:

Dentro deste manipulador, configuramos para o cliente conectado o evento "message", que é acionado quando o cliente envia dados ao servidor:

client.on("message", function (message) {
  console.log("Client message:", message.toString()); // para diagnóstico, exibe a mensagem do cliente no console
  client.send("Hello Client"); // envia mensagem ao cliente
});

No manipulador de eventos "message", são passados os dados enviados pelo cliente (aqui representados pelo parâmetro message). Dentro do manipulador, exibimos esses dados no console e, usando o método send(), enviamos uma resposta ao cliente. Assim, o servidor recebe dados do cliente e envia uma resposta de volta.

Também configuramos um manipulador para o evento "close", que lida com o fechamento da conexão:

client.on("close", function () {
  console.log("Connection closed");
});

O problema com a biblioteca ws é que ela não é uma biblioteca embutida no Node.js, mas uma biblioteca de terceiros. Portanto, precisamos instalá-la. Para isso, vamos até a pasta onde está o arquivo server.js no console e executamos o seguinte comando:

Este comando instala a biblioteca ws.

Agora vamos definir o código do cliente. Este será o código da página index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<script>
const connection = new WebSocket("ws://localhost:9000");

// se a conexão foi estabelecida com sucesso
connection.onopen = (event) => {
    console.log("Connection opened");
    connection.send("Hello Server");
};

// se ocorreu um erro
connection.onerror = (error) => {
    console.log(`WebSocket Error: ${error}`);
};

// se a conexão foi fechada
connection.onclose = (event) => {
    console.log("Connection closed");
};

// recebendo resposta do servidor
connection.onmessage = (event) => {
    console.log("Server response:", event.data);
};
</script>
</body>
</html>

O código para trabalhar com WebSocket foi discutido anteriormente. Vamos destacar os principais pontos. Ao abrir a conexão, enviamos ao servidor a string "Hello Server":

Ao receber a resposta do servidor, exibimos os dados recebidos no console:

connection.onmessage = (event) => {
  console.log(event.data);
};

Vamos até a pasta onde está localizado o arquivo do servidor server.js no console e executamos o comando:

node server.js

Este comando inicia o servidor. Depois, abrimos nossa página web index.html no navegador e verificamos a saída no console. O resultado será o seguinte no console do servidor:

C:\app> node server.js
Servidor iniciado na porta 9000
Connection opened
Client message: Hello Server

E a saída no console do cliente, da página index.html, será a seguinte:

Connection opened
Server response: Hello Client

Este é um exemplo simples de interação entre cliente e servidor usando WebSocket. No entanto, a tecnologia WebSocket é muito mais poderosa e pode ser usada para criar aplicações web em tempo real, como chats, jogos online e muito mais.