El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

WebSockets

Siguiente ►
►

Introducción a WebSockets

WebSockets es una tecnología que permite la comunicación bidireccional en tiempo real entre un cliente y un servidor. A diferencia de HTTP, que sigue un modelo de solicitud-respuesta, WebSockets permite que el servidor envíe datos al cliente sin que el cliente tenga que solicitarlo explícitamente. Esto es especialmente útil para aplicaciones que requieren actualizaciones en tiempo real, como chats, juegos en línea y aplicaciones financieras.

Características de WebSockets

  • Comunicación Bidireccional: Tanto el cliente como el servidor pueden enviar mensajes en cualquier momento.
  • Persistencia de Conexión: Una vez establecida, la conexión permanece abierta, eliminando la necesidad de múltiples solicitudes HTTP.
  • Bajo Overhead: Menos sobrecarga en comparación con HTTP, ya que no se envían encabezados HTTP completos con cada mensaje.

Configuración del Entorno

Para trabajar con WebSockets, necesitarás un servidor que soporte WebSockets y un cliente que pueda conectarse a ese servidor. En este ejemplo, utilizaremos Node.js para el servidor y JavaScript en el navegador para el cliente.

Instalación de Node.js y WebSocket

  1. Instalar Node.js: Si no tienes Node.js instalado, descárgalo e instálalo desde nodejs.org.
  2. Crear un Proyecto Node.js: Abre tu terminal y crea un nuevo proyecto. 
    mkdir websocket-demo
cd websocket-demo
npm init -y
  3. Instalar el Paquete WebSocket: Utilizaremos la biblioteca ws para manejar WebSockets en Node.js. 
    npm install ws

Creación del Servidor WebSocket

Vamos a crear un servidor WebSocket básico que escuche conexiones entrantes y envíe mensajes a los clientes conectados.

Código del Servidor

// server.js
const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (ws) => {
    console.log('Nuevo cliente conectado');

    // Enviar un mensaje al cliente
    ws.send('Bienvenido al servidor WebSocket!');

    // Manejar mensajes recibidos del cliente
    ws.on('message', (message) => {
        console.log(`Mensaje recibido: ${message}`);
        // Responder al cliente
        ws.send(`Servidor recibió: ${message}`);
    });

    // Manejar la desconexión del cliente
    ws.on('close', () => {
        console.log('Cliente desconectado');
    });
});

console.log('Servidor WebSocket escuchando en ws://localhost:8080');

Explicación del Código

  • Importar WebSocket: Importamos la biblioteca ws.
  • Crear el Servidor: Creamos un servidor WebSocket que escucha en el puerto 8080.
  • Manejo de Conexiones: Cuando un cliente se conecta, enviamos un mensaje de bienvenida.
  • Manejo de Mensajes: Escuchamos los mensajes del cliente y respondemos con una confirmación.
  • Manejo de Desconexiones: Registramos cuando un cliente se desconecta.

Creación del Cliente WebSocket

Ahora, crearemos un cliente WebSocket en JavaScript que se conecte a nuestro servidor.

Código del Cliente

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Client</title>
</head>
<body>
    <h1>WebSocket Client</h1>
    <button id="sendMessage">Enviar Mensaje</button>
    <script>
        const ws = new WebSocket('ws://localhost:8080');

        ws.onopen = () => {
            console.log('Conectado al servidor WebSocket');
        };

        ws.onmessage = (event) => {
            console.log(`Mensaje del servidor: ${event.data}`);
        };

        ws.onclose = () => {
            console.log('Desconectado del servidor WebSocket');
        };

        document.getElementById('sendMessage').addEventListener('click', () => {
            ws.send('Hola, servidor!');
        });
    </script>
</body>
</html>

Explicación del Código

  • Conexión al Servidor: Creamos una nueva instancia de WebSocket y nos conectamos al servidor en ws://localhost:8080.
  • Manejo de Eventos:
    • onopen: Se ejecuta cuando la conexión se establece.
    • onmessage: Se ejecuta cuando se recibe un mensaje del servidor.
    • onclose: Se ejecuta cuando la conexión se cierra.
  • Enviar Mensaje: Al hacer clic en el botón, enviamos un mensaje al servidor.

Ejercicio Práctico

Ejercicio 1: Mejorar el Cliente WebSocket

Objetivo: Modificar el cliente WebSocket para que pueda enviar mensajes personalizados al servidor.

  1. Agregar un Campo de Entrada: Añade un campo de entrada en el HTML para que el usuario pueda escribir un mensaje personalizado.
  2. Enviar el Mensaje: Modifica el evento click del botón para enviar el mensaje escrito por el usuario.

Solución:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Client</title>
</head>
<body>
    <h1>WebSocket Client</h1>
    <input type="text" id="messageInput" placeholder="Escribe tu mensaje aquí">
    <button id="sendMessage">Enviar Mensaje</button>
    <script>
        const ws = new WebSocket('ws://localhost:8080');

        ws.onopen = () => {
            console.log('Conectado al servidor WebSocket');
        };

        ws.onmessage = (event) => {
            console.log(`Mensaje del servidor: ${event.data}`);
        };

        ws.onclose = () => {
            console.log('Desconectado del servidor WebSocket');
        };

        document.getElementById('sendMessage').addEventListener('click', () => {
            const message = document.getElementById('messageInput').value;
            ws.send(message);
        });
    </script>
</body>
</html>

Ejercicio 2: Manejar Múltiples Clientes

Objetivo: Modificar el servidor WebSocket para que maneje múltiples clientes y envíe un mensaje a todos los clientes cuando uno de ellos envíe un mensaje.

Solución:

// server.js
const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (ws) => {
    console.log('Nuevo cliente conectado');

    ws.send('Bienvenido al servidor WebSocket!');

    ws.on('message', (message) => {
        console.log(`Mensaje recibido: ${message}`);
        // Enviar el mensaje a todos los clientes conectados
        server.clients.forEach(client => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(`Cliente dijo: ${message}`);
            }
        });
    });

    ws.on('close', () => {
        console.log('Cliente desconectado');
    });
});

console.log('Servidor WebSocket escuchando en ws://localhost:8080');

Conclusión

En esta sección, hemos aprendido sobre WebSockets, una tecnología poderosa para la comunicación en tiempo real entre clientes y servidores. Hemos configurado un servidor WebSocket básico utilizando Node.js y un cliente WebSocket en JavaScript. Además, hemos realizado ejercicios prácticos para mejorar nuestra comprensión y habilidades en el manejo de WebSockets.

Próximos Pasos

En la siguiente sección, exploraremos los Service Workers y las Aplicaciones Web Progresivas (PWAs), que nos permitirán crear aplicaciones web más robustas y capaces de funcionar sin conexión a internet.

◄ Anterior
◄
Siguiente ►
►

JavaScript: De Principiante a Avanzado

Módulo 1: Introducción a JavaScript

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Objetos y Arrays

Módulo 5: Objetos y Funciones Avanzadas

Módulo 6: El Modelo de Objetos del Documento (DOM)

Módulo 7: APIs del Navegador y Temas Avanzados

Módulo 8: Pruebas y Depuración

Módulo 9: Rendimiento y Optimización

Módulo 10: Frameworks y Librerías de JavaScript

Módulo 11: Proyecto Final

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados