¿Qué son los WebSockets y en qué se diferencian de HTTP?

La comunicación en tiempo real se ha convertido en algo esencial para las aplicaciones modernas. Desde los chats en directo a los editores colaborativos, pasando por los sistemas de notificación, las actualizaciones instantáneas en el navegador sin necesidad de actualizar la página se han convertido en algo tan habitual que es fácil pasar por alto la tecnología que hace posible esta hazaña. En los ciclos tradicionales de solicitud-respuesta HTTP, el cliente debe iniciar la conexión con un servidor y, una vez recibida la respuesta, se cierra la conexión. El resultado es un aumento de la latencia y un uso ineficiente de los recursos. Aunque el sondeo es una solución, sigue siendo insuficiente para satisfacer las necesidades tecnológicas del intercambio de datos en directo a través de Internet.

Aquí es donde WebSocket ofrece una solución. WebSocket es un protocolo de comunicación que permite la comunicación bidireccional persistente entre un cliente y un servidor. WebSocket potencia funciones como la transmisión de voz, la mensajería y la gestión de eventos en directo en las aplicaciones de Vonage, transformando la forma en que los desarrolladores crean todo, desde herramientas de colaboración hasta aplicaciones de transmisión en directo.

En esta entrada del blog, exploraremos qué es WebSocket y cómo funciona, sus aplicaciones en el mundo real, y echaremos un vistazo a algunos ejemplos de código que demuestran cómo WebSocket constituye la base para el intercambio de datos en tiempo real en aplicaciones web y móviles modernas.

Cómo funciona WebSocket

Una de las características más innovadoras de WebSocket es su compatibilidad con HTTP. WebSocket utiliza la cabecera HTTP Upgrade para cambiar los protocolos de HTTP a WebSocket, estableciendo una conexión persistente entre cliente y servidor que les permite comunicarse de ida y vuelta continuamente.

El apretón de manos

La transición del protocolo HTTP al WebSocket se produce durante el handshake inicial entre el cliente y el servidor. El handshake del cliente tiene el siguiente aspecto:

GET /chat HTTP/1.1
        Host: server.example.com
        Upgrade: websocket
        Connection: Upgrade
        Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
        Origin: http://example.com
        Sec-WebSocket-Protocol: chat, superchat
        Sec-WebSocket-Version: 13

Obsérvese cómo la cabecera Upgrade especifica websocket.

El servidor responde con el siguiente handshake:

HTTP/1.1 101 Switching Protocols
        Upgrade: websocket
        Connection: Upgrade
        Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
        Sec-WebSocket-Protocol: chat

Si el apretón de manos tiene éxito, la segunda parte del protocolo WebSocket puede ocurrir.

Transferencia de datos

Tras un intercambio satisfactorio de apretones de manos, se establece una conexión que permite dúplex completo entre un cliente y un servidor. En esta conexión, el cliente y el servidor pueden enviar datos independientemente el uno del otro. Los datos se envían en "mensajes" definidos por un protocolo binario específico.

Para conocer los aspectos más técnicos de WebSocket, consulte la Request for Comments (RFC) del protocolo.

HTTP frente a WebSocket

A diferencia de HTTP, con WebSocket la conexión permanece abierta, lo que permite una comunicación bidireccional continua entre el cliente y el servidor. A continuación se comparan HTTP y WebSocket en sus características principales:

En otras palabras, puedes imaginarte la diferencia entre HTTP y WebSocket así:

Si intentaras hablar con un amigo por teléfono imitando el protocolo HTTP, tendrías que llamar a tu amigo, tu amigo tendría que esperar a que terminaras de hablar para responder, y ambos colgaríais el teléfono. Para añadir algo a la conversación, tendrías que volver a llamar a tu amigo, éste tendría que esperar a responder, y ambos colgaríais el teléfono. Además, tu amigo perdería todo recuerdo de lo que dijiste en la llamada anterior. No es una buena forma de mantener una conversación en tiempo real.

Con WebSocket, esta conversación metafórica se produce a través de una única llamada telefónica, en la que usted y su amigo pueden hablar largo y tendido sin esperar a que el otro termine (¡aunque a uno de los dos le parezca grosero que le interrumpan!) y cada uno recuerda de qué está hablando el otro. De este modo, WebSocket permite una conversación más fluida y natural, ya sea un intercambio de chat en directo, la colaboración en un documento, la retransmisión de una emisión en directo o un juego multijugador.

Problemas de seguridad de WebSocket

Las posibilidades de transferencia bidireccional de datos en tiempo real de WebSocket es parte de lo que hace que el protocolo sea tan potente, pero también potencialmente vulnerable. Como cualquier otra forma de comunicación en red, WebSocket es susceptible de sufrir ataques de seguridad como:

