Une nouvelle fonctionnalité cool dans HTML5 est WebSockets, qui nous permet de parler au serveur sans demandes AJAX. Aujourd'hui, Bingo permettra à chacun d'exécuter WebSocket via le côté serveur de l'environnement PHP, de créer des clients et d'envoyer et de recevoir des informations côté serveur via le protocole WebSockets.
Que sont les lignes Web?
WebSockets est une technologie qui effectue une communication bidirectionnelle sur une interface (TCP) et un type de technologie push. Dans le même temps, WebSockets sera toujours basé sur la norme W3C.
Que remplacera les WebSockets? WebSockets peut remplacer le sondage long (PHP Server Push Technology), ce qui est un concept intéressant. Le client envoie une demande au serveur. Ensuite, une autre demande. Cela a ses avantages: réduire la latence sur l'une ou l'autre connexion et n'a pas besoin de créer une autre nouvelle connexion lorsqu'une connexion est déjà ouverte. Mais le retrait long n'est pas une technique de fantaisie, et il est toujours possible que des pauses de demande se produisent, donc une nouvelle connexion sera requise.
Certaines applications AJAX utilisent la technologie susmentionnée - qui est souvent attribuée à une faible utilisation des ressources.
Imaginez à quel point ce serait formidable si le serveur démarre et envoie des données aux clients qui souhaitent 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 tutoriel se concentrera davantage sur la création du client plutôt que sur l'exécution du serveur.
J'utilise XAMPP basé sur Windows 7 pour implémenter l'exécution de PHP localement. PHPWEBSOCKETS est un serveur PHP WebSocket. (D'après mon expérience, il y a quelques problèmes mineurs avec cette version. J'ai apporté quelques modifications et téléchargé le fichier source à partager avec vous.) Les différentes versions suivantes peuvent également implémenter WebSocket. Autres versions.
Jwebsocket (Java)
Web-socket-ruby (Ruby)
Socket io-node (node.js)
Démarrer le serveur Apache
Étape 2: Modifier les URL et les ports
Selon votre installation précédente, modifiez le serveur, ce qui suit est un exemple dans setup.class.php:
| Fonction publique __construct ($ host = 'localhost', $ port = 8000, $ max = 100) {{ $ this-> createSocket ($ host, $ port); } |
Parcourez le fichier et apportez des modifications le cas échéant.
Étape 3: Commencez à créer un client
Voici mon fichier client.php:
| <! Doctype html> <html> <adal> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </cript> <Title> Client de WebSockets </TITME> </ head> <body> <div id = "wrapper"> <div id = "conteneur"> <h1> Client de WebSockets </h1> <div id = "chatlog"> </div> <! - #chatlog -> <p id = "Exemples"> Par exemple, essayez 'Hi', 'Name', 'Age', 'Today' </p> <input id = "text" type = "text" /> <Button id = "Disconnect"> Déconnecter </fontificateur> </div> <! - #Container -> </div> </docy> </html> |
Nous avons créé le modèle de base: un conteneur de journal de chat, une boîte d'entrée d'entrée et un bouton déconnecté.
Étape 4: Ajoutez du CSS
Il n'y a pas de code fantaisie, traitez simplement le style de la balise.
corps { |
Étape 5: WebSocket
Les événements essayons d'abord de comprendre le concept d'é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 un objet WebSocket
var socket = new WebSocket (& ldquo; ws: // localhost: 8000 / socket / server / startDaemon.php & rdquo;);
Puis détecter l'événement comme suit
| socket.onopen = function () { alerte ("Socket a été ouvert!"); } |
Faites cela lorsque nous recevons le message:
| socket.onMessage = fonction (msg) { alerte (msg); // génial! } |
Mais nous essayons toujours d'éviter d'utiliser Alert, et maintenant nous pouvons intégrer ce que nous avons appris dans la page client.
Étape 6: JavaScript
Tout d'abord, nous mettons le code dans le document. S'il n'est pas pris en charge, nous ajouterons un lien à la page du navigateur Chrome.
| $ (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 qui prend en charge WebSockets. Et <a href = "google'> http://www.google.com/chrome"> google chrome </a>? </ p > '). APPENDTO (' # Container '); }autre{ // L'utilisateur a des webockets connecter(); fonction connect () { // Le code de fonction de connexion est ci-dessous } }); |
Comme vous pouvez le voir, si le navigateur de l'utilisateur prend en charge WebSocket, nous exécuterons la fonction connect (). Voici la fonction principale, nous commencerons à créer des événements ouverts, fermés et recevoir.
Nous définirons l'URL sur notre serveur.
| socket var; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php"; |
Vous pouvez découvrir pourquoi il n'y a pas de HTTP dans l'URL? Eh bien, oui, il s'agit d'une URL WebSocket qui utilise un protocole différent.
Continuons à compléter la fonction Connect () ci-dessous. Nous créons un WebSocket et passons les informations à la fonction Message (), et nous l'expliquerons plus tard. Nous créons nos fonctions onopen, onMessage et OnClose. Il convient de noter que nous fournissons à l'utilisateur l'état du port, ce qui n'est pas nécessaire, mais nous le mettons principalement pour la commodité du débogage.
| Connexion = 0 Ouvert = 1 Fermé = 2 fonction connect () { essayer{ socket var; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php"; var socket = new WebSocket (hôte); Message ('<p class = "Event"> Statut de socket:' + socket.readystate); socket.onopen = function () { message ('<p class = "Event"> Statut de socket:' + socket.readystate + '(ouvert)'); } socket.onMessage = fonction (msg) { message ('<p class = "message"> reçu:' + msg.data); } socket.Onclose = function () { Message ('<p class = "Event"> Statut de socket:' + socket.readystate + '(fermé)'); } } catch (exception) { message ('<p> error' + exception); } } |
La fonction Message () est simple, elle remplit le texte que nous voulons présenter à l'utilisateur dans le conteneur du journal de chat. Nous créons la classe appropriée pour la balise paragraphe (<p>) dans la fonction de l'événement de socket, et nous n'avons qu'une seule balise de fin de paragraphe dans la fonction de message.
| Message de fonction (msg) { $ ('# chatlog'). append (msg + '</p>'); } |
Résultats actuels
Si vous avez suivi le tutoriel ci-dessus étape par étape, c'est génial, nous avons créé des modèles HTML / CSS, créé et établi des connexions WebSocket et avons maintenu le progrès de l'utilisateur à mettre à jour en créant des connexions.
Étape 7: Envoyez des données
Maintenant, nous avons le bouton Soumettre, mais nous devons toujours écouter l'utilisateur en appuyant sur l'événement du clavier et exécuter la fonction d'envoi.
| $ ('# text'). Keypress (fonction (événement) { if (event.KeyCode == '13') { envoyer(); } }); |
Voici la fonction Send ():
| function Send () { var text = $ ('# text'). Val (); if (text == "") { message ('<p class = "avertissement"> Veuillez saisir un message'); retour ; } essayer{ socket.send (texte); message ('<p class = "event"> envoyé:' + texte) } catch (exception) { Message ('<p class = "Warning"> Erreur:' + Exception); } $ ('# text'). Val (""); } |
Ici, nous avons besoin:
socket.send ();
Le code supplémentaire fait le travail suivant: détecter si l'utilisateur n'a fait que cliquer sur Retour, effacer la zone d'entrée d'entrée et exécuter la fonction Message ().
Étape 8: Fermer la prise
L'opération pour fermer la prise est assez simple, il suffit d'ajouter un événement de clic au bouton Disconnect à écouter.
| $ ('# déconnecter'). Cliquez sur (fonction () { socket.close (); }); |
Terminer le code JavaScript
| $ (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 qui prend en charge WebSockets. Et <a href = "google'> http://www.google.com/chrome"> google chrome </a>? </ p > '). APPENDTO (' # Container '); }autre{ // L'utilisateur a des webockets connecter(); fonction connect () { socket var; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php"; essayer{ var socket = new WebSocket (hôte); Message ('<p class = "Event"> Statut de socket:' + socket.readystate); socket.onopen = function () { message ('<p class = "Event"> Statut de socket:' + socket.readystate + '(ouvert)'); } socket.onMessage = fonction (msg) { message ('<p class = "message"> reçu:' + msg.data); } socket.Onclose = function () { Message ('<p class = "Event"> Statut de socket:' + socket.readystate + '(fermé)'); } } catch (exception) { message ('<p> error' + exception); } function Send () { var text = $ ('# text'). Val (); if (text == "") { message ('<p class = "avertissement"> Veuillez saisir un message'); retour ; } essayer{ socket.send (texte); message ('<p class = "event"> envoyé:' + texte) } catch (exception) { message ('<p class = "avertissement">'); } $ ('# text'). Val (""); } Message de fonction (msg) { $ ('# chatlog'). append (msg + '</p>'); } $ ('# text'). Keypress (fonction (événement) { if (event.KeyCode == '13') { envoyer(); } }); $ ('# déconnecter'). Cliquez sur (fonction () { socket.close (); }); } // End Connect } // fin autre }); |
Étape 9: Lors de l'exécution du serveur WebSocket, nous devons saisir certaines lignes de commande. Cliquez sur le bouton "Shell" dans le panneau de configuration XAMPP et entrez:
| php -q path vers server.php |
Vous avez maintenant le serveur WebSocket en cours d'exécution!
La mission est terminée!
Lorsque la page est lue, une tentative sera faite pour créer une connexion WebSocket, et l'utilisateur peut ensuite saisir les informations et les recevoir du serveur. Merci pour votre patience dans la lecture de ce tutoriel. Vous pouvez en savoir plus sur les derniers développements de HTML5 WebSocket via l'API WebSocket.