Share
Une des nouvelles fonctionnalités les plus intéressantes de HTML5 est WebSockets, qui nous permet de parler au serveur sans utiliser de requêtes AJAX. Dans ce didacticiel, nous allons passer en revue le processus d’exécution d’un serveur WebSocket en PHP, puis créer un client pour lui envoyer et recevoir des messages via le protocole WebSocket..
WebSockets est une technique de communication bidirectionnelle sur un socket (TCP), un type de technologie PUSH. Pour le moment, il est encore en cours de standardisation par le W3C; cependant, les dernières versions de Chrome et Safari prennent en charge WebSockets.
Les Websockets peuvent remplacer les longues interrogations. C'est un concept intéressant. le client envoie une demande au serveur - maintenant, au lieu de répondre au serveur avec des données qu'il n'a peut-être pas, il garde la connexion ouverte jusqu'à ce que les données récentes et à jour soient prêtes à être envoyées - le client reçoit ensuite cette et envoie une autre demande. Cela présente des avantages: la latence réduite en est un, puisqu’une connexion déjà ouverte ne nécessite pas l’établissement d’une nouvelle connexion. Cependant, les longues interrogations ne sont pas vraiment une technologie sophistiquée: il est également possible pour une requête d'expiration, une nouvelle connexion sera de toute façon nécessaire..
De nombreuses applications Ajax utilisent ce qui précède - ceci peut souvent être attribué à une mauvaise utilisation des ressources.
Ne serait-il pas formidable que le serveur puisse se réveiller un matin et envoyer ses données aux clients souhaitant écouter sans une sorte de connexion pré-établie? Bienvenue dans le monde de la technologie PUSH!
Ce tutoriel portera plus sur la construction du client que sur la mise en œuvre du serveur.
J'utilise XAMPP sur Windows 7 pour exécuter le serveur PHP localement. Prenez une copie de phpwebsockets qui est un serveur WebSocket en PHP. (Remarque: j'ai eu quelques problèmes avec cette version, j'ai apporté quelques modifications et je vais l'inclure dans les fichiers sources) Il existe différentes implémentations de WebSocket; si un ne fonctionne pas, vous pouvez en essayer un autre ou simplement continuer avec le tutoriel.
Modifiez le serveur en fonction de votre configuration, par exemple dans setup.class.php:
fonction publique __construct ($ host = 'localhost', $ port = 8000, $ max = 100) $ this-> createSocket ($ host, $ port);
Parcourez les fichiers et apportez les modifications nécessaires.
Permet d’obtenir un modèle de base; Voici mon fichier client.php:
WebSockets Client WebSockets Client
par exemple. essayez 'salut', 'nom', 'age', 'aujourd'hui'
Donc, dans ce code, nous créons un modèle simple: nous avons une boîte pour le journal de discussion, une zone de saisie et un bouton de déconnexion..
Rien d'extraordinaire, il suffit d'espacer quelques éléments.
body font-family: Arial, Helvetica, sans serif; #container border: 5px solid grey; largeur: 800px; marge: 0 auto; rembourrage: 10px; #chatLog padding: 5px; bordure: 1px noir uni; #chatLog p margin: 0; .event color: # 999; .warning font-weight: bold; couleur: #CCC;
Essayons d’abord de comprendre l’idée des événements WebSocket.
Nous utiliserons trois événements:
Mais comment pouvons-nous mettre en œuvre cette?
Commencez par créer un objet WebSocket
Accentsconagua
var socket = new WebSocket ("ws: // localhost: 8000 / socket / server / startDaemon.php"); Et vérifier les événements est aussi simple que:
socket.onopen = function () alert ("Le socket a été ouvert!"); Mais qu'en est-il lorsque nous recevons un message?
socket.onmessage = function (msg) alert (msg); //Impressionnant!
Cependant, évitons d’utiliser des boîtes d’alerte et intégrons ce que nous avons appris dans la page client..
Ok, alors commençons. Tout d'abord, nous plaçons notre code dans la fonction de préparation de documents de jQuery, puis nous vérifions si l'utilisateur dispose d'un navigateur compatible WebSockets. Si ce n'est pas le cas, nous ajoutons un lien vers Chrome dans le code HTML..
$ (document) .ready (function () if (! ("WebSocket" dans la fenêtre))) $ ('# chatLog, entrée, bouton, #examples'). fadeOut ("fast"); $ ('Oh non, vous avez besoin d'un navigateur prenant en charge WebSockets. Qu'en est-il de Google Chrome?
') .appendTo (' # conteneur '); else // L'utilisateur a WebSockets connect (); function connect () // le code de la fonction de connexion est ci-dessous); Comme vous pouvez le constater, si l'utilisateur dispose de WebSockets, nous appelons une fonction connect (). C’est le cœur de la fonctionnalité: nous allons commencer par les événements open, close et receive.
Nous allons définir l'URL de notre serveur
prise var; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php";
Attendez, où est le http dans cette URL? Ah oui, c'est une URL WebSocket, donc elle utilise un protocole différent. Voici une ventilation des morceaux de notre URL:
Continuons avec notre fonction connect (). Nous allons mettre notre code dans un bloc try / catch; donc si quelque chose ne va pas, nous pouvons en informer l'utilisateur. Nous créons un nouveau WebSocket et passons le message à une fonction de message que j'expliquerai plus tard. Nous créons nos fonctions onopen, onmessage et onclose. Notez que nous montrons également à l’utilisateur le statut du socket; ce n'est pas nécessaire, mais je l'inclus ici car cela peut être utile pour le débogage.
function connect () try var socket; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php"; var socket = nouveau WebSocket (hôte); message('Socket Status: '+ socket.readyState); socket.onopen = function () message ('
Statut de la prise: '+ socket.readyState +' (ouvert) '); socket.onmessage = function (msg) message ('
Reçu: '+ msg.data); socket.onclose = function () message ('
Statut de la prise: '+ socket.readyState +' (Fermé) '); catch (exception) message ('
Erreur '+ exception);
La fonction message () est assez simple, elle prend du texte que nous voulons montrer à l'utilisateur et l'ajoute au chatLog. Nous créons la classe appropriée pour les balises de paragraphe dans les fonctions d’événement socket, c’est pourquoi il n’existe qu’une seule balise de paragraphe de fermeture dans la fonction de message..
message de fonction (msg) $ ('# chatLog'). append (msg + ''); Si vous avez suivi jusqu'à présent, bravo! Nous avons réussi à créer un modèle HTML / CSS de base, à créer et à établir une connexion WebSocket et à maintenir l'utilisateur à jour au fur et à mesure de l'avancement de la connexion..
Maintenant, plutôt que d'avoir un bouton d'envoi, nous pouvons détecter le moment où l'utilisateur appuie sur la touche retour sur son clavier et exécuter la fonction d'envoi. Le «13» que vous voyez ci-dessous est la clé ASCII du bouton d'entrée..
$ ('# texte'). pression du clavier (fonction (événement) if (code événement.key == '13') send ();); Et voici la fonction send ():
function send () var text = $ ('# text'). val (); if (text == "") message ('Veuillez entrer un message '); revenir ; try socket.send (text); message('
Envoyé: '+ texte) catch (exception) message ('
Erreur: '+ exception); $ ('# texte'). val ("");
Rappelez-vous que ce que vous voyez ci-dessus peut être un morceau de code volumineux, mais en réalité, le code dont nous avons réellement besoin est le suivant:
socket.send (); // Merci JavaScript
Le code supplémentaire fait un certain nombre de choses: détecter si l'utilisateur n'a rien saisi mais toujours appuyer sur Entrée, effacer le champ de saisie et appeler les fonctions de message.
La fermeture du socket est assez simple: attachez un gestionnaire de clic à notre bouton de déconnexion et nous avons terminé!
$ ('# disconnect'). click (function () socket.close ();); $ (document) .ready (function () if (! ("WebSocket" dans la fenêtre))) $ ('# chatLog, entrée, bouton, #examples'). fadeOut ("fast"); $ ('Oh non, vous avez besoin d'un navigateur prenant en charge WebSockets. Qu'en est-il de Google Chrome?
') .appendTo (' # conteneur '); else // L'utilisateur a WebSockets connect (); function connect () var socket; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php"; try var socket = new WebSocket (hôte); message('Socket Status: '+ socket.readyState); socket.onopen = function () message ('
Statut de la prise: '+ socket.readyState +' (ouvert) '); socket.onmessage = function (msg) message ('
Reçu: '+ msg.data); socket.onclose = function () message ('
Statut de la prise: '+ socket.readyState +' (Fermé) '); catch (exception) message ('
Erreur '+ exception); function send () var texte = $ ('# texte'). val (); if (text == "") message ('
Veuillez entrer un message '); revenir ; try socket.send (text); message('
Envoyé: '+ texte) catch (exception) message ('
'); $ ('# texte'). val (""); message de fonction (msg) $ ('# chatLog'). append (msg + '
'); $ ('# texte'). pression du clavier (fonction (événement) if (code événement.key == '13') send ();); $ ('# disconnect'). click (function () socket.close ();); // Fin de connexion // Fin else); Nous aurons besoin d'un accès en ligne de commande. Heureusement, XAMPP a une option de shell très pratique. Cliquez sur 'Shell' sur le panneau de contrôle de XAMPP et tapez:
php -q path \ to \ server.php
Vous avez maintenant démarré un serveur WebSocket!
Une fois la page chargée, une connexion WebSocket tentera d’être établie (essayez d’éditer le code pour que l’utilisateur dispose de l’option de connexion / déconnexion). Ensuite, l'utilisateur peut entrer des messages et recevoir des messages du serveur.
Merci d'avoir lu; J'espère que vous avez apprécié ce tutoriel! N'oubliez pas que les WebSockets peuvent être aussi excitants que possible. Vous pouvez vous référer ici pour vous tenir au courant de l'API WebSocket du W3C.
Si vous voulez faire plus avec HMTL5, consultez la vaste sélection d'éléments de code HTML5 sur Envato Market. Il existe des lecteurs audio, des galeries vidéo réactives, des cartes interactives et bien plus encore..
Éléments de code HTML5 sur Envato Market
