send() y onmessage en WebSockets: Envío y Recepción de Mensajes

Introducción al Mensajería WebSocket

Una vez establecida la conexión WebSocket, el núcleo de la comunicación se basa en dos operaciones fundamentales: enviar mensajes al servidor usando el método send() y recibir mensajes del servidor a través del evento message. Esta comunicación es bidireccional y simétrica, lo que significa que tanto el cliente como el servidor pueden enviar mensajes en cualquier momento sin necesidad de esperar una respuesta previa.

La API WebSocket proporciona una interfaz simple pero potente para el intercambio de mensajes. El método send() acepta varios tipos de datos incluyendo strings, ArrayBuffers, Blobs y TypedArrays, lo que permite transmitir tanto datos textuales como binarios de forma eficiente. Por otro lado, el evento message entrega los datos recibidos en la propiedad event.data, manteniendo el tipo de datos original enviado por el servidor.

Enviar Mensajes con send()

El método send() es la forma principal de enviar datos al servidor WebSocket. Este método acepta varios tipos de datos y los transmite de forma eficiente a través de la conexión establecida. Es importante verificar que la conexión esté en estado OPEN antes de llamar a send(), ya que intentar enviar mensajes en otros estados lanzará una excepción.

Este código muestra cómo enviar diferentes tipos de datos usando send(). El método acepta strings directamente, lo cual es ideal para mensajes de texto simples. Para datos binarios, puedes usar ArrayBuffer, Blob o TypedArray como Uint8Array. Cada tipo de dato tiene sus casos de uso específicos: strings para mensajes legibles, ArrayBuffer para datos binarios brutos, Blob para archivos grandes, y TypedArray para datos numéricos estructurados.

• <strong>String</strong>: Para mensajes de texto, comandos o datos JSON serializados.
• <strong>ArrayBuffer</strong>: Para datos binarios brutos como imágenes o audio.
• <strong>Blob</strong>: Para archivos grandes o datos binarios con metadatos.
• <strong>TypedArray</strong>: Para datos numéricos estructurados como coordenadas o mediciones.

Recibir Mensajes con onmessage

El evento message se dispara cada vez que el servidor WebSocket envía datos al cliente. Este evento es la forma principal de recibir información del servidor y proporciona los datos en la propiedad event.data. El tipo de datos recibido depende de lo que envió el servidor, manteniendo la integridad del tipo original (string, ArrayBuffer, Blob o TypedArray).

Puedes escuchar el evento message usando addEventListener('message', handler) o asignando una función a la propiedad onmessage. Ambas formas son funcionalmente equivalentes, pero addEventListener es preferible cuando necesitas múltiples handlers o quieres mayor flexibilidad en el manejo de eventos.

Este código muestra cómo recibir y procesar diferentes tipos de mensajes del servidor. La propiedad event.data contiene los datos enviados por el servidor. Puedes verificar el tipo de datos usando typeof para strings o instanceof para objetos como ArrayBuffer y Blob. Es importante manejar cada tipo de dato apropiadamente: los strings pueden parsearse como JSON si contienen datos estructurados, mientras que los datos binarios pueden procesarse según su formato específico.

Datos Binarios

WebSocket soporta transmisión de datos binarios de forma nativa, lo cual es una ventaja significativa sobre otras APIs de comunicación que requieren codificación como base64. Los datos binarios son ideales para transmitir imágenes, audio, video, archivos y cualquier dato que no sea texto. La API WebSocket puede enviar y recibir ArrayBuffer, Blob y TypedArray de forma eficiente.

Para controlar qué tipo de datos binarios recibes, puedes configurar la propiedad binaryType del objeto WebSocket. Los valores posibles son 'blob' (valor por defecto) y 'arraybuffer'. 'blob' es ideal para archivos grandes que no necesitas procesar inmediatamente, mientras que 'arraybuffer' es mejor cuando necesitas acceso directo a los bytes para procesamiento en tiempo real.

Este código muestra cómo enviar y recibir datos binarios usando WebSocket. La propiedad binaryType controla el formato de los datos binarios recibidos. Cuando se establece en 'arraybuffer', los datos binarios se reciben como ArrayBuffer que puedes acceder directamente usando Uint8Array u otras vistas. Cuando se establece en 'blob' (valor por defecto), los datos se reciben como Blob que es ideal para archivos grandes o cuando necesitas metadatos del archivo.

• <strong>binaryType = 'blob'</strong>: Recibe datos como Blob, ideal para archivos grandes y descargas.
• <strong>binaryType = 'arraybuffer'</strong>: Recibe datos como ArrayBuffer, ideal para procesamiento en tiempo real.
• <strong>TypedArray</strong>: Usa Uint8Array, Int32Array, etc., para datos numéricos estructurados.
• <strong>Efficiency</strong>: Los datos binarios no requieren codificación base64, ahorrando ancho de banda.

Mensajes JSON

JSON es el formato más común para mensajes WebSocket estructurados, ya que permite transmitir datos complejos con múltiples campos y tipos de datos en un solo mensaje. Usar JSON facilita la comunicación entre cliente y servidor, especialmente cuando necesitas enviar metadatos junto con los datos o cuando los mensajes tienen estructuras variables.

Para enviar mensajes JSON, primero convierte el objeto JavaScript a string usando JSON.stringify(). Para recibir mensajes JSON, parsea el string usando JSON.parse(). Es importante manejar errores de parsing, ya que un mensaje malformado puede causar que tu aplicación falle. Siempre envuelve JSON.parse() en un bloque try-catch para manejar errores de forma elegante.

Este código muestra cómo enviar y recibir mensajes JSON a través de WebSocket. El objeto mensaje tiene una estructura con campos como type para identificar el tipo de mensaje, payload para los datos principales, y timestamp para metadatos temporales. Al recibir un mensaje, verificamos que sea un string antes de intentar parsearlo como JSON, y usamos un bloque try-catch para manejar errores de parsing de forma segura.

Manejo de Reconexión

Las conexiones WebSocket pueden perderse por varias razones: el servidor se reinicia, hay problemas de red, el usuario pierde conexión a internet, o el servidor cierra la conexión por inactividad. Implementar reconexión automática es esencial para aplicaciones en tiempo real que necesitan mantener comunicación continua con el servidor.

Una estrategia efectiva de reconexión usa backoff exponencial: esperar cada vez más tiempo entre intentos de reconexión para evitar sobrecargar el servidor. Comienza con un intervalo corto (por ejemplo, 1 segundo) y duplica el tiempo en cada intento hasta alcanzar un máximo (por ejemplo, 30 segundos). Esto reduce la carga en el servidor cuando hay problemas persistentes de red.

Este código implementa reconexión automática con backoff exponencial. La función connect() establece la conexión WebSocket y maneja el evento close para iniciar la reconexión. El intervalo de reconexión comienza en 1000ms y se duplica en cada intento hasta un máximo de 30000ms (duplicando el tiempo entre intentos para reducir carga en el servidor). La función scheduleReconnect() programa el próximo intento de reconexión, y resetReconnection() reinicia el intervalo cuando la conexión tiene éxito.