• Hombre en el medio (MitM): Un atacante intercepta la conexión entre el cliente y el servidor, espía la comunicación y altera los datos.

• Secuestro cross-site WebSocket: En este tipo de ataque, se explota la propia implementación de WebSocket, lo que permite el acceso no autorizado y el robo de datos.

• Denegación de servicio (DoS): Se produce cuando el servidor se ve inundado de solicitudes de conexión que hacen que el servidor no responda y agote los recursos.

Afortunadamente, existen métodos para asegurar sus conexiones WebSocket:

• Uso de Secure WebSocket wss://) para cifrar los datos que se transmiten entre un cliente y un servidor

• Implantar una autenticación y autorización adecuadas con tokens como Tokens Web JSON (JWT) para garantizar que sólo los usuarios autorizados acceden a la conexión WebSocket.

• Validar los datos de entrada y salida para evitar ataques de inyección

• Comprobación del origen la cabecera de la solicitud de enlace para asegurarse de que procede de una fuente de confianza

• Limitación de velocidad para ayudar a prevenir ataques DoS y gestionar los recursos eficazmente

• Registro y supervisión del tráfico WebSocket para detectar actividades inusuales e intervenir sobre posibles amenazas a la seguridad en tiempo real

Teniendo esto en cuenta, echemos un vistazo a una aplicación de ejemplo que utiliza la Voice API de Vonage y la NCCO Connect acción para establecer y autenticar una conexión WebSocket.

Aplicación de ejemplo: Eco de llamada en tiempo real seguro

Esta aplicación de ejemplo utiliza la Voice API para responder a una llamada entrante y permitir que la persona que llama escuche un eco de su propia voz. Aprovecha la potencia de una conexión WebSocket creada con una acción NCCO y autenticada con un JWT.

Puedes encontrar el código completo y el README para ejecutar la aplicación localmente en la Comunidad de Vonage en GitHub.

La aplicación muestra una página web de Stats con el recuento de paquetes y bytes, que ilustra cómo los datos (la voz del llamante) se transmiten bidireccionalmente en tiempo real.

A screenshot of the stats web page showing an open connection and the amount of transmitted data. The packets and bytes received and sent are identical because the data being transmitted is an echo.Consulte el repositorio en GitHub para probar la aplicación por ti mismo. Ten en cuenta que para ejecutar la aplicación de ejemplo de extremo a extremo, necesitarás una cuenta de Account de Vonage.

Establecimiento de una conexión WebSocket segura con la OCNC

A Objeto de control de llamada (NCCO) utiliza JSON para dictar qué acciones deben realizar los servidores de la Voice API cuando se accede al webhook. El siguiente NCCO devuelto por el /webhooks/answer definido en la aplicación de ejemplo utiliza la acción connect acción para enrutar a un tipo websocket en lugar de un número de teléfono o un punto final SIP. Esto establece un flujo de audio sin procesar en tiempo real a través de una conexión WebSocket utilizando una frecuencia de muestreo PCM lineal de 24 kHz de alta fidelidad:

    ncco = [
        {
            "action": "talk",
            "text": "We will now connect you to the echo server with advanced WebSocket features. Wait a moment then start speaking.",
        },
        {
            "action": "connect",
            "from": VONAGE_VIRTUAL_NUMBER,
            "endpoint": [
                {
                    "type": "websocket",
                    "uri": f"wss://{request.headers.get('host')}/socket",
                    "content-type": "audio/l16;rate=24000",  # 24 kHz audio
                    "headers": {"X-Custom-Header": "demo-value"},
                    # Authorization configuration
                    "authorization": {
                        "type": "vonage"  # Vonage will send JWT in Authorization header
                    },
                }
            ],
        },
    ]

Además, el tipo websocket admite un encabezado authorization que puede configurarse para utilizar un JWT proporcionado por Vonage como un webhook firmado. Esta opción de autenticación del encabezado forma parte del intercambio inicial de la solicitud.

Aquí el servidor valida el JWT:

 # Get authorization header for authentication
    auth_header = websocket.headers.get("authorization", "")

    # Validate JWT if present
    if auth_header.startswith("Bearer "):
        token = auth_header.replace("Bearer ", "")
        print("JWT validation: ===> Valid JWT token received")
        verify_signature(token, VONAGE_SIGNATURE_SECRET)
        print(
            f"Valid signature: ===> token: {token} vs. signature secret: {VONAGE_SIGNATURE_SECRET}"
        )
        if not verify_signature(token, VONAGE_SIGNATURE_SECRET):
            print("JWT validation: ===> Invalid JWT token received")
            await websocket.close(code=1008, reason="Unauthorized")
            return

