WebSockets con JavaScript y Python

Imagina que estás en una conversación telefónica con otra persona. El teléfono es el canal que utilizas para comunicarte, y puedes hablar y escuchar en tiempo real. Ahora, imagina que en lugar de hablar por teléfono, estás enviando mensajes de texto a través de una aplicación de mensajería instantánea. Aunque todavía puedes comunicarte con la otra persona, hay una pequeña demora entre que envías el mensaje y el destinatario lo recibe y responde.

El protocolo WebSocket es como una llamada telefónica para la web. Permite a los navegadores web y a los servidores comunicarse en tiempo real, como si estuvieran hablando por teléfono. A diferencia de HTTP, que es el protocolo utilizado para la mayoría de las solicitudes web, WebSocket no requiere que el navegador web haga una nueva solicitud cada vez que necesita obtener o enviar información. En cambio, WebSocket establece una conexión persistente entre el navegador y el servidor, lo que permite una comunicación bidireccional en tiempo real.

En el artículo anterior te cuento un poco más sobre qué son los WebSockets, en este vamos a ir al grano.

Crear un cliente WebSocket con JavaScript

Crear un nuevo WebSocket es sencillo:

// puedes especificar si quieres SSL con wss
const miSocket = new WebSocket("ws://servidor-web-sockets.com")

Este objeto solo tiene una propiedad llamada readyState, que nos indica el estado de la conexión con estos posibles valores:

connecting
open
closing
closed

No podremos interactuar con otras partes hasta que no tengamos la conexión en estado open.

La interacción se basa en eventos, por lo tanto es bueno conocer bien este mecanismo. Puedes hacer un repaso a los eventos en esta introducción.

Este objeto dispone de un evento especial llamado onopen que nos permite saber cuándo se ha establecido la conexión:

miSocket.onopen = (event) => {
  miSocket.send("Hola, mi primer mensaje enviado")
}

Con el método send, podemos enviar un mensaje al servidor. ¿Cómo nos enteramos? Pues con el evento onmessage:

miSocket.onmessage = (event) => {
  console.log(event.data) // contenido recibido
}

Cuando se quiera cerrar la conexión usaremos el método close:

miSocket.close()

Puedes encontrar otros ejemplos en este post. Esta es la parte más simple, pero no te preocupes que la parte de servidor tampoco es que sea demasiado difícil.

Cómo gestionar la parte del servidor con Python

Necesitaremos instalar este paquete para tener acceso a la librería de WebSockets:

pip install websockets

También usaremos la librería asyncio para poder crear un flujo asíncrono. Para crear un servidor sencillo, podemos hacer algo así:

import asyncio
import websockets

# función asíncrona para gestionar una conexión cualquiera
# le devolverá al remitente un mensaje informando de
# los datos que ha recibido
async def handler(websocket, path):
    data = await websocket.recv()
    reply = f"Datos recibidos:  {data}"
    await websocket.send(reply)

# con la función serve crearemos el servidor
# los parámetros necesarios son estos:
# - la función para gestionar conexiones
# - la ruta
# - el puerto
ws_server = websockets.serve(handler, "localhost", 8000)
asyncio.get_event_loop().run_until_complete(ws_server)
asyncio.get_event_loop().run_forever()

El ejemplo lo he visto en este post. Puede que la parte de sincronicidad en Python no esté del todo clara, habrá un post futuro sobre ello, pero con esta base ya puedes empezar a crear tu propio servidor de WebSockets.