Une brève analyse des compétences du didacticiel WebSocket et Server Push events

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

WBOY

Libérer： 2016-05-16 15:45:54

original

1882 Les gens l'ont consulté

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

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表示连接的状态。有以下取值： 0 表示连接尚未建立。 1 表示连接已建立，可以进行通信。 2 表示连接正在进行关闭握手。 3 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount	只读属性bufferedAmount表示已经使用 send() 方法排队的 URF-8 文本字节数。

属性

描述

Socket.readyState

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

0 表示连接尚未建立。
1 表示连接已建立，可以进行通信。
2 表示连接正在进行关闭握手。
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

>
<html>
<tête>
<script type="texte/ javascript">
/* Définissez ici la logique de gestion des événements */
script>
tête>
<corps>
<div id="sse" >
<eventsource src="/cgi -bin/ticker.cgi" />
div>
<div id="ticker" >
<HEURE>
div>
corps>
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