Le meilleur didacticiel HTML5 WebSocket en 2024, dans ce didacticiel, vous pouvez apprendre propriété WebSocket,événement WebSocket,méthode WebSocket,instance WebSocket,pywebsocket d'installation,
HTML5 WebSocket est un début prévu par la communication full-duplex sur un seul protocole de connexion TCP.
Dans l'API WebSocket, le navigateur et le serveur juste pour faire une action de poignée de main, puis, entre le navigateur et le serveur sur la formation d'un fast-track. Vous pouvez transférer des données directement entre eux.
Navigateur envoie au serveur via JavaScript demande pour établir une connexion WebSocket, la connexion est établie, le client et le serveur peut être connecté directement à l'échange de données via TCP.
Lorsque vous obtenez la connexion Socket Web, vous pouvez envoyer des données au serveur via la méthodesend (), et de recevoir les données renvoyées par le serveur onmessageévénement.
L'API WebSocket suivante est utilisée pour créer des objets.
var Socket = new WebSocket(url, [protocal] );
Le code ci-dessus premier paramètre URL, spécifiez la connexion URL. Le deuxième paramètre est le protocole facultatif qui spécifie sous-protocole acceptable.
Ceux-ci sont l'objet attributs WebSocket. Supposons que nous utilisons le code ci-dessus pour créer un objet Socket:
propriété | description |
---|---|
Socket.readyState | Attribut de lecture seulereadyState indique l' état de connexion peut avoir les valeurs suivantes:
|
Socket.bufferedAmount | Attribut de lecture seulebufferedAmount a été envoyé () sont placés dans une file d' attente pour le transfert, mais n'a pas encore publié un UTF-8 octets de texte. |
Voici l'objet des événements WebSocket. Supposons que nous utilisons le code ci-dessus pour créer un objet Socket:
événement | Gestionnaire d'événements | description |
---|---|---|
ouvert | Socket.onopen | Déclenché lorsque la connexion est établie |
message | Socket.onmessage | Lorsque le client reçoit les données du serveur de déclenchement |
erreur | Socket.onerror | Elle est déclenchée en cas d'erreur de communication |
fermer | Socket.onclose | Déclenché lorsque la connexion fermée |
Voici l'objet de méthodes de WebSocket. Supposons que nous utilisons le code ci-dessus pour créer un objet Socket:
manière | description |
---|---|
Socket.send () | Utilisez la connexion pour envoyer des données |
Socket.close () | Fermer la connexion |
protocole Nature WebSocket est un protocole basé sur TCP.
Afin d'établir une connexion WebSocket, le navigateur client lance un serveur HTTP voudrais d'abord demander que cette demande et les requêtes HTTP habituelles, contient des informations d'en-tête supplémentaire, dans lequel les informations d'en-tête supplémentaire "Upgrade: WebSocket" indique que c'est un protocole d'application mise à niveau requête HTTP, le serveur analyse les informations d'en-tête supplémentaire est alors généré un message de réponse au client, client de connexion WebSocket et le serveur est établie, les deux parties peuvent, à travers le canal libre transmission reliant des informations, et ce lien Il persiste jusqu'à ce que le client ou côté serveur partie active pour fermer la connexion.
Actuellement, la plupart des navigateurs prennent en charge WebSocket () interfaces, vous pouvez essayer les exemples dans les navigateurs suivants: Chrome, Mozilla, Opera et Safari.
le contenu du fichier w3big_websocket
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>本教程(w3write.com)</title> <script type="text/javascript"> function WebSocketTest() { if ("WebSocket" in window) { alert("您的浏览器支持 WebSocket!"); // 打开一个 web socket var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function() { // Web Socket 已连接上,使用 send() 方法发送数据 ws.send("发送数据"); alert("数据发送中fr."); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert("数据已接收fr."); }; ws.onclose = function() { // 关闭 websocket alert("连接已关闭fr."); }; } else { // 浏览器不支持 WebSocket alert("您的浏览器不支持 WebSocket!"); } } </script> </head> <body> <div id="sse"> <a href="javascript:WebSocketTest()">运行 WebSocket</a> </div> </body> </html>
Avant d'exécuter le programme ci-dessus, nous avons besoin de créer un service support de WebSocket. De pywebsocket télécharger mod_pywebsocket, ou utilisez la commande git à télécharger:
git clone https://github.com/google/pywebsocket.git
soutien mod_pywebsocket environnement python nécessaire
mod_pywebsocket d'un Apache HTTP extensions Socket Web, les étapes d'installation sont les suivantes:Décompressez le fichier téléchargé.
Entrez répertoirepywebsocket.
Exécuter:
$ python setup.py build $ sudo python setup.py install
Voir la documentation:
$ pydoc mod_pywebsocket
Exécutez la commande suivante danspywebsocket répertoire / mod_pywebsocket:
$ sudo python standalone.py -p 9998 -w fr/example/
La commande ci-dessus va ouvrir un numéro de port de service 9998, utilisez le -w pour définir le echo_wsh.py de gestionnaire de répertoire situé.
Maintenant, nous pouvons ouvrir le fichier w3big_websocket vous avez créé plus tôt dans le navigateur Chrome. Si votre navigateur prend en charge WebSocket (), cliquez sur "Exécuter WebSocket", vous pouvez voir l'ensemble du processus à chaque étape de la fenêtre pop-up, le processus Gif démo:
Une fois que nous nous arrêtons le service, il sera pop up "Connexion fermée frfr"