Spring Boot Learning geht weiter. In den beiden vorherigen Blogs haben wir vorgestellt, wie Spring -Boot -Container zum Erstellen eines Webprojekts und zum Hinzufügen von HTTPS -Support zu unserem Projekt verwendet werden. Basierend auf diesen beiden Artikeln werden wir uns noch heute ansehen, wie Sie WebSocket im Spring Boot verwenden.
Was ist Websocket
WebSocket bietet eine Duplex -Asynchron -Kommunikationsfunktion zwischen dem Browser und dem Server, sodass wir den Browser verwenden können, um Nachrichten an den Server zu senden, und der Server kann auch Nachrichten an den Browser senden. Derzeit unterstützt die Mainstream -Version von Mainstream -Browsern WebSocket, aber die Arbeitslast der Verwendung von Websocket in der tatsächlichen Entwicklung wird etwas größer sein, und das Browserkompatibilitätsproblem wird erhöht. Zu diesem Zeitpunkt verwenden wir eher ein Subprotokoll von Websocket, um unsere Funktionen schnell zu implementieren. Ok, ich werde hier nicht viel über WebSocket sagen, wir sehen uns hauptsächlich an, wie man es benutzt.
Projekterstellung
Wenn wir WebSocket verwenden, müssen wir zuerst ein Projekt erstellen. Die Erstellungsmethode dieses Projekts entspricht dem, was wir im vorherigen Artikel gesagt haben (ich lerne zuerst mehr über Spring Boot Framework). Der Unterschied besteht darin, dass wir bei der Auswahl einer Abhängigkeit Thymeleaf- und Websocket -Abhängigkeiten wählen, wie in der folgenden Abbildung gezeigt:
Websocket konfigurieren
Nachdem das Projekt erfolgreich erstellt wurde, konfigurieren wir zunächst WebSocket und erstellen die folgende Klasse:
@Configuration @enableWebSocketMessAnebrokerPublic class WebSocketConfig erweitert AbstractWebsocketMessAnebrokerConFigur {@Override public void RegisterStompendpoints (StompendpoIntregistry StompendpoIntregistry) {StompendpoinTregistry.addendpoint ("/Endpointsang"). Mit; } @Override public void configuremessageBroker (MessageBrokerregistry -Registrierung) {Registry.EnablesImplebroker ("/topy"); }}Ich werde die folgenden Punkte zu dieser Kategorie sagen:
1@enableWebSocketMessageBroker-Annotation bedeutet, dass das Stomp-Protokoll für die Übertragung von Proxy-basierten Nachrichten aktiviert ist. Broker bedeutet Proxy.
2. Die Methode für das RegisterStompendpoints repräsentiert den Knoten, der das Stomp -Protokoll registriert und die zugeordnete URL angibt.
3.StompendPoIntregistry.addendpoint ("/Endpointsang"). WithSockjs (); Diese Codezeile wird verwendet, um den Stomp -Protokollknoten zu registrieren und gibt auch die Verwendung des SockJS -Protokolls an.
4.ConfiguremessageBroker -Methode wird zum Konfigurieren des Nachrichtenbrokers verwendet. Da wir die Push -Funktion implementieren, ist der Message Broker hier /Thema
Erstellen Sie eine Empfangsklasse, damit der Browser Nachrichten senden kann
Vom Browser gesendete Nachrichten werden mit dieser Klasse empfangen:
öffentliche Klasse RequestMessage {private String -Name; public String getName () {return name; }}Erstellen Sie eine Antwortnachrichtenklasse
Die vom Server an den Browser zurückgegebene Nachricht wird von dieser Klasse übertragen:
öffentliche Klasse ResponseMessage {private String ResponseMessage; public responseMessage (String responemessage) {this.responsemessage = responseMessage; } public String getResponSemessage () {return responemessage; }}Erstellen Sie einen Controller
@ControllerPublic Class WSController {@MessAgemapping ("/willkommen") @SendTO ("/topic/getResponse") public responemessage sagt (RequestMessage -Nachricht) {System.out.println (Message.getName ()); Neue Antwort zurückgeben ("Willkommen", + message.getName () + "!"); }}In Bezug auf diesen Controller ist zunächst nicht viel über die @Controller -Annotation zu sagen. Die @MessAgemapping -Annotation, die auf der Say -Methode hinzugefügt wurde, ähnelt dem zuvor verwendeten @RequestMapping. Die @SendTO -Annotation bedeutet, dass, wenn der Server eine Nachricht hat, die gedrückt werden muss, eine Nachricht an den Browser gesendet wird, der dem Pfad in @SendTO abonniert wird.
Skript hinzufügen
In diesem Fall benötigen wir drei JS -Skriptdateien, nämlich das Client -Skript stomp.js des Stomp -Protokolls, das Client -Skript -Sock.js von Sockjs und JQuery. Diese drei JS -Dateien werden in das Verzeichnis src/main/ressourcen/static/js kopiert. Ok, ich habe diese drei JS -Dateien für meine Freunde vorbereitet. Sie können den Fall direkt am Ende des Artikels herunterladen. Es gibt Fälle in den Fällen, oder Sie können diese drei JS -Dateien selbst herunterladen.
Demo -Seite
Bevor ich diese HTML -Seite schreibe, möchte ich zunächst darüber sprechen, was wir erreichen wollen. Nachdem mein Projekt gestartet wurde, greife ich auf die Sendeseite der Nachricht im Browser und sende eine Nachricht auf dieser Seite. Wenn der Server diese Nachricht empfängt, wird eine Nachricht an alle mit dem Server verbundenen Browser gesendet. OK, wir erstellen eine neue Ws.html -Seite im Verzeichnis SRC/Main/Ressourcen/Vorlagen mit dem folgenden Inhalt:
<html lang = "en" xmlns: th = "http://www.thymeleaf.org"> <head> <meta charset = "utf-8"/> <title> Broadcast WebSocket </title> <script th: src = "@{js/scrodkjs.min th: src = "@{js/stomp.js}"> </script> <script th: src = "@{js/jQuery-3.1.1.js}"> </script> </head> <body onload = "disconnect ()" WebSocket </h2> </noscript> <div> <div> <button id = "connect" onclick = "connect ();"> connect </button> <button id = "disabled =" deaktiviert "onclick =" diskonnect (); id = "name"/> <button id = "sendName" onclick = "sendName ();"> send </button> <p id = "Antwort"> </p> </div> </div> <script type = "text/javascript"> var stompclient = null; FunktionsetConnected (verbunden) {document.getElementById ("Connect"). Disabled = Connected; document.GetElementById ("trennen"). Disabled =! Angeschlossen; document.getElementById ("ConversationDiv"). Style.visibility = Connected? 'sichtbar': 'versteckt'; // $ ("#connect"). Disabled = Connected; // $ ("#disconnect"). Disabled =! Connected; $ ("#response"). html (); } function Connect () {var socket = new Sockjs ('/Endpointsang'); Stompclient = Stomp.Over (Socket); stompclient.connect ({}, function (Frame) {setConnected (true); console.log ('Connected:' + Frame); Stompclient.SubScribe ('/topic/getResponse', function (response) {showResponse (JSON.PARSE (Antwort.body). } function disconnect () {if (stompclient! = null) {stompclient.disconnect (); } setConnected (false); console.log ('getrennt'); } Funktion sendName () {var name = $ ('#name'). val (); console.log ('name:' + name); stompclient.send ("/willkommen", {}, json.stringify ({'name': name})); } Funktion showResponse (message) {$ ("#response"). html (message); } </script> </body> </html>Obwohl es hier etwas mehr Code gibt, ist es sehr einfach, ihn sorgfältig zu analysieren. Zunächst werde ich nicht über das von der JS -Datei eingeführte Teil sprechen. Wenn Sie es hier nicht verstehen, können Sie Spring Boot verwenden, um ein Webprojekt zu entwickeln. Dann gibt es zwei Schaltflächen auf unserer Seite, eine ist eine Verbindung und die andere ist eine Trennung. Die beiden Schaltflächen entsprechen verschiedenen Klickereignissen. Unter diesen beiden Schaltflächen befindet sich ein Eingabefeld. Dies ist der Inhalt, den wir senden möchten, und dann gibt es eine Send -Taste. Die Schaltfläche Senden entspricht einem Klickereignis zum Senden einer Nachricht. Dies ist ein Element der gesamten Seite, sehr einfach. Konzentrieren wir uns hier auf den JS -Logikcode.
Die Verbindungsmethode wird ausgeführt, wenn ich auf die Schaltfläche Verbindungen klicke. var socket = new Sockjs ('/Endpointsang'); bedeutet, dass der Endpunktname der verbundenen Sockjs /Endpointsang, Stompclient = Stomp.over (Socket) ist; bedeutet, dass Stomp zum Erstellen eines WebSocket -Clients verwendet wird. Rufen Sie dann die Verbindungsmethode in Stompclient auf, um eine Verbindung zum Server herzustellen. Nachdem die Verbindung erfolgreich ist, rufen Sie die setConnected -Methode auf, die das verborgene verbirgt und die angezeigte angezeigt. Wenn Sie dann die Abonnementmethode in Stompclient aufrufen, um die von /topy /getResponse gesendete Nachricht zu abonnieren, dh den Parameter der @Sendto -Annotation, die wir der Methode in Controller hinzugefügt haben. Die Send -Methode in Stompclient bedeutet, eine Nachricht an den Server zu senden, und der Rest sind alle regulären JS -Verwendungen. Ich werde es nicht wiederholen.
Konfigurieren Sie ViewController
Als nächstes können Sie Pfadkarten für Ws.html bereitstellen:
@ConfigurationPublic Class webmvcconfig erweitert webmvcconFigurerAdapter {@Override public void addviewController (ViewControllerRegistry -Registrierung) {Registry.AddViewController ("/ws"). SetViewName ("/ws"); }}OK, nachdem wir das alles getan haben, können wir das Projekt ausführen. Ich öffne gleichzeitig mehrere Browser und sende eine Nachricht auf einen von ihnen. Lassen Sie uns die Ergebnisse sehen:
Ich sende Nachrichten im oberen Browser und beide anderen Browser empfangen Nachrichten von mir.
OK, das obige ist der gesamte Prozess der Verwendung von WebSocket zum Implementieren von Nachrichtenschieben im Spring -Boot -Framework.
Laden Sie die Adresse dieses Falls herunter: Demo
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.