Vous faire connaître WebSocket en HTML5

Découvrez 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 côté client, côté serveur. Et il existe une excellente API tierce appelée Socket.IO.

1. Qu'est-ce que l'API WebSocket en HTML5 ?

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 en HTML5

Concentrez-vous uniquement sur l'API côté client, car chaque langage côté serveur a 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.

Le code est le suivant :

// 创建一个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()
};

Jetons un coup d'œil à l'extrait d'initialisation ci-dessus. Le paramètre est l'URL et ws représente le protocole WebSocket. Les méthodes onopen, onclose et onmessage connectent les événements à l'instance Socket. Chaque méthode fournit un événement pour représenter l'état du Socket.

L'événement onmessage fournit un attribut data, qui peut contenir la partie Body du message. La partie corps du message doit être une chaîne qui peut être sérialisée/désérialisée afin de transférer plus de données.

La syntaxe de WebSocket est très simple, et l'utilisation de WebSockets est incroyablement simple... sauf si le client ne prend pas en charge WebSocket. Le navigateur IE ne prend actuellement pas en charge la communication WebSocket. Si votre client ne prend pas en charge la communication WebSocket, vous pouvez utiliser plusieurs options de secours :

Technologie Flash - Flash peut fournir un remplacement simple. L'inconvénient le plus évident de l'utilisation de Flash est que Flash n'est pas installé sur tous les clients et que certains clients, tels que l'iPhone/iPad, ne prennent pas en charge Flash.

Technologie d'interrogation longue AJAX - L'utilisation d'interrogations longues AJAX pour simuler WebSocket est présente dans l'industrie depuis un certain temps. C'est une technique viable, mais elle n'optimise pas le message envoyé. Autrement dit, c’est une solution, mais pas la meilleure technique.

Étant donné que les navigateurs actuels tels que IE ne prennent pas en charge WebSocket, que devons-nous faire si nous devons fournir le traitement des événements WebSocket, la transmission de retour et utiliser une API unifiée côté serveur ? Heureusement, Guillermo Rauch a créé la technologie Socket.IO.

3. WebSocket avec Socket.IO

Socket.IO est une API WebSocket créée par Guillermo Rauch, directeur de la technologie de LearnBoost et scientifique en chef de LearnBoost Labs. Socket.IO utilise la fonction de détection pour déterminer s'il convient d'établir une connexion WebSocket, une connexion AJAX à interrogation longue ou Flash, etc. Les applications en temps réel peuvent être créées rapidement. Socket.IO fournit également une API NodeJS, qui ressemble beaucoup à l'API client.

[Recommandations associées]

1. Tutoriel vidéo en ligne h5 gratuit

2. Manuel de la version complète HTML5

.

3.Tutoriel vidéo html5 original php.cn

4 Un exemple de la façon de dessiner le drapeau rouge cinq étoiles avec h5Canvas<.>