English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
WebSocket est un composant HTML5 commence à fournir un protocole de communication full-duplex sur une seule connexion TCP.
WebSocket rend l'échange de données entre le client et le serveur plus simple, permettant au serveur de pousser des données vers le client. Dans l'API WebSocket, le navigateur et le serveur n'ont besoin que de terminer une poignée de main, puis ils peuvent directement créer une connexion persistante et effectuer un transfert de données bidirectionnel.
Dans l'API WebSocket, le navigateur et le serveur n'ont besoin que d'effectuer une action de poignée de main, puis, une fois que le poignée de main est établi, une voie rapide est formée entre le navigateur et le serveur. Les deux peuvent directement échanger des données.
Actuellement, de nombreux sites Web utilisent la technologie de polling Ajax pour réaliser la technologie de push. Le polling consiste à effectuer une requête à des intervalles de temps spécifiques (par exemple, chaque1seconde), où le navigateur envoie une requête HTTP au serveur, puis le serveur renvoie les données les plus récentes au navigateur client. Ce modèle traditionnel présente des inconvénients évidents, à savoir que le navigateur doit constamment envoyer des requêtes au serveur, mais les requêtes HTTP peuvent contenir des en-têtes longs, où les données vraiment efficaces ne sont qu'une petite partie, ce qui semble gaspiller beaucoup de bande passante et de ressources.
HTML5 Le protocole WebSocket défini permet de mieux économiser les ressources et la bande passante du serveur, et permet une communication plus réelle en temps réel.
Le navigateur envoie une requête JavaScript pour établir une connexion WebSocket. Une fois la connexion établie, le client et le serveur peuvent échanger des données directement via une connexion TCP.
Lorsque vous obtenez une connexion WebSocket, vous pouvez send() La méthode pour envoyer des données au serveur et onmessage Les événements pour recevoir les données renvoyées par le serveur.
Les API suivantes sont utilisées pour créer des objets WebSocket.
var Socket = new WebSocket(url, [protocol]);
Le premier paramètre du code ci-dessus, url, spécifie l'URL de connexion. Le second paramètre, protocol, est optionnel et spécifie le sous-protocole acceptable.
Voici les propriétés de l'objet WebSocket. Supposons que nous ayons utilisé le code ci-dessus pour créer l'objet Socket :
| Propriété | Description |
| Socket.readyState | Propriété lecture seule readyState Indique l'état de la connexion, qui peut être l'une des valeurs suivantes :
|
| Socket.bufferedAmount | Propriété lecture seule bufferedAmount Déjà mis dans la file d'attente par send() en attente de transmission, mais pas encore envoyé UTF-8 Nombre d'octets de texte. |
Voici les événements associés à l'objet WebSocket. Supposons que nous ayons utilisé le code ci-dessus pour créer l'objet Socket :
| Événement | Gestionnaire d'événement | Description |
| open | Socket.onopen | Déclenché lors de l'établissement de la connexion |
| message | Socket.onmessage | Déclenché lors de la réception de données du serveur par le client |
| error | Socket.onerror | Déclenché lors d'une erreur de communication |
| close | Socket.onclose | Déclenché lors de la fermeture de la connexion |
Voici les méthodes associées à l'objet WebSocket. Supposons que nous ayons utilisé le code ci-dessus pour créer l'objet Socket :
| Méthode | Description |
| Socket.send() | Envoyer des données via la connexion |
| Socket.close() | Fermer la connexion |
Le protocole WebSocket est essentiellement un protocole basé sur TCP.
Pour établir une connexion WebSocket, le navigateur client doit d'abord envoyer une requête HTTP au serveur. Cette requête est différente des requêtes HTTP habituelles, car elle contient des en-têtes supplémentaires. L'en-tête supplémentaire "Upgrade: WebSocket" indique qu'il s'agit d'une requête HTTP demandant une mise à niveau de protocole. Le serveur analyse ces en-têtes supplémentaires et génère une réponse qui est renvoyée au client. La connexion WebSocket entre le client et le serveur est ainsi établie, et les deux parties peuvent échanger des informations via ce canal de connexion. Cette connexion reste active jusqu'à ce que l'une des parties client ou serveur ferme explicitement la connexion.
HTML et JavaScript du client
La plupart des navigateurs supportent l'interface WebSocket(), vous pouvez essayer l'exemple dans les navigateurs suivants : Chrome, Mozilla, Opera et Safari.
w3Contenu du fichier codebox_websocket.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Méthodes d'utilisation de WebSocket, site Web de tutoriels de base (oldtoolbag.com)</title>
<script type="text/javascript">
function WebSocketTest()
{
var x = document.getElementById("websocket");
if ("WebSocket" in window)
{
x.innerHTML="Votre navigateur prend en charge WebSocket!";
// Ouvrir un websocket
var ws = new WebSocket("ws://echo.websocket.org");
ws.onopen = function()
{
// WebSocket est connecté, utilisez la méthode send() pour envoyer des données
ws.send("Envoyer des données");
x.innerHTML="Les données sont en cours d'envoi...";
};
ws.onmessage = function(evt)
{
var received_msg = evt.data;
x.innerHTML="Les données ont été reçues, tutoriel de base (oldtoolbag.com)...";
};
ws.onclose = function()
{
// Fermer websocket
x.innerHTML="La connexion a été fermée...";
};
}
else
{
// Votre navigateur ne prend pas en charge WebSocket
x.innerHTML="Votre navigateur ne prend pas en charge WebSocket!";
}
}
</script>
</head>
<body>
<div id="sse"><
<input type="button" onclick="WebSocketTest()" value="运行 WebSocket">
</div>
<div id="websocket"></div>
</body>
</html>Voyons le test ‹/›Les résultats du test sont illustrés dans l'image suivante :
La communication de logiciels a une structure de sept couches, les trois premières couches sont orientées vers la communication de données, les trois dernières sont orientées vers le traitement des données, et la couche de transmission est un pont entre les trois couches supérieures et les trois couches inférieures, chaque couche fait un travail différent, et les protocoles de couche supérieure dépendent des protocoles de couche inférieure. Basé sur ce concept de structure de communication.
Socket n'est pas vraiment un protocole, c'est une couche application et TCP/La famille de protocoles IP est une couche intermédiaire logicielle d'abstraction de communication, c'est un ensemble d'interfaces. Lorsque deux hôtes communiquent, il fait appel à Socket pour organiser les données afin de correspondre aux protocoles spécifiés. La connexion TCP dépend plus de la couche IP sous-jacente, et la connexion IP dépend de la couche liaison de données et des couches plus basses.
WebSocket est un protocole de couche application typique.
Socket est un protocole de couche transport de contrôle
WebSocket est un protocole de couche application