websocket+sockjs+stompjs ausführliche Erklärung und Beispielcode

Vor kurzem gab es eine Projektanforderung für die Verwendung von WebSocket. Als ich jedoch auf Probleme stieß und mehr darüber erfuhr, wurde mir klar, dass WebSocket nicht so einfach ist, wie ich es mir vorgestellt hatte auf dem Client.

Jeder kennt die HTTP-Hypertext-Übertragungsprotokolle 1.0, 1.1, In mehreren Versionen von 2.0, beginnend mit http1.1, ist Keep-Alive standardmäßig aktiviert, um die Verbindungskontinuität aufrechtzuerhalten. Einfach ausgedrückt: Wenn eine Webseite geöffnet wird, besteht keine TCP-Verbindung zwischen dem Client und dem Server, die zur Übertragung von HTTP-Daten verwendet wird nicht mehr verfügbar, wird geschlossen, wenn der Client erneut auf die Webseite auf diesem Server zugreift Diese hergestellte Verbindung wird weiterhin verwendet, wodurch der Ressourcenverbrauch reduziert und die Leistung optimiert wird. Keep-Alive hat jedoch auch eine zeitliche Begrenzung, und es gibt auch einen Client, der eine Anforderung zum Abrufen von Rückgabedaten nur aktiv initiieren und nicht aktiv empfangen kann Für im Hintergrund gepushte Daten wurde ein Websocket ins Leben gerufen.

Websocket ist eine der neuen Funktionen von HTML5. Der Zweck besteht darin, eine Vollduplex-Kommunikationsmethode zwischen dem Browser und dem Server einzurichten, den durch http-Anfrage-Antwort verursachten übermäßigen Ressourcenverbrauch zu beheben und eine neue Implementierungsmethode für spezielle Szenarioanwendungen bereitzustellen , wie Chat, Aktienhandel, Spiele und andere Branchen mit hohen Echtzeitanforderungen.

Sowohl http als auch websocket basieren auf TCP (Transmission Control Protocol). Websocket kann als Ergänzung zum http-Protokoll angesehen werden.

SockJS ist eine JavaScript-Bibliothek, um das Problem zu lösen, dass viele Browser das WebSocket-Protokoll nicht unterstützen. SockJS ist eine Emulation der WebSocket-Technologie. SockJS entspricht so weit wie möglich der WebSocket-API. Wenn die WebSocket-Technologie jedoch nicht verfügbar ist, wird automatisch auf die Abfragemethode zurückgegriffen.

STOMP – Einfaches textorientiertes Nachrichtenprotokoll – Einfaches textorientiertes Nachrichtenprotokoll.

SockJS bietet eine Alternative zu WebSocket. Aber egal in welchem ​​Szenario, diese Form der Kommunikation ist für praktische Anwendungen zu niedrig. STOMP-Protokoll, um der Kommunikation zwischen Browser und Server eine geeignete Nachrichtensemantik hinzuzufügen.

Kurz gesagt, WebSocket ist das zugrunde liegende Protokoll, SockJS ist eine Alternative zu WebSocket und dem zugrunde liegenden Protokoll und STOMP ist ein Protokoll der oberen Schicht, das auf WebSocket (SockJS) basiert.

1. Das HTTP-Protokoll löst die Details des Webbrowsers, der eine Anfrage initiiert, und des Webservers, der auf die Anfrage antwortet. Unter der Annahme, dass das HTTP-Protokoll nicht existiert, können nur TCP-Sockets zum Schreiben von Webanwendungen verwendet werden.

2. Die direkte Verwendung von WebSocket (SockJS) ist der Verwendung von TCP-Sockets zum Schreiben von Webanwendungen sehr ähnlich. Da es kein übergeordnetes Protokoll gibt, müssen wir die Semantik der zwischen Anwendungen gesendeten Nachrichten definieren und sicherstellen, dass beide Enden funktionieren der Verbindung kann dieser Semantik folgen;

3. So wie HTTP dem TCP-Socket eine Anforderungs-Antwort-Modellschicht hinzufügt, stellt STOMP eine rahmenbasierte Zeilenformatschicht über WebSocket bereit, um die Nachrichtensemantik zu definieren;

Installieren Sie sockjs-client und stompjs. Bitte achten Sie darauf, dass bei der Einführung von stompjs kein Netzmodul gefunden wird. Sie müssen npm install im Stammverzeichnis des stompjs ausführen. Das ist ein seltsames Problem.

Importmodul:

 import SockJS from 'sockjs-client';import Stomp from 'stompjs';//Verbindungsfunktion let number = 1;function reconnect(socketUrl) { let url = `${BASE_URL}/ws/sdfpoint`; //Verbindungsadresse/ / Ein Verbindungsobjekt herstellen (die Verbindung wurde noch nicht initiiert) let socket = new SockJS(url); // Holen Sie sich das Client-Objekt des STOMP-Unterprotokolls let stompClient = Stomp.over(socket); // Initiieren Sie eine Websocket-Verbindung zum Server und senden Sie einen CONNECT-Frame stompClient.connect( {}, // Sie können die Authentifizierungsinformationsfunktion des Clients hinzufügen connectCallback () { // Rückruffunktion für erfolgreich Verbindung // Abonnementkanal stompClient.subscribe('/topic/display/control', function(data){ if (data) { console.log('subscribe data',data); } }) }, function errorCallBack(error){ //Funktionsnummer erneut aufrufen, wenn die Verbindung fehlschlägt += 1; if(number<=10){ reconnect(url);

Zusammenfassung: Die Implementierung von Websocket auf der Clientseite scheint relativ einfach zu sein, erfordert jedoch eine gute Zusammenarbeit und Debugging mit dem Hintergrund, um die besten Ergebnisse zu erzielen. Durch SockJS und Stomp wird Browserkompatibilität erreicht, die Nachrichtensemantik wird erhöht und die Benutzerfreundlichkeit verbessert. Um Websocket gründlich zu verstehen, müssen wir auch einige zugrunde liegende Prinzipien und damit verbundenes Wissen tiefgreifend verstehen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.