L'apprentissage du démarrage du printemps se poursuit. Dans les deux blogs précédents, nous avons introduit comment utiliser les conteneurs Spring Boot pour créer un projet Web et comment ajouter la prise en charge HTTPS à notre projet. Sur la base de ces deux articles, nous examinerons comment utiliser WebSocket dans Spring Boot aujourd'hui.
Qu'est-ce que WebSocket
WebSocket fournit une fonction de communication asynchrone duplex entre le navigateur et le serveur, ce qui signifie que nous pouvons utiliser le navigateur pour envoyer des messages au serveur, et le serveur peut également envoyer des messages au navigateur. À l'heure actuelle, la version grand public des navigateurs grand public prend en charge WebSocket, mais la charge de travail de l'utilisation de WebSocket dans le développement réel sera légèrement plus grande et le problème de compatibilité du navigateur sera augmenté. Pour le moment, nous sommes plus susceptibles d'utiliser un sous-protocole de WebSocket pour implémenter rapidement nos fonctions. OK, je ne dirai pas grand-chose sur WebSocket ici, nous regardons principalement comment l'utiliser.
Création de projets
L'utilisation de WebSocket nous oblige d'abord à créer un projet. La méthode de création de ce projet est la même que ce que nous avons dit dans l'article précédent (j'apprends d'abord le framework Spring Boot). La différence est que lors du choix d'une dépendance, nous choisissons les dépendances à thymeleaf et WebSocket, comme indiqué dans la figure ci-dessous:
Configuration de WebSocket
Une fois le projet créé avec succès, nous configurons d'abord WebSocket et créons la classe suivante:
@ Configuration @ activerwebsocketMessageBrokerPublic class WebsocketConfig étend AbstractWebSocketMessageBrokerConfigurer {@Override public void registerSompendpoints (stompendPoinTregry stompendPoinTregry) {stompendpoinTregry. } @Override public void configureMessageBroker (MessageBrokerRegistry Registry) {registry.enablesImpleBroker ("/ topic"); }}Je vais dire les points suivants sur cette catégorie:
1 @ Annotation activés en berge-prix de BocketBroker signifie que le protocole STOMP est permis de transmettre des messages basés sur les procurations. Le courtier signifie proxy.
2. La méthode RegisterSTompendpoints représente le nœud qui enregistre le protocole STOMP et spécifie l'URL mappée.
3.StompedPoinTregistry.AdDendPoint ("/ endpointSang"). WithSockjs (); Cette ligne de code est utilisée pour enregistrer le nœud du protocole STOMP et spécifie également l'utilisation du protocole SOCKJS.
4.ConfigureMessageBroker La méthode est utilisée pour configurer le courtier de messages. Depuis que nous implémentons la fonction push, le courtier de messages ici est / sujet
Créez une classe de réception pour que le navigateur envoie des messages
Les messages envoyés par le navigateur sont reçus en utilisant cette classe:
Classe publique RequestMessage {nom de chaîne privée; public String getName () {Nom de retour; }}Créer une classe de messages de réponse
Le message renvoyé par le serveur au navigateur est transporté par cette classe:
classe publique ResponseMessage {Private String ResponseMessage; Public ResponseMessage (chaîne RéponseMessage) {this.ResponseMessage = ResponseMessage; } public String getResponseMessage () {return ResponseMessage; }}Créer un contrôleur
@ControllerPublic class wsController {@MessageMapping ("/ bienvenue") @SendTo ("/ topic / GetResponse") Public ResponseMessage dit (message de demande) {System.out.println (message.getName ()); Renvoie un nouveau ResponseMessage ("Welcome", + message.getName () + "!"); }}En ce qui concerne ce contrôleur, tout d'abord, il n'est pas nécessaire de dire grand-chose sur l'annotation @Controller. L'annotation @MessageMapping ajoutée sur la méthode Say est similaire à la @RequestMapping que nous avons utilisée auparavant. L'annotation @sendto signifie que lorsque le serveur a un message qui doit être poussé, un message sera envoyé au navigateur abonné au chemin dans @sendto.
Ajouter un script
Dans ce cas, nous avons besoin de trois fichiers de script JS, à savoir le script client stomp.js du protocole Stomp, le script client sock.js de sockjs et jQuery. Ces trois fichiers JS sont copiés dans le répertoire SRC / Main / Resources / Static / JS. Ok, j'ai préparé ces trois fichiers JS pour mes amis. Vous pouvez télécharger le cas directement à la fin de l'article. Il y a des cas dans les cas, ou vous pouvez télécharger vous-même ces trois fichiers JS.
Page de démonstration
Avant d'écrire cette page HTML, je veux d'abord parler de l'effet que nous essayons de réaliser. Après le démarrage de mon projet, j'accède à la page d'envoi de message dans le navigateur et envoie un message sur cette page. Lorsque le serveur reçoit ce message, un message est envoyé à tous les navigateurs connectés au serveur. OK, nous créons une nouvelle page WS.HTML dans le répertoire SRC / Main / Resources / Templates, avec le contenu suivant:
<html lang = "en" xmlns: th = "http://www.thymeleaf.org"> <read> <meta charset = "utf-8" /> <ititle> Broadcast webocket </ title> <script th: src = "@ {js / sockjjs.min.js}"> </cript> <script> <script> <script> <script> th: src = "@ {js / stomp.js}"> </ script> <script th: src = "@ {js / jQuery-3.1.1.js}"> </ script> </ head> <body onload = "Disconnect ()"> <noscript> <h2 style = "colore: # e80b0a;"> désolé, le navigateur ne prend pas en charge, le navigateur ne supporte pas WebSocket </h2> </soscript> <div> <div> <Button id = "connect" onClick = "connect ();"> connect </ Button> <Button Id = "Disconnect" Disabled = "Disabled" onClick = "Disconnect ();"> Disconnect </ bouth id = "SendName" onClick = "sendName ();"> send </ Button> <p id = "réponse"> </p> </div> </div> <script type = "Text / JavaScript"> var stompClient = null; function setConned (connected) {document.getElementById ("connect"). Disabled = Connected; document.getElementById ("Disconnect"). Disabled =! Connected; document.getElementById ("ConversationDiv"). Style.Visibilité = connecté? 'Visible': 'Hidden'; // $ ("# connect"). Disabled = Connected; // $ ("# Disconnect"). Disabled =! Connected; $ ("# réponse"). html (); } fonction connect () {var socket = new sockjs ('/ endpointSang'); stompClient = stomp.over (socket); stompClient.connect ({}, function (trame) {setConned (true); console.log ('connecté:' + trame); stompClient.subscribe ('/ topic / getResponse', function (réponse) {showResponse (json.parse (réponse.body) .Responsessage);})}); } fonction déconnect () {if (stompClient! = null) {stompClient.disconnect (); } setConned (false); console.log («déconnecté»); } fonction sendName () {var name = $ ('# name'). val (); console.log ('name:' + name); stompClient.send ("/ bienvenue", {}, json.stringify ({'name': name})); } fonction showResponse (message) {$ ("# réponse"). html (message); } </ script> </ body> </html>Bien qu'il y ait un peu plus de code ici, il est très simple de l'analyser attentivement. Tout d'abord, je ne parlerai pas de la pièce introduite par JS File. Si vous ne le comprenez pas ici, vous pouvez vous référer à l'utilisation de Spring Boot pour développer un projet Web. Ensuite, il y a deux boutons sur notre page, l'un est une connexion et l'autre est une déconnexion. Les deux boutons correspondent à des événements de clic différents. Il y a une boîte d'entrée sous ces deux boutons, qui est le contenu que nous voulons envoyer, puis il y a un bouton d'envoi. Le bouton Envoyer correspond à un événement de clic pour envoyer un message. Ceci est un élément de toute la page, très simple. Concentrons-nous sur le code JS Logic ici.
La méthode de connexion est exécutée lorsque je clique sur le bouton de connexion. var socket = new sockjs ('/ endpointSang'); signifie que le nom de point de terminaison du sockjs connecté est / endpointSang, stompClient = stomp.over (socket); signifie que l'utilisation de Stomp pour créer un client WebSocket. Ensuite, appelez la méthode Connect dans StompClient pour se connecter au serveur. Une fois la connexion réussie, appelez la méthode SetConnected, qui masque le caché et affiche l'affichage. Ensuite, en appelant la méthode d'abonnement dans stompClient pour vous abonner au message envoyé par / topic / getResponse, c'est-à-dire le paramètre de l'annotation @Sendto que nous avons ajouté à la méthode Say dans Controller. La méthode d'envoi dans StompClient signifie l'envoi d'un message au serveur, et les autres sont tous des usages JS réguliers. Je ne le répéterai pas.
Configurer ViewController
Vient ensuite pour fournir des cartes de chemin pour WS.HTML:
@Configurationpublic class webmvcconfig étend webmvcconfigurerAdapter {@Override public void addViewController (ViewControllerRegistry Registry) {registry.addViewController ("/ ws"). SetViewname ("/ ws"); }}OK, après avoir fait tout cela, nous pouvons gérer le projet. J'ouvre plusieurs navigateurs en même temps et envoie un message sur l'un d'eux. Voyons les résultats:
J'envoie des messages sur le navigateur supérieur et les deux autres navigateurs me reçoivent des messages.
OK, ce qui précède est l'intégralité du processus d'utilisation de WebSocket pour implémenter la poussée de message sous le cadre de démarrage Spring.
Télécharger l'adresse de cette affaire: démo
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.