Comprendre HTML5 WebSocket

Comprendre WebSocket de HTML5

Dans la spécification HTML5, ma technologie Web préférée est l'API WebSocket, qui devient rapidement populaire. WebSocket offre une alternative bienvenue à la technologie Ajax que nous utilisons depuis quelques années. Cette nouvelle API permet de transmettre efficacement les messages du client au serveur en utilisant une syntaxe simple. Jetons un coup d'œil à l'API WebSocket de HTML5 : elle peut être utilisée à la fois côté client et côté serveur. Et il existe une excellente API tierce appelée Socket.IO.

1. Qu'est-ce que l'API WebSocket ?
L'API WebSocket est la méthode de communication asynchrone client-serveur de nouvelle génération. Cette communication remplace un seul socket TCP, utilisant le protocole ws ou wss, et peut être utilisée par n'importe quel programme client et serveur. WebSocket est actuellement standardisé par le W3C. WebSocket est déjà pris en charge par des navigateurs tels que Firefox 4, Chrome 4, Opera 10.70 et Safari 5.

L'avantage de l'API WebSocket est que le serveur et le client peuvent se transmettre des informations à tout moment dans un intervalle de temps donné. WebSocket ne se limite pas à la communication Ajax (ou XHR), car la technologie Ajax nécessite que le client lance une requête, et le serveur WebSocket et le client peuvent se transmettre des informations ;

Ce qui est intelligent avec la technologie Ajax, c'est qu'il n'existe aucun moyen conçu pour l'utiliser. WebSocket est créé pour la cible spécifiée et utilisé pour envoyer des messages dans les deux sens.

2. Utilisation de l'API WebSocket
Concentrez-vous uniquement sur l'API côté client, car chaque langage côté serveur possède sa propre API. L'extrait de code ci-dessous ouvre une connexion, crée un écouteur d'événements pour la connexion, déconnecte la connexion, l'heure du message, renvoie le message au serveur et ferme la connexion.
CODE :

// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080'); 
// 打开Socket 
socket.onopen = function(event) { 
  // 发送一个初始化消息
  socket.send('I am the client and I\'m listening!'); 
  // 监听消息
  socket.onmessage = function(event) { 
    console.log('Client received a message',event); 
  }; 
  // 监听Socket的关闭
  socket.onclose = function(event) { 
    console.log('Client notified socket has closed',event); 
  }; 
  // 关闭Socket.... 
  //socket.close() 
};

WebSocket est un protocole de communication full-duplex sur une seule connexion TCP que HTML5 a commencé à fournir.
Dans l'API WebSocket, le navigateur et le serveur n'ont besoin que d'effectuer une action de prise de contact, puis un canal rapide est formé entre le navigateur et le serveur. Les données peuvent être transférées directement entre les deux.

Le navigateur envoie une demande au serveur pour établir une connexion WebSocket via JavaScript. Une fois la connexion établie, le client et le serveur peuvent échanger directement des données via la connexion TCP.

Après avoir obtenu la connexion Web Socket, vous pouvez envoyer des données au serveur via la méthode send() et accepter les données renvoyées par le serveur via l'événement onmessage.

L'API suivante est utilisée pour créer des objets WebSocket.

var socket = new WebSocket(url,[protocol]);
Le premier paramètre url dans le code ci-dessus spécifie l'URL du lien. Le deuxième paramètre protocole est facultatif et spécifie les sous-protocoles acceptables.

Propriétés WebSocket

Voici les propriétés de l'objet WebSocket. Supposons que nous utilisions le code ci-dessus pour créer un objet socket :
Socket.readyState L'attribut en lecture seule readyState représente l'état de la connexion, qui peut être les valeurs suivantes :
1. 0-Indique que la connexion n'a pas encore été établie. été établi.
2. 1-Indique que le lien a été établi et accessible.
3. 2-Indique que la connexion est en cours de fermeture.
4. 3-Indique que la connexion a été fermée ou que la connexion ne peut pas être ouverte.
Socket.bufferedAmount lecture seule butteredAmount Le nombre d'octets de texte UTF-8 qui ont été send() placés dans la file d'attente et en attente de transmission, mais qui n'ont pas encore été envoyés.

Événements WebSocket
Les éléments suivants sont des événements liés aux objets WebSocket. Supposons que nous utilisions le Socket créé :
Événement : Open Message Error Close
Programme de traitement des incidents : Socket.onopen Socket.onMessage Socket.onClose
Description : Connectez-vous pour créer des services d'acceptation client déclencheurs Données côté appareil Déclenché lorsque une erreur de communication se produit Déclenchée lorsque la connexion est fermée

Méthode WebSocket
Voici les méthodes pertinentes de l'objet WebSocket. Supposons que nous utilisions le code ci-dessus pour créer un objet Socket :

Méthode : Socket.send() Socket.close()
Description : Utiliser la connexion pour envoyer des données

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!