Tutoriel d'utilisation de base de HTML5 WebSockets

Auteur：Eve Cole Date de mise à jour：2010-10-07 18:43:37

L'une des nouvelles fonctionnalités intéressantes de HTML5 est les WebSockets, qui nous permettent de communiquer avec le serveur sans requêtes AJAX. Aujourd'hui, Bin Go vous permettra d'exécuter WebSocket via le côté serveur de l'environnement Php, de créer un client et d'envoyer et de recevoir des informations côté serveur via le protocole WebSockets.

Que sont les WebSockets ?

WebSockets est une technologie de communication bidirectionnelle sur une interface (TCP), de type technologie PUSH. Dans le même temps, les WebSockets seront toujours basés sur la norme W3C. Jusqu'à présent, les dernières versions des navigateurs Chrome et Safari prennent déjà en charge les WebSockets.

Que remplaceront les WebSockets ? Les WebSockets peuvent remplacer le Long Polling (technologie push du serveur PHP), ce qui est un concept intéressant. Le client envoie une requête au serveur. Désormais, le serveur ne répondra pas aux données qui ne sont pas prêtes. Il maintiendra la connexion ouverte jusqu'à ce que les dernières données soient prêtes à être envoyées. Après cela, le client recevra les données et en enverra une autre. demande. . Cela a ses avantages : cela réduit la latence sur l’une ou l’autre connexion et élimine le besoin de créer une nouvelle connexion lorsqu’une est déjà ouverte. Mais le Long-Polling n’est pas une technologie sophistiquée. Il est toujours possible qu’une suspension de requête se produise, une nouvelle connexion devra donc être établie.

Certaines applications AJAX utilisent les techniques ci-dessus – cela est souvent attribué à une faible utilisation des ressources.

Imaginez, ce serait formidable si le serveur démarrait tout seul le matin et envoyait des données aux clients qui souhaitent les recevoir sans avoir à configurer certains ports de connexion à l'avance ! Bienvenue dans le monde de la technologie PUSH !

Étape 1 : Obtenez le serveur WebSocket

Ce didacticiel se concentrera davantage sur la création de clients plutôt que sur l'exécution côté serveur et d'autres opérations.

J'utilise XAMPP sur Windows 7 pour exécuter PHP localement. phpwebsockets est un serveur PHP WebSocket. (D'après mon expérience, cette version présente quelques problèmes mineurs. J'y ai apporté quelques modifications et téléchargé les fichiers sources pour les partager avec tout le monde.) Les différentes versions ci-dessous peuvent également implémenter WebSocket. Si l'une ne fonctionne pas, vous pouvez essayer d'autres versions. Ou continuez avec le tutoriel ci-dessous.

jWebSocket (Java)

web-socket-ruby (rubis)

Nœud IO de socket (node.js)

Démarrez le serveur Apache

Étape 2 : Modifier les URL et les ports

Modifiez le serveur en fonction de votre installation précédente. Voici un exemple de setup.class.php :

fonction publique __construct($host='localhost',$port=8000,$max=100)
{
$this->createSocket($hôte,$port);
}

Parcourez le fichier et apportez des modifications si nécessaire.

Étape 3 : Commencez à créer le client

Créons le modèle de base. Voici mon fichier client.php :

<!DOCTYPEhtml>
<html>
<tête>
<scriptsrc=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<titre>Client WebSockets</titre>
</tête>
<corps>
<div id="wrapper">
<div id="conteneur">
<h1>Client WebSockets</h1>
<div id="chatLog">
</div>
<p id="examples">par exemple, essayez 'salut', 'nom', 'âge', 'aujourd'hui'</p>
<input id="text" type="text" />
<button id="disconnect">Déconnecter</button>
</div>
</div>
</corps>
</html>

Nous avons créé le modèle de base : un conteneur de journal de discussion, une zone de saisie et un bouton de déconnexion.

Étape 4 : Ajoutez du CSS

