recherche

Maison >interface Web >Tutoriel H5 >Une brève analyse des compétences du didacticiel WebSocket et Server Push events_html5 de HTML5

Une brève analyse des compétences du didacticiel WebSocket et Server Push events_html5 de HTML5

WBOY
WBOYoriginal
2016-05-16 15:45:541887parcourir

WebSockets

Web Sockets est une nouvelle génération de technologie de communication bidirectionnelle pour les applications Web, fonctionnant sur un seul socket, exposé dans les navigateurs compatibles HTML5 via une interface JavaScript.

Une fois que vous avez obtenu la connexion Web Socket sur le serveur Web, vous pouvez envoyer des données du navigateur au serveur en appelant la méthode send() et recevoir des données du serveur au navigateur via le gestionnaire d'événements onmessage.

Ce qui suit est l'API pour créer un nouvel objet WebSocket.

Code JavaScriptCopier le contenu dans le presse-papiers
  1. var Socket = nouveau WebSocket(url,

Le premier paramètre url est utilisé pour spécifier l'URL à laquelle se connecter. Le deuxième attribut - port est facultatif et, s'il est fourni, spécifie un sous-protocole que le serveur doit prendre en charge pour une connexion réussie.

Propriétés WebSocket
Voici les propriétés de l'objet WebSocket. Supposons que nous ayons créé l'objet Socket ci-dessus :

Attribut Description Socket.readyState
属性 描述
Socket.readyState

只读属性readyState表示连接的状态。有以下取值：

  1. 0 表示连接尚未建立。

  2. 1 表示连接已建立，可以进行通信。

  3. 2 表示连接正在进行关闭握手。

  4. 3 表示连接已经关闭或者连接不能打开。

Socket.bufferedAmount

只读属性bufferedAmount表示已经使用 send() 方法排队的 URF-8 文本字节数。

Attribut en lecture seule
readyState représente l'état de la connexion. Il a les valeurs suivantes :
0 signifie que la connexion n'a pas encore été établie.
事件 事件处理程序 描述
open Socket.onopen 建立 socket 连接时触发这个事件。
message Socket.onmessage 客户端从服务器接收数据时触发。
error Socket.onerror 连接发生错误时触发。
close Socket.onclose 连接被关闭时触发。

  • 1 signifie que la connexion est établie et que la communication est possible.
    • 2 indique que la connexion subit une poignée de main de clôture.
    方法 描述
    Socket.send()

    send(data) 方法使用连接传输数据。

    Socket.close()

    close() 方法用于终止任何现有连接。

  • 3 signifie que la connexion a été fermée ou que la connexion ne peut pas être ouverte.
    • Socket.bufferedAmount Attribut en lecture seulebufferedAmountReprésente le nombre d'octets de texte URF-8 qui ont été mis en file d'attente à l'aide de la méthode send(). Événements WebSocket Les événements suivants sont liés à l'objet WebSocket. Supposons que nous ayons créé l'objet Socket ci-dessus : Méthodes WebSocket Voici les méthodes liées à l'objet WebSocket. Supposons que nous ayons créé l'objet Socket ci-dessus : Méthode Description Socket.send() La méthode send(data) utilise une connexion pour transférer des données. Socket.close() La méthode close() est utilisée pour mettre fin à toute connexion existante.

    Événements Push du serveur
    Les applications Web traditionnelles génèrent des événements qui sont envoyés côté serveur Web. Par exemple, cliquer sur un lien demandera une nouvelle page au serveur.

    Ce type de temps entre le navigateur Web et le serveur Web peut être appelé un événement côté client.

    Avec l'avènement de HTML5, WHATWG Web Applications 1.0 a introduit un flux d'événements du serveur Web vers le navigateur Web appelé Server Push Events (SSE). Utilisez SSE pour transmettre en continu les événements DOM au navigateur de l'utilisateur.

    Cette méthode de streaming d'événements ouvrira une connexion persistante au serveur et enverra des données au client lorsque de nouveaux messages sont disponibles, éliminant ainsi le besoin d'une interrogation continue.

    Application Web SSE
    Pour utiliser les événements push du serveur dans une application Web, nous devons ajouter un élément

    L'attribut src de l'élément

    doit pointer vers une URL qui doit fournir une connexion HTTP persistante pour envoyer un flux de données contenant l'événement.

    Cette URL pointera vers un script PHP, PERL ou tout autre script Python qui envoie en continu des données d'événement. Voici un exemple simple d'une application Web qui attend l'heure du serveur.

    Code XML/HTMLCopier le contenu dans le presse-papiers
    1. >
    2. <html>
    3. <tête>
    4. <script type="texte/ javascript">
    5. /* Définissez ici la logique de gestion des événements */
    6. script>
    7. tête>
    8. <corps>
    9. <div id="sse" >
    10.  <eventsource src="/cgi -bin/ticker.cgi" />
    11. div>
    12. <div id="ticker" >
    13. <HEURE>
    14. div>
    15. corps>
    16. html>

    Script côté serveur SSE
    Le script côté serveur doit envoyer un en-tête Content-type spécifiant le type comme texte/flux d'événements, comme indiqué ci-dessous :


    Copier le code
    Le code est le suivant :
    imprimer "Content-Type : texte/événement -streamnn" ;

    Après avoir défini le type de contenu, le script côté serveur enverra une balise Event: suivie du nom de l'événement. L'exemple suivant enverra un Server-Time terminé par une nouvelle ligne comme nom d'événement.


    Copier le code
    Le code est le suivant :
    imprimer "Événement : serveur-timen" ;

    La dernière étape consiste à envoyer les données de l'événement à l'aide de la balise Data:, suivie de la valeur de chaîne entière terminée par une nouvelle ligne, comme ceci :


    Copier le code
    Le code est le suivant :
    $time = localtime();
    print " Data: $timen";

    Ce qui suit est le ticker.cgi complet écrit en perl :


    Copier le code
    Le code est le suivant :

    #!/usr/bin /perl
    print "Content-Type: text/event-streamnn";
    while(true){
    print "Event: server-timen";
    $time = localtime();
    imprimer " Données : $timen";
    sleep(5);

    Gestion des événements push du serveur
    Modifions notre application Web pour gérer les événements push du serveur. Voici le dernier exemple :

    Code XML/HTMLCopier le contenu dans le presse-papiers
    1. >  
    2. <html>  
    3. <tête>  
    4. <script type="texte/ javascript">  
    5.    document.getElementsByTagName("eventsource")[0].   
    6.             addEventListener("server-time", eventHandler, false);   
    7.    fonction eventHandler(événement)   
    8.    {   
    9.        // Heure d'alerte envoyée par le serveur   
    10.        document.querySelector('#ticker').innerHTML = event.data;   
    11.   
    12.    }   
    13. script>  
    14. tête>  
    15. <corps>  
    16. <div id="sse" >  
    17.    <eventsource src="/cgi -bin/ticker.cgi" />  
    18. div>  
    19. <div id="ticker"  nom="ticker">  
    20.    [HEURE]   
    21. div>  
    22. corps>  
    23. html>  

    在测试服务器推送事件之前，建议你确保你的 Web 浏览器支持这一概念。

    Déclaration：
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Article précédent：Tendances futures du développement HTML5 _Compétences du didacticiel HTML5Article suivant：Tendances futures du développement HTML5 _Compétences du didacticiel HTML5

    Articles Liés

    Voir plus