Este paso de validación impide que clientes no autorizados establezcan conexiones de larga duración. Los WebSockets son conexiones de larga duración, por lo que la autenticación debe producirse durante el handshake. Verificando la firma JWT mediante la función VONAGE_SIGNATURE_SECRETte aseguras:

• La solicitud se originó genuinamente de Vonage

• La carga útil no ha sido manipulada

• Los clientes no autorizados son rechazados inmediatamente

Si la validación falla, la conexión se cierra con un mensaje de 1008 violación de políticaque impide cualquier interacción posterior.

Gestión de audio en tiempo real a través de WebSockets

Una vez autentificada, la conexión es aceptada y comienza a procesar dos tipos de mensajes:

• Marcos de texto: Utilizados para eventos de control como websocket:connected

• Marcos binarios: Contienen datos de audio sin procesar de la llamada

El ejemplo simplemente devuelve el audio a la persona que llama, pero aquí es donde normalmente estaría la lógica de su aplicación:

 if "text" in message:
                # Handle text messages (JSON commands/events)
                data = json.loads(message["text"])
                print(f"Received text: ===> {data}")

                # Handle special commands
                if data.get("event") == "websocket:connected":
                    print("WebSocket: ===> Connection established with Vonage")

            elif "bytes" in message:
                # Handle binary audio data
                audio_data = message["bytes"]
                active_connections[connection_id]["packets_received"] += 1
                active_connections[connection_id]["bytes_received"] += len(audio_data)

                # Echo audio back to caller
                await websocket.send_bytes(audio_data)
                active_connections[connection_id]["packets_sent"] += 1
                active_connections[connection_id]["bytes_sent"] += len(audio_data)

Dado que la NCCO define el formato de audio audio/l16;rate=24000), puede procesar o transformar el flujo de forma fiable sin negociación adicional.

Por qué es importante este patrón

Aunque este código de ejemplo no hace mucho, proporciona un patrón básico para crear aplicaciones de voz seguras y más avanzadas.

Por ejemplo, puede ampliar el siguiente bloque de código para incluir lógica para otros tipos de comandos y eventos. Puede utilizar un comando clear comando en caso de que necesites interrumpir la reproducción para responder dinámicamente a una llamada o utilizar un notify evento para sincronizar la lógica de la aplicación para iniciar la grabación o reproducir un nuevo aviso una vez que finalice el audio.:

                # Handle special commands
                if data.get("event") == "websocket:connected":
                    print("WebSocket: ===> Connection established with Vonage")

Obtén más información sobre cómo Vonage implementa WebSockets leyendo la documentación.

En resumen

Los WebSockets cambian radicalmente nuestra concepción de las actualizaciones instantáneas al permitir conexiones bidireccionales persistentes entre un cliente y un servidor. En esta entrada de blog, exploramos cómo este cambio reduce la latencia, mejora la eficiencia y desbloquea casos de uso modernos como el chat en directo, el streaming y las aplicaciones colaborativas.

También hemos visto cómo Vonage se basa en este protocolo utilizando la Voice API y la NCCO connect acción. Al aprovechar el websocket puedes transmitir audio en vivo directamente a una aplicación; en este caso, le devolvemos el eco a la persona que llama.

Y lo que es más importante, destacamos cómo asegurar estas conexiones de larga duración con el encabezado Vonage authorization permitiendo al servidor verificar y asegurar la conexión WebSocket durante el handshake inicial.

El patrón de conexiones WebSocket basadas en NCCO con autenticación incorporada proporciona una base potente y segura para crear experiencias de voz más avanzadas, desde asistentes impulsados por IA hasta canalizaciones de procesamiento de audio en tiempo real.

Otras lecturas y recursos

• Integrar llamadas telefónicas a un chatbot Dialogflow a través de WebSockets: Este tutorial le ayudará a comenzar con un bot Dialogflow ejemplo e interactuar con él desde las llamadas telefónicas utilizando los códigos de referencia de ejemplo proporcionados utilizando Vonage Voice API.

• Creación de un servidor WebSocket con Spring Boot: En este tutorial, usted aprenderá cómo crear un servidor WebSocket usando Spring Boot que puede recibir mensajes binarios y de texto.

• Mejore la experiencia de vídeo de los usuarios con la supervisión de la calidad en tiempo real: MOS es una excelente métrica de calidad de video para videollamadas. Conoce cómo Vonage Video la utiliza para mejorar la experiencia del usuario.

Mensajería RCS con Laravel, Livewire, Reverb y Echo: Construir un mensajero RCS en tiempo real utilizando Laravel, Livewire, y Vonage - no requiere JavaScript.