websocket+sockjs+stompjs explication détaillée et exemple de code

Récemment, un projet exigeait d'utiliser websocket. Au début, je pensais que c'était très simple, mais au fur et à mesure que j'ai rencontré des problèmes et que j'en ai appris davantage, j'ai réalisé que websocket n'était pas aussi simple qu'on l'imaginait. sur le client.

Tout le monde connaît très bien le protocole de transfert hypertexte http. http a 1.0, 1.1, Plusieurs versions de 2.0, à partir de http1.1, ont activé Keep-Alive par défaut pour maintenir la continuité de la connexion. En termes simples, lorsqu'une page Web est ouverte, la connexion TCP entre le client et le serveur utilisé pour transmettre les données http est inexistante. plus disponible sera fermé si le client accède à nouveau à la page Web sur ce serveur. , continuera à utiliser cette connexion établie, réduisant ainsi la consommation de ressources et optimisant les performances, mais Keep-Alive a également une limite de temps, et il existe également un client qui ne peut qu'initier activement une demande pour obtenir des données de retour, et ne peut pas les recevoir activement. . Pour les données transmises en arrière-plan, websocket a vu le jour.

Websocket est l'une des nouvelles fonctionnalités de HTML5. L'objectif est d'établir une méthode de communication en duplex intégral entre le navigateur et le serveur, de résoudre la consommation excessive de ressources causée par la requête-réponse http et de fournir une nouvelle méthode d'implémentation pour les applications de scénarios spéciaux. , comme le chat, les transactions boursières, les jeux et d'autres secteurs ayant des exigences élevées en temps réel.

HTTP et Websocket sont tous deux basés sur TCP (Transmission Control Protocol). Websocket peut être considéré comme un complément au protocole http.

SockJS est une bibliothèque JavaScript Afin de résoudre le problème du fait que de nombreux navigateurs ne prennent pas en charge le protocole WebSocket, une alternative SockJs a été conçue. SockJS est une émulation de la technologie WebSocket. SockJS correspondra autant que possible à l'API WebSocket, mais si la technologie WebSocket n'est pas disponible, elle reviendra automatiquement à la méthode d'interrogation.

STOMP-Simple Text Oriented Message Protocol-Simple Text Oriented Message Protocol.

SockJS propose une alternative à WebSocket. Mais quel que soit le scénario, cette forme de communication reste trop basique pour des applications pratiques. Protocole STOMP pour ajouter une sémantique de message appropriée à la communication entre le navigateur et le serveur.

En bref, WebSocket est le protocole sous-jacent, SockJS est une alternative à WebSocket et au protocole sous-jacent, et STOMP est un protocole de couche supérieure basé sur WebSocket (SockJS).

1. Le protocole HTTP résout les détails du navigateur Web qui lance une requête et du serveur Web qui répond à la requête. En supposant que le protocole HTTP n'existe pas, seules les sockets TCP peuvent être utilisées pour écrire des applications Web.

2. L'utilisation directe de WebSocket (SockJS) est très similaire à l'utilisation de sockets TCP pour écrire des applications Web. Parce qu'il n'y a pas de protocole de haut niveau, nous devons définir la sémantique des messages envoyés entre les applications et nous devons également nous assurer que les deux extrémités. de la connexion peut suivre cette sémantique ;

3. Tout comme HTTP ajoute une couche de modèle requête-réponse sur le socket TCP, STOMP fournit une couche de format de ligne basée sur des trames au-dessus de WebSocket pour définir la sémantique des messages ;

Installez sockjs-client et stompjs ; veuillez faire attention ici. J'ai trouvé dans la version stompjs : ^2.3.3 que lors de l'introduction de stompjs, un module net est introuvable. Vous devez exécuter npm install dans le répertoire racine du module stompjs. C'est un problème étrange.

Module d'importation :

 importer SockJS depuis 'sockjs-client'; importer Stomp depuis 'stompjs';//Fonction de connexion let number = 1;function reconnect(socketUrl) { let url = `${BASE_URL}/ws/sdfpoint` //Adresse de connexion/ / Établir un objet de connexion (la connexion n'a pas encore été initiée) let socket = new SockJS(url); // Récupère l'objet client du sous-protocole STOMP let stompClient = Stomp.over(socket); // Initier une connexion websocket au serveur et envoyer une trame CONNECT stompClient.connect( {}, // Vous pouvez ajouter les informations d'authentification du client function connectCallback () { // Fonction de rappel pour réussir connexion // Canal d'abonnement stompClient.subscribe('/topic/display/control', function(data){ if (data) { console.log('subscribe data',data); } }) }, function errorCallBack(error){ //Appelle à nouveau le numéro de fonction lorsque la connexion échoue += 1; if(number<=10){ reconnect(url } console.log('error',error);

Résumé : L'implémentation de websocket côté client semble relativement simple, mais elle nécessite une bonne coopération et un débogage avec l'arrière-plan pour obtenir les meilleurs résultats. La compatibilité du navigateur est obtenue grâce à SockJS et Stomp, la sémantique des messages est augmentée et la convivialité est améliorée. Pour bien comprendre Websocket, nous devons également avoir une compréhension approfondie de certains principes sous-jacents et connaissances associées.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.