API WebSocket de JavaScript
Introducción a la tecnología WebSocket
WebSocket es una tecnología que revoluciona la forma en que las aplicaciones web se comunican, superando el HTTP tradicional para proporcionar canales de comunicación dúplex completo (full-duplex) a través de una única conexión. Esto permite que las aplicaciones web envíen mensajes a un servidor y reciban respuestas basadas en eventos sin necesidad de realizar sondeos (polling) al servidor para obtener una respuesta. Exploremos cómo aprovechar el poder de los WebSockets en tus proyectos web mediante un ejemplo práctico: la creación de una aplicación de chat de eco (Echo Chat).
Configuración del chat de eco con WebSocket
Estructura HTML básica
Primero, establecemos la interfaz de usuario con HTML que incluye un área para mostrar mensajes, un campo de entrada y botones de control.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WebSocket Echo Chat</title>
</head>
<body>
<textarea id="chatBox" readonly style="width: 100%; height: 300px"></textarea><br />
<input type="text" id="messageInput" placeholder="Type a message..." style="width: 75%" />
<button onclick="sendMessage()">Send</button>
<button onclick="closeConnection()">Close Connection</button>
</body>
</html>Integración de WebSocket con JavaScript
El código JavaScript para gestionar la comunicación WebSocket es clave para habilitar las interacciones en tiempo real.
<script>
// Accessing the chat box and message input elements from the HTML.
const chatBox = document.getElementById("chatBox");
const messageInput = document.getElementById("messageInput");
// Establishing a WebSocket connection to the echo server.
const socket = new WebSocket("wss://echo.websocket.events");
// When the connection is open, display a connected message in the chat box.
socket.addEventListener("open", function (event) {
chatBox.value += "Connected to the echo server\n";
});
// Handle incoming messages by adding them to the chat box.
socket.addEventListener("message", function (event) {
chatBox.value += "Echoed back: " + event.data + "\n";
});
// Handle connection errors.
socket.addEventListener("error", function (event) {
chatBox.value += "Connection error occurred.\n";
});
// Handle connection closure.
socket.addEventListener("close", function (event) {
chatBox.value += "Connection closed. Code: " + event.code + "\n";
});
// Function to send a message when the send button is clicked.
function sendMessage() {
const message = messageInput.value; // Get the message from the input field.
if (!message) return; // If there's no message, don't do anything.
socket.send(message); // Send the message to the server.
chatBox.value += "You: " + message + "\n"; // Show the message in the chat box.
messageInput.value = ""; // Clear the message input field.
}
// Function to close the WebSocket connection.
function closeConnection() {
if (socket.readyState === WebSocket.OPEN) {
socket.close(1000, "The user closed the connection"); // Close the connection normally.
chatBox.value += "Connection closed by user\n"; // Inform the user in the chat box.
} else {
alert("Connection is not open or already closed."); // Alert if the connection can't be closed.
}
}
// Ensure the WebSocket is closed properly when the webpage is closed or reloaded.
window.addEventListener("beforeunload", function () {
if (socket.readyState === WebSocket.OPEN) {
socket.close(1000, "The page is unloading"); // Close the connection normally.
}
});
</script>Este script configura una función de chat en una página web que se conecta a un servidor utilizando WebSockets. A continuación, se presenta una explicación sencilla de sus partes:
- Acceso a elementos HTML: El script obtiene el cuadro de chat y el campo de entrada de mensajes de la página web para poder interactuar con ellos.
- Conexión WebSocket: Establece una conexión con un servidor que repite los mensajes. Esto significa que cualquier cosa que envíes a este servidor te será devuelta de inmediato.
- Visualización del estado de la conexión: Cuando la conexión se establece correctamente, muestra un mensaje en el cuadro de chat indicando que se ha conectado al servidor de eco.
- Gestión de mensajes entrantes: Los mensajes que regresan del servidor se agregan al cuadro de chat, lo que indica que el servidor ha repetido los mensajes.
- Envío de mensajes: Hay una función para enviar los mensajes escritos en el campo de entrada. Si hay texto, lo envía al servidor y luego lo muestra en el cuadro de chat como tu mensaje.
- Cierre de la conexión: También existe una función para cerrar la conexión WebSocket cuando sea necesario, como cuando el usuario decide cerrarla o cuando la página web se está cerrando.
Esta configuración permite la comunicación en tiempo real con el servidor y ayuda a probar y demostrar cómo funcionan las aplicaciones de mensajería.
Y ahora, integremos todo y veámoslo en acción:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WebSocket Echo Chat</title>
</head>
<body>
<textarea id="chatBox" readonly style="width: 100%; height: 300px">
</textarea>
<br />
<input
type="text"
id="messageInput"
placeholder="Type a message..."
style="width: 75%"
/>
<button onclick="sendMessage()">Send</button>
<button onclick="closeConnection()">Close Connection</button>
</body>
<script>
const chatBox = document.getElementById("chatBox");
const messageInput = document.getElementById("messageInput");
const socket = new WebSocket("wss://echo.websocket.events");
socket.addEventListener("open", function (event) {
chatBox.value += "Connected to the echo server\n";
});
socket.addEventListener("message", function (event) {
chatBox.value += "Echoed back: " + event.data + "\n";
});
socket.addEventListener("error", function (event) {
chatBox.value += "Connection error occurred.\n";
});
socket.addEventListener("close", function (event) {
chatBox.value += "Connection closed. Code: " + event.code + "\n";
});
function sendMessage() {
const message = messageInput.value;
if (!message) return;
socket.send(message);
chatBox.value += "You: " + message + "\n";
messageInput.value = "";
}
function closeConnection() {
if (socket.readyState === WebSocket.OPEN) {
socket.close(1000, "The user closed the connection");
chatBox.value += "Connection closed by user\n";
} else {
alert("Connection not open or already closed.");
}
}
window.addEventListener("beforeunload", function () {
if (socket.readyState === WebSocket.OPEN) {
socket.close(1000, "The page is unloading");
}
});
</script>
</html>En el ejemplo anterior, en cuanto te conectas al servidor, puedes comenzar a enviar mensajes y recibirás exactamente lo que escribiste, repetido de vuelta. Si haces clic en el botón 'Cerrar conexión', la conexión WebSocket se terminará y ya no recibirás mensajes repetidos.
Características y técnicas avanzadas de WebSocket
Manejo de datos binarios
Los WebSockets no se limitan a los datos de texto. También pueden manejar datos binarios, lo cual es útil para aplicaciones como la transmisión de video en vivo o los videojuegos. La API de WebSocket permite enviar y recibir blobs o arreglos tipados de datos binarios.
Implementación de la seguridad en WebSocket
La seguridad es primordial al trabajar con WebSockets:
- Usar WSS: Utiliza siempre WebSocket Secure (WSS), que cifra los datos transmitidos entre el cliente y el servidor.
- Autenticación: Implementa la autenticación basada en tokens para garantizar que solo los usuarios autorizados puedan establecer conexiones WebSocket.
- Validación: Valida correctamente todos los datos enviados al servidor para prevenir vulnerabilidades web comunes como XSS o inyección SQL.
WebSocket y el patrón Pub/Sub
El patrón publicar/suscribir (pub/sub) es un modelo popular en servicios de datos en tiempo real donde los mensajes se transmiten a través de un canal. Servicios de WebSocket como PubNub ofrecen APIs que admiten el modelo pub/sub, mejorando las capacidades de WebSocket mediante la gestión de conexiones, el cifrado de datos y la facilitación de la transmisión basada en canales.
Bibliotecas y frameworks de WebSocket
Existen varias bibliotecas de JavaScript que facilitan y hacen más robusto el trabajo con WebSockets:
- Socket.IO: Proporciona características adicionales como reconexión automática, manejo de eventos y gestión de salas.
- WebSocket-Node: Una implementación de servidor WebSocket para Node.js.
- ReconnectingWebSocket: Una pequeña biblioteca que añade funciones de reconexión a los WebSockets estándar.
Conclusión
La tecnología WebSocket es un bloque de construcción fundamental para desarrollar aplicaciones web interactivas y en tiempo real. Al integrar WebSockets en tus aplicaciones, habilitas una interacción directa y bidireccional entre clientes y servidores. Esta guía ha proporcionado los pasos para crear una aplicación de chat de eco simple, y al explorar más a fondo las características avanzadas y la seguridad, puedes construir aplicaciones más sofisticadas que operen de manera eficiente en entornos en tiempo real.
Práctica
¿Cuáles son las principales ventajas de usar WebSockets en aplicaciones web?