Aller au contenu | Aller au menu | Aller à la recherche


WebSocket et SSE (Server Sent Events / EventSource)

Par PlaceOweb le dimanche, octobre 28 2012, 17:21 - Javascript - Lien permanent

En plus des traditionnelles requêtes ajax, il existe depuis l'HTML5 les WebSocket et Server Sent Events (SSE).

WebSocket

Cette spécification définit une API qui permet aux pages Web d'utiliser le protocole WebSocket (défini et normalisé par l'IETF dans la RFC 6455) pour une communication bidirectionnelle avec un hôte distant.

Server Sent Events

Cette spécification définit une API pour ouvrir une connexion HTTP pour recevoir les notifications push d'un serveur sous la forme d'événements DOM. L'API est conçu de telle sorte qu'il puisse être étendu pour fonctionner avec d'autres systèmes de notification push tels que SMS Push.

Ressources sur les WebSockets, Server Sent Events et autres technologies de "remote server pushing"

WebSockets vs. Server-Sent events/EventSource

Websockets et SSE (les événements envoyés par le serveur) sont tous 2 capables de pousser des données vers les navigateurs, mais ils ne sont pas des technologies concurrentes.

Une connexion Websockets peut à la fois envoyer des données vers le navigateur et recevoir des données à partir du navigateur. Un bon exemple d'une application qui pourrait utiliser WebSockets est une application de chat.

Une connexions SSE ne peut que pousser les données vers le navigateur. Cours de la bourse en ligne, mise à jour ou Twitters chronologie humaine ou animale sont de bons exemples d'une application qui pourrait bénéficier du SSE.

Dans la pratique, car tout ce qui peut être fait avec SSEpeut aussi être fait avec Websockets. Les Websockets attirent beaucoup plus d'attention et d'amour, et de nombreux navigateurs soutiennent plus les Websockets que SSE.

Cependant, il peut être exagéré pour certains types d'applications, et le backend pourrait être plus facile à mettre en œuvre avec un protocole tel que SSE.

HTML5 Server-Push Technologies

Avec les WebSockets, écrire des applications web avec une haute réactivité temps réel devient un tache simple. L'API des Web Sockets est facile à comprendre et à utiliser. Le protocole sous-jacent WebSocket est hautement efficace: il y a très peu de surcouche dans dans la gestion d'un WebSocket. En raison du fait que le protocole WebSocket tourne au-dessus de TCP, le protocole WebSocket ne pas avoir à traiter avec des "hacks" comme le font les protocoles Comet populaires comme Bayeux ou BOSH. Simuler un canal bidirectionnel via HTTP conduit à des protocoles complexes et moins efficaces. Surtout si seulement une petite quantité de données seront transférées, telles que les petites notifications d'événements, le surcoût des protocoles classiques Comet est très élevé. Ce n'est pas vrai pour WebSockets.

En outre, WebSockets s'intègrent bien dans l'infrastructure Web existante. Pour WebSockets par exemple, utilisent les mêmes ports que les connexions HTTP standards utilisent. Pour établir une nouvelle connexion WebSocket, le protocole WebSocket utilise les capacités de gestion de connexion du protocole HTTP. WebSockets supporte efficacement la communication bidirectionnelle en utilisant l'infrastructure Web existante sans ajouter de nouvelles exigences ou des composants.

D'autre part, WebSockets font moins pour la fiabilité. Ce qui doit être fait sur ​​le niveau de l'application (sous-protocole). Contrairement aux envoies d’évènements de serveur (SSE), le protocole WebSocket ne comprend le traitement de reconnexion ou la garantie de remise de messages. Le protocole actuel WebSocket représente un canal de communication de bas niveau seulement.

Contrairement à WebSockets, le serveur-Sent Events protocole comprend des fonctionnalités puissantes pour se reconnecter et synchroniser les messages. Haute fiabilité est une fonction intégrée dans des évènements envoyés par le serveur. En outre, comme WebSockets, les frais généraux associés à la gestion d'un serveur-Sent flux d'événements est très faible. Cependant SSE supporte seulement un canal unidirectionnel poussé par le serveur (server-push). En créant un événement de serveur-Sent, un flux de serveur à client du serveur d'événements-poussoir sera ouvert. Souvent SSE saura satisfaire les exigences d'une situation serveur push, mais cela dépend des cas concrets d'utilisation.

Qu'est-ce que WebSockets et Server-Sent Events signifie pour les protocoles Comet populaires tels que Bayeux et BOSH ? Les normes de communication HTML5 ont le potentiel pour remplacer les protocoles Comet classiques et de devenir la technologie dominante de serveur push, du moins pour de nouvelles applications. De l'autre côté, par exemple, la communauté cometd commencé à appliquer cometd 2.0 sera en charge le protocole WebSockets comme un nouveau type de transport. cometd est la mise en œuvre la plus populaire de Bayeux.




INTRODUCING WEBSOCKETS: BRINGING SOCKETS TO THE WEB (Support des sockets pour le web)




STREAM UPDATES WITH SERVER-SENT EVENTS (Mise a jour flux avec évènements envoyés par le serveur)




What's different in the new WebSocket protocol (What has been changed since WebSocket HyBi 00?)




Les implémentations de serveur peut prendre en charge à la fois HyBi 00 et HyBi 10 en regardant la poignée de main dans l'en-tête HTTP. Toutefois, il n'est pas recommandé de soutenir HyBi 00 car il est connu pour être vulnérable.




WebSockets vs Server-Sent Events vs Long-polling




Différences entre "Long-polling", "Server-Sent Events" et "WebSockets" avec schémas et implémentation javascript et PHP, et pour conclure la portabilité des navigateurs ainsi que la difficulté de mise en oeuvre.




Real-time display of server push data using Server-Sent Events (SSE)




Il existe plusieurs méthodes et techniques qui viennent à portée de main au cas où vous avez besoin d'appeler une ressource externe périodique ou si vous êtes en attente d'une poussée serveur, mais je vous présente ici une tâche facile et simple à l'aide de HTML5 Server Sent Events (SSE).






Comet (programming) Comet (informatique)




Comet est une nouvelle approche permettant à un serveur web d'envoyer des informations au navigateur web sans que celui-ci l'ait explicitement demandé. Ce canal bidirectionnel est un ensemble de deux connexions duales HTTP non-fermées.




Html5 Tutorial : Web Sockets




Web Sockets Handshake (Poignée de main) : Pour démarrer une connexion socket Internet entre le client et le serveur, il ya une poignée de main pour mettre à niveau la connexion à partir du protocole HTTP à Internet socket protocole.




Avantages des Web Sockets



    

  • Utilisation du scrutin et d'interrogation longue (polling and long polling) :

      

    • Requête HTTP et têtes de réponse sont envoyés dans les deux sens à une surcharge ⇒ certain intervalle grand ici!
      • 

    • Il pourrait ne pas être de nouvelles données pour le client demande ⇒ des données inutiles sont envoyés!
      • 

    • 

  • Utilisation Web Sockets:

      

    • En-têtes HTTP de requête et de réponse sont envoyés qu'une seule fois lors de la négociation
      • 

    • Une taille de trame est d'au moins 2 octets: [octet 0x00][données UTF-8 message][0xFF octets]
      • 

    • Le serveur informe le client de nouveaux messages, il n'est pas nécessaire de marteler le serveur de demandes inutiles!
      • 

    • 

  • Tout cela évidemment conduire à réduire le trafic réseau et la latence du réseau
    • 




Real-time data exchange in HTML5 with WebSockets




L'API WebSocket est l'une des fonctions les plus puissantes nouvelles dans la spécification HTML5, car elle ouvre la porte à des communications en temps réel et aux messages poussés.




Cet article décrit un programme de chat de base qui montre les rudiments de la WebSockets et la façon de les mettre en œuvre sur le côté client.




Mozilla







Apprendre a se servir des Websockets




Les websockets sont très utiles pour les applications suivante :


    

  • système de discussion instantanée (chat, téléphone, visioconférence)
    • 

  • échange d'informations demandant d'être à la fois rapide et constant (exemple : un jeu multijoueur)
    • 

  • des applications qui nécessitent que le serveur puisse envoyer des informations à tout moment au client
    • 




