Qu'est-ce que les WebSockets et en quoi sont-ils différents de HTTP ?

La communication en temps réel est devenue essentielle pour les applications modernes. Des chats en direct aux éditeurs collaboratifs en passant par les systèmes de notification, les mises à jour instantanées dans le navigateur sans rafraîchissement des pages sont devenues si courantes qu'il est facile d'oublier la technologie qui rend cet exploit possible. Dans les cycles traditionnels requête-réponse HTTP, le client doit établir une connexion avec un serveur et, une fois la réponse reçue, cette connexion est fermée - en d'autres termes, elle n'a pas d'état. Il en résulte une latence accrue et une utilisation inefficace des ressources. Bien que le polling soit une solution de contournement, il n'est toujours pas suffisant pour répondre aux besoins technologiques de l'échange de données en direct sur l'internet.

C'est ici que WebSocket apporte une solution. WebSocket est un protocole de communication qui permet une communication persistante et bidirectionnelle entre un client et un serveur. WebSocket est à l'origine de fonctions telles que le streaming vocal, la messagerie et la gestion d'événements en direct dans les applications de Voice, transformant ainsi la manière dont les développeurs créent tout, des outils de collaboration aux applications de streaming en direct.

Dans ce billet de blog, nous allons explorer ce qu'est WebSocket et comment il fonctionne, ses applications réelles, et jeter un coup d'œil à quelques exemples de code qui démontrent comment WebSocket constitue la base de l'échange de données en direct dans les applications web et mobiles modernes.

Fonctionnement de WebSocket

L'une des caractéristiques les plus innovantes de WebSocket est sa compatibilité avec HTTP. WebSocket utilise l'en-tête HTTP Upgrade pour passer du protocole HTTP à WebSocket, établissant ainsi une connexion persistante entre le client et le serveur qui leur permet de communiquer en continu.

La poignée de main

Le passage du protocole HTTP au protocole WebSocket s'effectue lors de l'échange initial entre le client et le serveur. La poignée de main du client se présente comme suit :

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

Remarquez que l'en-tête Upgrade précise websocket.

Le serveur répond par la poignée de main suivante :

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

Si la poignée de main est réussie, la deuxième partie du protocole WebSocket peut avoir lieu.

Le transfert de données

Après un échange réussi de handshakes, une connexion est établie qui permet le full-duplex entre un client et un serveur. Dans cette connexion, le client et le serveur peuvent envoyer des données indépendamment l'un de l'autre. Les données sont envoyées dans des "messages" définis par un protocole binaire spécifique.

Pour en savoir plus sur les aspects plus techniques de WebSocket, consultez la Request for Comments (RFC) du protocole.

HTTP vs. WebSocket

Contrairement à HTTP, avec WebSocket, la connexion reste ouverte, ce qui permet une communication bidirectionnelle continue entre le client et le serveur. Voici une comparaison des caractéristiques principales de HTTP et de WebSocket :

En d'autres termes, vous pouvez imaginer la différence entre HTTP et WebSocket comme suit :

Si vous essayez de parler à un ami par téléphone en imitant le protocole HTTP, vous devrez appeler votre ami, celui-ci devra attendre que vous ayez fini de parler pour vous répondre et vous raccrocherez tous les deux le téléphone. Pour ajouter à la conversation, vous devriez appeler à nouveau votre ami, il devrait attendre pour répondre et vous raccrocheriez tous les deux le téléphone. En outre, votre ami perdrait tout souvenir de ce que vous avez dit lors de l'appel précédent. Ce n'est pas une bonne façon d'avoir une conversation en temps réel !

