El aprendizaje de la bota de primavera continúa. En los dos blogs anteriores, presentamos cómo usar contenedores de arranque de primavera para crear un proyecto web y cómo agregar soporte HTTPS a nuestro proyecto. Según estos dos artículos, echaremos un vistazo a cómo usar WebSocket en Spring Boot hoy.
¿Qué es WebSocket?
WebSocket proporciona la función de comunicación asincrónica dúplex entre el navegador y el servidor, lo que significa que podemos usar el navegador para enviar mensajes al servidor, y el servidor también puede enviar mensajes al navegador. En la actualidad, la versión convencional de los navegadores convencionales admite WebSocket, pero la carga de trabajo del uso de WebSocket en el desarrollo real será ligeramente mayor, y el problema de compatibilidad del navegador se incrementará. En este momento, es más probable que usemos un sub-protocolo de WebSocket para implementar rápidamente nuestras funciones. Ok, no diré mucho sobre WebSocket aquí, principalmente miramos cómo usarlo.
Creación de proyectos
El uso de WebSocket requiere que creemos un proyecto primero. El método de creación de este proyecto es el mismo que dijimos en el artículo anterior (primero aprendo sobre el marco de arranque de primavera). La diferencia es que al elegir una dependencia, elegimos las dependencias de ThyMeleaf y WebSocket, como se muestra en la figura a continuación:
Configuración de WebSocket
Después de que el proyecto se crea con éxito, primero configuramos WebSocket y creamos la siguiente clase:
@Configuration @enablewebSocketMessAsgeBrokerPublic WebSocketConfig extiende abstractWebSocketMessAgebRokerConfigurer {@Override public void RegisterStompendPoints (stompendpoIntregistry StompendpoIntregistry) {stompendpoIntRegistry.adendpoint ("/Endpointsang"). Withsockjs ();););); } @Override public void ConfigureMessageBroker (Registro de MessageBrokerRegistry) {Registry.EnablesImpleBroker ("/Topic"); }}Diré los siguientes puntos sobre esta categoría:
1@enablewebSocketMessageBroker Annotation significa que el protocolo STOMP está habilitado para transmitir mensajes basados en proxy. Broker significa poder.
2. El método RegistroStompendPoints representa el nodo que registra el protocolo STOMP y especifica la URL asignada.
3.StompendPoIrgistry.addendPoint ("/EndpointSang"). WithSockJS (); Esta línea de código se utiliza para registrar el nodo del protocolo STOMP y también especifica el uso del protocolo SockJS.
4. El método de ConfiguremessageBroker se utiliza para configurar el corredor de mensajes. Dado que implementamos la función push, el corredor de mensajes aquí es /tema
Cree una clase de recepción para el navegador para enviar mensajes
Los mensajes enviados por el navegador se reciben utilizando esta clase:
clase pública requestMessage {Nombre de cadena privada; public String getName () {nombre de retorno; }}Crear una clase de mensaje de respuesta
El mensaje devuelto por el servidor al navegador es llevado por esta clase:
clase pública ResponseMessage {String privado ResponseMessage; Public ResponseMessage (String ResponseMessage) {this.ApesponsEmessage = ResponseMessage; } public String getRponseMessage () {return ResponseMessage; }}Crear un controlador
@ControllerPublic Clase WSController {@MessageMapping ("/Bienvenido") @SendTo ("/Topic/GetResponse") Public ResponseMessage dice (SolicHMessage Message) {System.out.println (Message.getName ()); devolver nuevo ResponseMessage ("Bienvenido", + Message.getName () + "!"); }}Con respecto a este controlador, en primer lugar, no hay necesidad de decir mucho sobre la anotación @Controller. La anotación de @MessageMapping agregada en el método Say es similar al @RequestMapping que usamos antes. La anotación @sendto significa que cuando el servidor tiene un mensaje que debe ser presionado, se enviará un mensaje al navegador suscrito a la ruta en @sendto.
Agregar script
En este caso, necesitamos tres archivos de script JS, a saber, el script del cliente Stomp.js del protocolo STOMP, el script del cliente Sock.js de Sockjs y JQuery. Estos tres archivos JS se copian en el directorio SRC/Main/Resources/Static/JS. Ok, he preparado estos tres archivos JS para mis amigos. Puede descargar el caso directamente al final del artículo. Hay casos en los casos, o puede descargar estos tres archivos JS usted mismo.
Página de demostración
Antes de escribir esta página HTML, primero quiero hablar sobre cuál es el efecto que estamos tratando de lograr. Después de comenzar mi proyecto, accedo a la página de envío de mensajes en el navegador y envío un mensaje en esa página. Cuando el servidor recibe este mensaje, se envía un mensaje a todos los navegadores conectados al servidor. Ok, creamos una nueva página WS.HTML en el directorio SRC/Main/Resources/Plantlates, con el siguiente contenido:
<html lang = "en" xmlns: th = "http://www.thymeleaf.org"> <fead> <meta charset = "utf-8"/> <title> transmitido websocket </script> <script th: src = "@{js/sockjs.min.js}"> </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 = "color: #e80b0a;" WebSocket </h2> </roscript> <div> <div> <button id = "conectar" onClick = "conect ();"> conectar </botón> <botón id = "disconnect" discapaced = "discapaced" onClick = "disconnect ();"> disconecte </boton> </div> <div ioD = "conversación"> <label> enter </etiqueta <rabel> <inyect type " id = "name"/> <button id = "sendName" onClick = "sendName ();"> Enviar </boton> <p id = "respuesta"> </p> </div> </div> <script type = "text/javaScript"> var stompclient = null; function setConnected (conectado) {document.getElementById ("conectar"). DISCABIED = Connected; document.getElementById ("Desconectar"). DISCABILED =! Connected; document.getElementById ("ConversationDiv"). style.visibility = conectado? 'Visible': 'Hidden'; // $ ("#Connect"). DISCABILIZA $ ("#respuesta"). 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 (respuesta) {showResponse (json.parse (respuesta.Body) .ResponseMessage);}); } function disconnect () {if (stompclient! = null) {stompclient.disconnect (); } setConnected (falso); console.log ('desconectado'); } función sendName () {var name = $ ('#name'). val (); console.log ('nombre:' + nombre); stompclient.send ("/bienvenido", {}, json.stringify ({'name': name})); } función showResponse (mensaje) {$ ("#respuesta"). html (mensaje); } </script> </body> </html>Aunque aquí hay un poco más de código, es muy simple analizarlo cuidadosamente. En primer lugar, no hablaré sobre la parte introducida por el archivo JS. Si no lo entiende aquí, puede consultar el uso de Spring Boot para desarrollar un proyecto web. Luego hay dos botones en nuestra página, uno es una conexión y el otro es una desconexión. Los dos botones corresponden a diferentes eventos de clic. Hay un cuadro de entrada debajo de estos dos botones, que es el contenido que queremos enviar, y luego hay un botón de envío. El botón Enviar corresponde a un evento de clic para enviar un mensaje. Este es un elemento de toda la página, muy simple. Centrémonos en el código lógico JS aquí.
El método de conexión se ejecuta cuando hago clic en el botón de conexión. Var Socket = new Sockjs ('/EndPointSang'); significa que el nombre de punto final de los SockJS conectados es /EndpointSang, Stompclient = stomp.over (Socket); significa que usar Stomp para crear un cliente WebSocket. Luego llame al método de conexión en Stompclient para conectarse al servidor. Después de que la conexión sea exitosa, llame al método SetConnected, que oculta el oculto y muestra el mostrado. Luego, llamando al método de suscripción en StompClient para suscribirse al mensaje enviado por /topic /getResponse, es decir, el parámetro de la anotación @sendto que agregamos al método Say en el controlador. El método de envío en Stompclient significa enviar un mensaje al servidor, y el resto son todos los usos de JS regulares. No lo repetiré.
Configurar ViewController
Lo siguiente es proporcionar mapas de ruta para ws.html:
@ConfigurationPublic Class WebMVCConfig extiende WebMVCConfigurerAdapter {@Override public Void AddViewControllers (ViewControllerRegistry Registry) {Registry.AddViewController ("/WS"). SetViewName ("/WS"); }}Ok, después de hacer todo esto, podemos ejecutar el proyecto. Abro múltiples navegadores al mismo tiempo y envío un mensaje a uno de ellos. Veamos los resultados:
Envío mensajes en el navegador superior y ambos navegadores reciben mensajes mía.
Ok, lo anterior es todo el proceso de uso de WebSocket para implementar un mensaje de mensaje en el marco de arranque de Spring.
Descargar dirección de este caso: demostración
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.