Il n'y a pas de code sophistiqué, il suffit de gérer le style de l'étiquette.

corps {
famille de polices : Arial, Helvetica, sans-serif ;
}
#récipient{
bordure : gris uni de 5 px ;
largeur : 800 px ;
marge : 0 automatique ;
remplissage : 10 px ;
}
#chatLog{
remplissage : 5 px ;
bordure : 1 px noir uni ;
}
#chatLog p {
marge : 0 ;
}
.événement{
couleur : #999 ;
}
.avertissement{
poids de la police : gras ;
couleur : #CCC ;
}

Étape 5 : WebSocket

Événements Essayons d’abord de comprendre le concept des événements WebSocket :

Événements WebSocket :

Nous utiliserons trois événements WebSocket :

onopen : lorsque l'interface est ouverte

onmessage : lorsqu'un message est reçu

onclose : lorsque l'interface est fermée

Comment y parvenir ?

Créez d’abord l’objet WebSocket

var socket = new WebSocket("ws://localhost:8000/socket/server/startDaemon.php");

Détectez ensuite l'événement comme suit

socket.onopen = fonction(){
alert("Le socket a été ouvert !");
}

Faites ceci lorsque nous recevons des informations :

socket.onmessage = fonction (msg) {
alert(msg); //Génial !
}

Mais nous essayons toujours d'éviter d'utiliser l'alerte, et nous pouvons désormais intégrer ce que nous avons appris dans la page client.

Étape 6 : Javascript

Nous mettons d’abord le code dans la fonction document.ready de jQuery , puis nous vérifions également si le navigateur de l’utilisateur prend en charge WebSocket. Si ce n'est pas pris en charge, nous ajouterons un lien vers la page Chrome.

Comme vous pouvez le voir, si le navigateur de l'utilisateur prend en charge WebSocket, nous exécuterons la fonction connect(). Voici la fonctionnalité de base, nous allons commencer à créer des événements d'ouverture, de fermeture et de réception.

Nous définirons l'URL sur notre serveur.

prise var ;
var host = "ws://localhost:8000/socket/server/startDaemon.php";

Vous constaterez peut-être qu'il n'y a pas de http dans l'URL ? Eh bien, oui, il s'agit d'une URL WebSocket, utilisant un protocole différent.

Continuons avec la fonction connect(). Nous mettons le code dans un bloc try/catch afin que s'il y a un problème avec le code, nous puissions en informer l'utilisateur. Nous créons un WebSocket et transmettons les informations à la fonction message(), qui sera expliquée plus tard. Nous créons nos fonctions onopen, onmessage et onclose. Il convient de noter que nous fournissons l'état du port à l'utilisateur. Cela n'est pas obligatoire, mais nous le mettons principalement pour faciliter le débogage.

CONNEXION = 0
OUVERT = 1
FERMÉ = 2
fonction connecter(){
essayer{
prise var ;
var host = "ws://localhost:8000/socket/server/startDaemon.php";
var socket = new WebSocket (hôte);
message('<p class="event">Statut du socket : '+socket.readyState);
socket.onopen = fonction(){
message('<p class="event">Statut du socket : '+socket.readyState+' (ouvert)');
}
socket.onmessage = fonction (msg) {
message('<p class="message">Reçu : '+msg.data);
}
socket.onclose = fonction(){
message('<p class="event">Statut du socket : '+socket.readyState+' (Fermé)');
}
} capture(exception){
message('<p>Erreur'+exception);
}
}

La fonction message() est très simple, elle remplit le conteneur du journal de discussion avec le texte que nous souhaitons afficher à l'utilisateur. Nous créons la classe appropriée pour la balise paragraphe (<p>) dans la fonction d'événement socket, et nous n'avons qu'une balise de fermeture de paragraphe dans la fonction message.

message de fonction (msg) {
$('#chatLog').append(msg+'</p>');
}

Résultats actuels