Avec WebSocket, cette conversation métaphorique a lieu lors d'un simple appel téléphonique, au cours duquel vous et votre ami pouvez parler longuement sans attendre que l'autre ait terminé (bien que l'un d'entre vous puisse trouver impoli d'être interrompu ! Ainsi, WebSocket permet une conversation plus fluide et plus naturelle, qu'il s'agisse d'un échange en direct par chat, d'une collaboration sur un document, de la diffusion d'un flux en direct ou d'un jeu multijoueur.

Problèmes de sécurité liés à WebSocket

Les possibilités de transfert de données bidirectionnelles en temps réel de WebSocket font partie de ce qui rend le protocole si puissant, mais aussi potentiellement vulnérable. Comme toute autre forme de communication réseau, WebSocket est susceptible de faire l'objet d'attaques de sécurité telles que :

• L'homme du milieu (MitM): Un attaquant intercepte la connexion entre le client et le serveur, écoute la communication et modifie les données.

• Détournement d'un site WebSocket: Dans ce type d'attaque, l'implémentation WebSocket elle-même est exploitée, ce qui permet un accès non autorisé et le vol de données.

• Déni de service (DoS): Ce phénomène se produit lorsque le serveur est inondé de demandes de connexion, ce qui le rend insensible et épuise ses ressources.

Heureusement, il existe des méthodes pour sécuriser vos connexions WebSocket :

• Utilisation de Secure WebSocket wss://) pour crypter les données transmises entre un client et un serveur

• Mise en œuvre d'une authentification et d'une autorisation appropriées avec des jetons tels que jetons Web JSON (JWT) pour s'assurer que seuls les utilisateurs autorisés accèdent à la connexion WebSocket.

• Validation des données d'entrée et de sortie pour prévenir les attaques par injection

• Vérification de l'origine l'en-tête de la demande de poignée de main pour s'assurer qu'elle provient d'une source fiable

• Limitation du débit pour aider à prévenir les attaques DoS et à gérer efficacement les ressources

• Enregistrement et surveillance du trafic WebSocket afin de détecter les activités inhabituelles et d'intervenir en temps réel en cas de menaces potentielles pour la sécurité

Dans cette optique, examinons un exemple d'application qui utilise l Voice API de Vonage de Vonage et le NCCO Connect pour établir et authentifier une connexion WebSocket. pour établir et authentifier une connexion WebSocket.

Exemple d'Applications : Écho de l'appelant sécurisé en temps réel

Cet exemple d'application utilise l Voice API pour répondre à un appel entrant et permettre à l'appelant d'entendre l'écho de sa propre voix. Il exploite la puissance d'une connexion WebSocket créée avec une action NCCO et authentifiée avec un JWT.

Vous pouvez trouver le code complet et le README pour exécuter l'application localement dans la Communauté Vonage sur GitHub.

L'appli sert une page web Stats affichant le décompte des paquets et des octets, illustrant la façon dont les données (la voix de l'appelant) sont transmises de manière bidirectionnelle en temps réel.

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.Consultez le sur GitHub pour tester l'application par vous-même. Notez que pour exécuter l'application de bout en bout, vous aurez besoin d'un Account Vonage.

Établissement d'une connexion WebSocket sécurisée avec le BCN

A objet de contrôle d'appel (NCCO) utilise JSON pour dicter les actions que les serveurs Voice API entreprennent lorsque le webhook est atteint. Le NCCO suivant renvoyé par le point de terminaison /webhooks/answer défini dans l'exemple d'application utilise l'attribut connect action pour acheminer vers un type websocket plutôt que vers un numéro de téléphone ou un point d'extrémité SIP. Il établit un flux audio brut en temps réel sur une connexion WebSocket en utilisant un taux d'échantillonnage PCM linéaire haute fidélité de 24 kHz :

    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
                    },
                }
            ],
        },
    ]

En outre, le websocket prend en charge un en-tête authorization qui peut être configuré pour utiliser un JWT fourni par Vonage en tant que webhook signé. Cette option d'authentification de l'en-tête fait partie de la poignée de main de la demande initiale.

Le JWT est validé par le serveur ici :

 # 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

