6.1 Conceitos básicos do WebSocket
WebSocket é um protocolo de comunicação que oferece um canal de comunicação full-duplex sobre uma única conexão TCP. Ele permite realizar transmissão de dados bidirecional entre cliente e servidor, tornando-o ideal para aplicações que exigem troca constante de dados em tempo real, como aplicativos de chat, jogos online e sistemas de notificação.
Vantagens do WebSocket
- Comunicação bidirecional: O WebSocket proporciona transmissão de dados bidirecional, permitindo que o servidor e o cliente enviem mensagens um ao outro a qualquer momento.
- Menor latência: em comparação com as requisições HTTP tradicionais, o WebSocket diminui a latência devido à conexão contínua.
- Menor carga no servidor: O WebSocket reduz o número de requisições HTTP, diminuindo a carga no servidor.
Componentes principais do WebSocket
- Servidor WebSocket: a parte do servidor que aceita e processa conexões WebSocket.
- Cliente WebSocket: a parte do cliente que estabelece a conexão com o servidor WebSocket e troca dados.
6.2 Trabalhando com WebSocket em JavaScript
Trabalhar com WebSocket em JavaScript é feito através do objeto WebSocket, que fornece métodos para estabelecer conexão, enviar e receber mensagens, bem como manipular eventos.
Criando uma conexão WebSocket:
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
Eventos do WebSocket:
open: disparado quando a conexão é estabelecida.message: disparado quando uma mensagem é recebida do servidor.error: disparado quando ocorre um erro.close: disparado quando a conexão é fechada.
Exemplo de uso do WebSocket:
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
socket.addEventListener('open', (event) => {
console.log('Conectado ao servidor WebSocket');
socket.send('Olá Servidor!');
});
socket.addEventListener('message', (event) => {
console.log('Mensagem do servidor:', event.data);
});
socket.addEventListener('error', (event) => {
console.error('Erro no WebSocket:', event);
});
socket.addEventListener('close', (event) => {
console.log('Desconectado do servidor WebSocket');
});
6.3 Exemplo de servidor WebSocket em Node.js
Para criar um servidor WebSocket você pode usar a biblioteca ws no Node.js.
Instalando a biblioteca:
Terminal
npm install ws
Exemplo de servidor WebSocket:
JavaScript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('Novo cliente conectado');
ws.on('message', (message) => {
console.log('Recebido:', message);
ws.send(`Servidor diz: ${message}`);
});
ws.on('close', () => {
console.log('Cliente desconectado');
});
});
console.log('Servidor WebSocket está rodando em ws://localhost:8080');
6.4 Principais eventos e métodos do WebSocket
Eventos do cliente:
onopen: disparado quando a conexão WebSocket é estabelecidaonmessage: disparado quando uma mensagem é recebida do servidoronclose: disparado quando a conexão WebSocket é fechadaonerror: disparado em caso de erro no WebSocket
Métodos do cliente
send(data): envia dados para o servidorclose(code, reason): fecha a conexão WebSocket com o código e razão especificados
Eventos do servidor
connection: disparado quando um cliente se conecta ao servidormessage: disparado quando o servidor recebe uma mensagem do clienteclose: disparado quando a conexão WebSocket é fechadaerror: disparado em caso de erro no WebSocket
Métodos do servidor
send(data): envia dados para o clienteclose(code, reason): fecha a conexão WebSocket com o código e razão especificados
6.5 Exemplos de uso do WebSocket
Exemplo: Chat em tempo real
Parte do cliente:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Chat WebSocket</title>
</head>
<body>
<input type="text" id="message" placeholder="Digite sua mensagem" />
<button onclick="sendMessage()">Enviar</button>
<div id="chat"></div>
<script>
const socket = new WebSocket('ws://localhost:8080');
const chat = document.getElementById('chat');
socket.onopen = function() {
console.log('WebSocket está aberto agora.');
};
socket.onmessage = function(event) {
const message = document.createElement('p');
message.textContent = event.data;
chat.appendChild(message);
};
socket.onclose = function() {
console.log('WebSocket está fechado agora.');
};
socket.onerror = function(event) {
console.error('Erro observado no WebSocket:', event);
};
function sendMessage() {
const messageInput = document.getElementById('message');
const message = messageInput.value;
socket.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
Parte do servidor:
JavaScript
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (ws) => {
console.log('Novo cliente conectado!');
ws.on('message', (message) => {
console.log('Recebido:', message);
// Envia mensagem para todos os clientes conectados
server.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('Cliente desconectado');
});
ws.on('error', (error) => {
console.error('Erro no WebSocket:', error);
});
});
console.log('Servidor WebSocket está rodando em ws://localhost:8080');
GO TO FULL VERSION