Introduction à l'API HTML5 WebSockets

HTML5 présente de nombreuses nouvelles API, y compris WebSocket. WebSocket permet aux développeurs de créer des applications en temps réel puissantes en établissant des connexions de socket entre le navigateur et le serveur. En d'autres termes, en raison de l'existence de connexions persistantes, les clients et les serveurs peuvent échanger des données à tout moment. Ce tutoriel expliquera comment créer une application Web en temps réel à l'aide de WebSocket.

Points clés

• L'API WebSocket introduite dans HTML5 permet aux développeurs de créer des applications en temps réel en établissant des connexions de socket persistantes entre le navigateur et le serveur, permettant aux clients et aux serveurs d'échanger des données à tout moment.
• Il est très simple d'ouvrir une connexion WebSocket, il vous suffit d'appeler le constructeur WebSocket (). La connexion reste ouverte jusqu'à ce que le client ou le serveur choisit de le fermer, réduisant ainsi le fardeau sur le serveur et fournissant la meilleure solution pour les applications de faible latence.
• Les données binaires peuvent être envoyées et reçues sous la forme d'un blob ou d'un arraybuffer à l'aide de la méthode Connection.Send (). Le message reçu peut également être une chaîne ou des données binaires, reçues sous la forme d'un blob ou d'un arraybuffer.
• La création d'applications en temps réel à l'aide de WebSocket nécessite une implémentation côté serveur et peut être effectuée en utilisant diverses technologies (telles que Node.js, Java, .NET, Ruby ou C). L'API WebSocket peut être utilisée pour créer des applications puissantes en temps réel telles que les mises à jour sociales en temps réel, les jeux multijoueurs HTML5 et les applications de chat en ligne.

Question

Dans une application en temps réel, la connexion entre le serveur et le client doit être persistante. Par conséquent, pour créer l'illusion que le serveur initie la transmission, un sondage long est généralement utilisé. WebSocket résout ce problème en établissant une connexion de socket persistante entre le client et le serveur. Une fois la connexion établie, elle restera ouverte jusqu'à ce que le client ou le serveur souhaite le fermer. Il réduit considérablement le fardeau du serveur et convient le mieux aux applications à faible latence.

débutant

Il est très facile d'ouvrir une connexion WebSocket. Il vous suffit d'appeler le constructeur WebSocket () pour créer la connexion.

<code class="language-javascript">var connection = new WebSocket("ws://localhost:8787", ['soap', 'json']);</code>

WS: et WSS: sont les modèles URL pour les connexions WebSocket normales et sécurisées, respectivement. Le deuxième paramètre est utilisé pour définir le nom de sous-protocole, qui peut être un tableau de chaîne ou une chaîne. Cependant, le serveur n'acceptera qu'un seul sous-protocole. Pendant le cycle de vie d'une connexion, le navigateur recevra plusieurs événements tels que l'ouverture de la connexion, la réception de messages et la fermeture de la connexion. Pour gérer ces événements, utilisez le code suivant:

<code class="language-javascript">var connection = new WebSocket("ws://localhost:8787", ['soap', 'json']);</code>

Une fois la connexion ouverte, le navigateur utilisera Connection.Send () pour envoyer un message au serveur. Si une erreur est rencontrée, le code ci-dessus l'enregistre simplement. Si le serveur envoie un message au navigateur à tout moment, le rappel OnMessage sera déclenché. Le gestionnaire d'événements obtient un objet d'événement dont l'attribut de données contient le message reçu. La méthode Connection.Send () peut également être utilisée pour envoyer des données binaires. Pour ce faire, vous pouvez utiliser Blob ou ArrayBuffer. Le code suivant montre comment utiliser ArrayBuffer pour envoyer des images dessinées sur la toile vers le serveur.

<code class="language-javascript">var connection = new WebSocket("ws://localhost:8787", 'json');
connection.onopen = function() {
  connection.send('Hello, Server!!'); // 连接打开后向服务器发送消息。
};
connection.onerror = function(error) {
  console.log('Error Logged: ' + error); // 记录错误
};
connection.onmessage = function(e) {
  console.log('Received From Server: ' + e.data); // 记录接收到的消息
};</code>

De même, le message reçu peut être une chaîne ou des données binaires. Les données binaires peuvent être reçues sous forme de blob ou d'arraybuffer.

Application WebSocket simple

Pour créer une application exécutable, vous avez également besoin d'une implémentation côté serveur. Vous pouvez utiliser Node.js, Java, .NET, Ruby ou C pour créer des implémentations côté serveur. Cette section vous montrera comment créer une application simple à l'aide de WebSocket. L'exemple d'application permet à l'utilisateur de poser des questions spécifiques au serveur. L'implémentation côté serveur se fait à l'aide du framework Java Jwebsocket sur Windows 7. Par conséquent, pour configurer l'environnement, suivez ces étapes simples. Je suppose que vous avez installé le dernier JDK (JDK 7) sur votre PC Windows 7.

Étape 1

Accédez à la page de téléchargement de Jwebsocket et téléchargez le premier fichier zip marqué comme le serveur.

Étape 2

Décompressez les archives et placez-la quelque part en c:. Ensuite, créez une nouvelle variable d'environnement appelée jwebsocket_home qui fait référence au répertoire racine de l'installation de Jwebsocket. Ceci est le chemin vers le dossier JWebSocket-1.0. Ajoutez le pot suivant à votre chemin de classe:

• jwebsocket_home / libs / jwebsocketserver-1.0.jar
• jwebsocket_home / libs / jwebsocketserverapi-1.0.jar
• jwebsocket_home / libs / jwebsocketcommon-1.0.jar

Étape 3

Créez un nouveau fichier source Java et nommez-le socketListener.java. Ajoutez le code suivant à ce fichier. (La partie du code Java est omise ici, car l'article est trop long et ne correspond pas à l'objectif pseudo-original, alors gardez simplement la description logique principale)

Étape 4

compiler socketListener.java et démarrer le serveur à l'aide de la commande java socketListener.

Étape 5

Maintenant que vous avez terminé l'implémentation côté serveur, il est temps de créer un client qui interagira avec le serveur. (Les pièces HTML et JavaScript sont omises ici, car l'article est trop long et ne correspond pas à l'objectif pseudo-original, vous pouvez donc simplement garder la description logique principale)

Conclusion

À l'aide de l'API WebSocket, vous pouvez créer des applications en temps réel très puissantes. Cependant, n'oubliez pas que WebSocket permet une communication inter-domaine. Par conséquent, vous ne devez communiquer qu'avec les serveurs et les clients en qui vous avez confiance. Voici quelques exemples d'applications que vous pouvez créer en utilisant cette API:

• Mise à jour sociale en temps réel
• HTML5 Multiplayer Game
• Application de chat en ligne

Consultez le réseau de développeurs Mozilla pour plus d'informations sur l'API WebSocket. (La partie FAQ est omise ici, car l'article est trop long et ne correspond pas à l'objectif pseudo-original, alors gardez simplement la description logique de base)

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!