Les websockets ne doivent pas être utilisées pour :


    

  • un système d'appel de page (AJAX est fait pour ça)
    • 

  • envoyer des informations qui ne nécessitent ni d'être rapides ni d’être actualisées constamment
    • 

  • l'upload de fichiers ou de grandes données, car l'information transmise doit être courte (moins de 2Ko)
    • 




Il va falloir une classe capable d'accepter ces connections et des les maintenir, elle se nomme Socket. Il faut aussi une classe Connexion capable d’identifier chaque utilisateurs, de leur attribuer un numéro de connexion, de valider celle-ci (ce que l'on appelle le handshake).




Le handshake une signature numérique qu'envoie le navigateur du client au serveur. Une fois reçu, il faut effectuer une opération sur une clé (le handshaking) puis la renvoyer au client. Cela permet d'assurer la validité des deux partis (client et serveur) et d'effectuer une connexion sure. Le hanshaking doit obligatoirement être effectué au tout début de la connexion sans quoi le navigateur refusera d'envoyer des données au serveur.




websocket site:developpez.com




Un chat en HTML5 avec les websockets




Exemple d’implémentation avec côté serveur PHP : phpwebsocket




Jouons un peu avec les websocket




Plutôt que de vous ennuyer avec un tchat j'ai écrit un puissance 4, afin que deux joueurs puissent s'affronter.




HTML5 et les WebSockets




Le protocole WebSocket représente une avancée très importante dans la communication client-serveur. Le protocole HTTP est un protocole non connecté et sans état, et n'a pas été prévu pour établir des connexions permanentes ni le push de données : en HTTP, il faut que le client demande explicitement les données au serveur. Bien-entendu, plusieurs techniques ont été developpées pour contourner cette barrière et permettre la réception des données mises à jour quasi-instantanément (polling, long-polling...) ; mais elles surchargent le réseau en headers HTTP inutiles. Les WebSocket permettent d'y remédier.




PHP et WebSockets







Apache WebSockets




Le module apache-websocket est un module serveur Apache 2.x qui peut être utilisé pour traiter les demandes en utilisant le protocole WebSocket (RFC 6455) par un serveur Apache 2.x. Le module se compose d'une architecture de plugins pour la manipulation WebSocket messagerie. Cela ne nécessite aucune connaissance des structures internes d'Apache.






Create a Bi-directional Connection to a PHP Server using HTML5 WebSockets




Making HTML5 WebSockets Work




Build a real-time application using HTML5 WebSockets




FAQ





Handshake client selon les navigateurs




Chrome Version 22.0.1229.94 m




GET /websocket/server.php HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: socket.placeoweb.com:9988
Origin: http://www.placeoweb.com
Sec-WebSocket-Key: 2T73eWBKAzmk7v2FuKTOXg==
Sec-WebSocket-Version: 13
Sec-WebSocket-Extensions: x-webkit-deflate-frame
Cookie: PHPSESSID=cjkd45j9fq8dakjl25g2aetgm5; login=myuser




Firefox 16.0.2




GET /websocket/server.php HTTP/1.1
Host: socket.placeoweb.com:9988
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:16.0) Gecko/20100101 Firefox/16.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive, Upgrade
Sec-WebSocket-Version: 13
Origin: http://www.placeoweb.com
Sec-WebSocket-Key: CUETbZyOTDdUmYFCG5pQGA==
Cookie: login=myuser; PHPSESSID=06dsn122547bhckf3b6u7n5fd5
Pragma: no-cache
Cache-Control: no-cache
Upgrade: websocket





Bilan perso et rapide




Je n'ai pas essayé SSE, et WebSocket fonctionne très bien mais avec PHP et Apache, sans rajouter de module Apache WebSocket, cela requiert le lancement d'un programme serveur sur un port différent du 80.




Du coup, impossible de rattacher par exemple la session des connexions classiques HTTP sur le serveur Apache et avec la connexion bi-directionnelle (WebSocket). Au pire du mieux, si cela tourne sur le même serveur qu'Apache et que les sessions sont de type fichier, on peut aller les lires...




Idéalement sécurisé avec SSL (wss:// à la place de ws://) serait un plus ...




      


  

                      
    

            
Ajouter un commentaire

      


                

          
        

        

          
        

        

          
        

        

        

          
        

        
Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.


              

      

        

                  

      

    

  
          
Fil des commentaires de ce billet