6.1 Conceptos básicos de WebSocket
WebSocket es un protocolo de comunicación que proporciona un canal de comunicación de duplex completo a través de una sola conexión TCP. Permite realizar una transferencia de datos bidireccional entre el cliente y el servidor, lo que lo hace ideal para aplicaciones que requieren un intercambio constante de datos en tiempo real, como los chats, juegos en línea y sistemas de notificaciones.
Ventajas de WebSocket
- Comunicación bidireccional: WebSocket garantiza una transferencia de datos bidireccional, permitiendo al servidor y al cliente enviar mensajes entre sí en cualquier momento.
- Menor latencia: Comparado con las solicitudes HTTP tradicionales, WebSocket reduce la latencia gracias a la conexión constante.
- Menor carga en el servidor: WebSocket reduce el número de solicitudes HTTP, lo que disminuye la carga en el servidor.
Componentes principales de WebSocket
- Servidor WebSocket: la parte del servidor que acepta y maneja las conexiones WebSocket.
- Cliente WebSocket: la parte del cliente que establece la conexión con el servidor WebSocket y realiza el intercambio de datos.
6.2 Uso de WebSocket en JavaScript
El trabajo con WebSocket en JavaScript se realiza usando el objeto WebSocket, que proporciona métodos para establecer la conexión, enviar y recibir mensajes, así como manejar eventos.
Creación de una conexión WebSocket:
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
Eventos de WebSocket:
open: se activa cuando se establece la conexión.message: se activa cuando se recibe un mensaje del servidor.error: se activa cuando ocurre un error.close: se activa cuando se cierra la conexión.
Ejemplo de uso de WebSocket:
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
socket.addEventListener('open', (event) => {
console.log('Connected to the WebSocket server');
socket.send('Hello Server!');
});
socket.addEventListener('message', (event) => {
console.log('Message from server:', event.data);
});
socket.addEventListener('error', (event) => {
console.error('WebSocket error:', event);
});
socket.addEventListener('close', (event) => {
console.log('Disconnected from WebSocket server');
});
6.3 Ejemplo de servidor WebSocket en Node.js
Para crear un servidor WebSocket se puede usar la biblioteca ws en Node.js.
Instalación de la biblioteca:
Terminal
npm install ws
Ejemplo de servidor WebSocket:
JavaScript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('New client connected');
ws.on('message', (message) => {
console.log('Received:', message);
ws.send(`Server says: ${message}`);
});
ws.on('close', () => {
console.log('Client disconnected');
});
});
console.log('WebSocket server is running on ws://localhost:8080');
6.4 Principales eventos y métodos de WebSocket
Eventos del cliente:
onopen: se activa cuando se establece la conexión WebSocketonmessage: se activa cuando se recibe un mensaje del servidoronclose: se activa cuando se cierra la conexión WebSocketonerror: se activa cuando ocurre un error de WebSocket
Métodos del cliente
send(data): envía datos al servidorclose(code, reason): cierra la conexión WebSocket con el código y razón especificados
Eventos del servidor
connection: se activa cuando un cliente se conecta al servidormessage: se activa cuando el servidor recibe un mensaje del clienteclose: se activa cuando se cierra la conexión WebSocketerror: se activa cuando ocurre un error de WebSocket
Métodos del servidor
send(data): envía datos al clienteclose(code, reason): cierra la conexión WebSocket con el código y razón especificados
6.5 Ejemplos de uso de WebSocket
Ejemplo: Chat en tiempo real
Parte del cliente:
HTML
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat</title>
</head>
<body>
<input type="text" id="message" placeholder="Enter your message" />
<button onclick="sendMessage()">Send</button>
<div id="chat"></div>
<script>
const socket = new WebSocket('ws://localhost:8080');
const chat = document.getElementById('chat');
socket.onopen = function() {
console.log('WebSocket is open now.');
};
socket.onmessage = function(event) {
const message = document.createElement('p');
message.textContent = event.data;
chat.appendChild(message);
};
socket.onclose = function() {
console.log('WebSocket is closed now.');
};
socket.onerror = function(event) {
console.error('WebSocket error observed:', event);
};
function sendMessage() {
const messageInput = document.getElementById('message');
const message = messageInput.value;
socket.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
Parte del servidor:
JavaScript
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (ws) => {
console.log('New client connected!');
ws.on('message', (message) => {
console.log('Received:', message);
// Envío del mensaje a todos los clientes conectados
server.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('Client disconnected');
});
ws.on('error', (error) => {
console.error('WebSocket error:', error);
});
});
console.log('WebSocket server is running on ws://localhost:8080');
GO TO FULL VERSION