Cette étape de validation empêche les clients non autorisés d'établir des connexions de longue durée. Les WebSockets étant des connexions de longue durée, l'authentification doit avoir lieu au cours de la poignée de main. En vérifiant la signature du JWT à l'aide de la fonction VONAGE_SIGNATURE_SECRETvous vous assurez que

• La demande émane véritablement de Vonage

• La charge utile n'a pas été altérée

• Les clients non autorisés sont immédiatement rejetés

Si la validation échoue, la connexion est fermée avec un message de 1008 violation de la politiqueempêchant toute interaction ultérieure.

Traitement audio en temps réel sur WebSockets

Une fois authentifiée, la connexion est acceptée et commence à traiter deux types de messages :

• Cadres de texte: Utilisés pour les événements de contrôle tels que websocket:connected

• Cadres binaires: Contiennent les données audio brutes de l'appel

L'exemple se contente de renvoyer l'audio à l'appelant, mais c'est là que se trouve généralement la logique de votre application :

 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)

Étant donné que le NCCO définit le format audio audio/l16;rate=24000), vous pouvez traiter ou transformer le flux de manière fiable sans négociation supplémentaire.

L'importance de ce modèle

Bien que cet exemple de code ne faire il fournit un modèle de base pour la construction d'applications vocales sécurisées en continu plus avancées.

Par exemple, vous pouvez développer le bloc de code suivant pour inclure la logique d'autres types de commandes et d'événements. Vous pouvez utiliser une clear commande au cas où vous devriez interrompre la lecture pour répondre dynamiquement à un appelant ou utiliser un notify événement pour synchroniser la logique de l'application pour commencer l'enregistrement ou jouer une nouvelle invite une fois que l'audio se termine.:

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

Pour en savoir plus sur la façon dont Vonage met en œuvre les WebSockets, lisez les documents suivants la documentation.

En résumé

Les WebSockets modifient fondamentalement notre conception des mises à jour instantanées en permettant des connexions persistantes et bidirectionnelles entre un client et un serveur. Dans cet article de blog, nous avons exploré comment ce changement réduit la latence, améliore l'efficacité et débloque des cas d'utilisation modernes tels que le chat en direct, la diffusion en continu et les applications collaboratives.

Nous avons également examiné la manière dont Vonage s'appuie sur ce protocole en utilisant l'API Voice et l'action NCCO connect et de l'action NCCO. En tirant parti du point d'extrémité websocket vous pouvez diffuser de l'audio en direct directement dans une application - dans ce cas, nous le renvoyons à l'appelant.

Plus important encore, nous avons montré comment sécuriser ces connexions de longue durée avec l'en-tête Vonage authorization permettant au serveur de vérifier et de sécuriser la connexion WebSocket lors de l'échange initial.

Le modèle de connexions WebSocket pilotées par NCCO avec authentification intégrée constitue une base puissante et sécurisée pour construire des expériences vocales plus avancées - des assistants alimentés par l'IA aux pipelines de traitement audio en temps réel.

Autres lectures et ressources

• Intégrer des appels téléphoniques à un Chatbot Dialogflow via WebSockets: Ce tutoriel vous aidera à démarrer avec un exemple de bot Dialogflow et à interagir avec lui à partir d'appels téléphoniques en utilisant les exemples de codes de référence fournis en utilisant l'API Voice de Vonage.

• Créer un serveur WebSocket avec Spring Boot: Dans ce tutoriel, vous apprendrez à créer un serveur WebSocket à l'aide de Spring Boot qui peut recevoir des messages binaires et textuels.

• Améliorer l'expérience vidéo des utilisateurs grâce au contrôle de la qualité en temps réel: Le MOS est une mesure de qualité vidéo exceptionnelle pour les appels vidéo. Découvrez comment Vonage Video l'utilise pour améliorer l'expérience de l'utilisateur.

Messagerie RCS avec Laravel, Livewire, Reverb et Echo: Construire une messagerie RCS en temps réel en utilisant Laravel, Livewire et Vonage - sans JavaScript.