Si vous avez suivi le didacticiel ci-dessus étape par étape, parfait, nous avons créé le modèle HTML/CSS , créé et établi la connexion Websocket et tenu à jour la progression de l'utilisateur en créant la connexion.

Étape 7 : Envoyer des données

Nous avons maintenant un bouton de soumission, mais nous devons également surveiller l'événement lorsque l'utilisateur appuie sur le clavier et exécute la fonction d'envoi. Le « 13 » ci-dessous est le code ASCII correspondant à la touche Entrée.

$('#text').keypress(function(event) {
si (event.keyCode == '13') {
envoyer();
}
});

Voici la fonction send() :

fonction envoyer(){
var texte = $('#text').val();
si(text==""){
message('<p class="warning">Veuillez saisir un message');
retour ;
}
essayer{
socket.send(texte);
message('<p class="event">Envoyé : '+texte)
} capture(exception){
message('<p class="warning"> Erreur :' + exception);
}
$('#text').val("");
}

Ci-dessous, nous avons besoin de :

socket.send();

Le code supplémentaire effectue les opérations suivantes : détecte si l'utilisateur clique sur Retour après n'avoir rien saisi, efface la zone de saisie et exécute la fonction message().

Étape 8 : Fermer le socket

La fermeture du Socket est assez simple, il suffit d'ajouter un écouteur d'événement de clic pour le bouton de déconnexion.

$('#disconnect').click(function(){
socket.close();
});

Code JavaScript complet

$(document).ready(function() {
if(!("WebSocket" dans la fenêtre)){
$('#chatLog, entrée, bouton, #examples').fadeOut("rapide");
$('<p>Oh non, vous avez besoin d'un navigateur prenant en charge WebSockets. Que diriez-vous de <a href=" Google'>http://www.google.com/chrome">Google Chrome</a> ?</p >').appendTo('#conteneur');
}autre{
//L'utilisateur dispose de WebSockets
connecter();
fonction connecter(){
prise var ;
var host = "ws://localhost:8000/socket/server/startDaemon.php";
essayer{
var socket = new WebSocket (hôte);
message('<p class="event">Statut du socket : '+socket.readyState);
socket.onopen = fonction(){
message('<p class="event">Statut du socket : '+socket.readyState+' (ouvert)');
}
socket.onmessage = fonction (msg) {
message('<p class="message">Reçu : '+msg.data);
}
socket.onclose = fonction(){
message('<p class="event">Statut du socket : '+socket.readyState+' (Fermé)');
}
} capture(exception){
message('<p>Erreur'+exception);
}
fonction envoyer(){
var texte = $('#text').val();

si(text==""){
message('<p class="warning">Veuillez saisir un message');
retour ;
}
essayer{
socket.send(texte);
message('<p class="event">Envoyé : '+texte)
} capture(exception){
message('<p class="avertissement">');
}
$('#text').val("");
}
message de fonction (msg) {
$('#chatLog').append(msg+'</p>');
}
$('#text').keypress(function(event) {
si (event.keyCode == '13') {
envoyer();
}
});
$('#disconnect').click(function(){
socket.close();
});
}//Fin de la connexion
}//Fin sinon
});

Étape 9 : Nous devons saisir quelques lignes de commande pour exécuter le serveur WebSocket. XAMPP fournit des options de shell plus pratiques. Cliquez sur le bouton 'shell' du panneau de configuration XAMPP et saisissez :

php -q cheminversserveur.php

Vous disposez désormais d’un serveur WebSocket en cours d’exécution !

Vous avez terminé !

Lorsque la page est lue, une tentative est faite pour créer une connexion WebSocket, et l'utilisateur peut alors saisir des informations et recevoir des informations du serveur. Merci pour votre patience en lisant ce tutoriel. J'espère que vous en avez appris des connaissances utiles. HTML5 WebSocket est en effet passionnant ! Vous pouvez en savoir plus sur les derniers développements de HTML5 WebSocket via l'API WebSocket .