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

Maison

interface Web

Tutoriel H5

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:45 PM

html5 websocket

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

>
<html>
<tête>
<script type="texte/ javascript">
document.getElementsByTagName("eventsource")[0].
addEventListener("server-time", eventHandler, false);
fonction eventHandler(événement)
{
// Heure d'alerte envoyée par le serveur
document.querySelector('#ticker').innerHTML = event.data;
}
script>
tête>
<corps>
<div id="sse" >
<eventsource src="/cgi -bin/ticker.cgi" />
div>
<div id="ticker" nom="ticker">
[HEURE]
div>
corps>
html>

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

Déclaration de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Où trouver la courte de la grue à atomide atomique

3 Il y a quelques semaines By DDD

Assassin's Creed Shadows - Comment trouver le forgeron et déverrouiller les armes et la personnalisation des armes

1 Il y a quelques mois By DDD

<🎜>: Dead Rails - Comment relever chaque défi

3 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7625

Tutoriel CakePHP

1389

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

138

Afficher plus

Related knowledge

Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.

Marge gauche HTML Sep 04, 2024 pm 04:48 PM

Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.

Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.

Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.

Espace réservé d'entrée HTML Sep 04, 2024 pm 04:54 PM

Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.

Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.

Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.

Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.

See all articles