Introduction de l'article WebJX: Une nouvelle fonctionnalité cool dans HTML5 est WebSockets, qui nous permet de parler au serveur sans requêtes 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 bidirectionnel dans une interface (TCP)
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. Jusqu'à présent, les dernières versions de Chrome et Safari Browsers ont déjà pris en charge les lignes Web.
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. Maintenant, le serveur ne répondra pas aux données qui n'ont pas été préparées. Il gardera la connexion ouverte jusqu'à ce que les dernières données soient prêtes à être envoyées. Après cela, le client reçoit les données puis envoie 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 pour partager avec vous.) Les différentes versions suivantes peuvent également implémenter WebSocket. Si l'on ne peut pas être utilisé, vous pouvez essayer d'autres versions ou continuer à lire le tutoriel suivant.
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:
}
Parcourez le fichier et apportez des modifications le cas échéant.
Étape 3: Commencez à créer un client
Voici mon fichier client.php:
> <>
>
>
>
> Par exemple, essayez «salut», «nom», «âge», «aujourd'hui»>
> Déconnecter >>
</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
gris
}
Étape 5: événement WebSocket
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
Puis détecter l'événement comme suit
douille.
}
Faites cela lorsque nous recevons le message:
socket.msgmsg); //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.
$
fenêtre
$.
$.
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.
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. Voici un diagramme de panne d'URL: