Spring Boot Learning продолжается. В двух предыдущих блогах мы представили, как использовать весенние загрузочные контейнеры для создания веб -проекта и как добавить поддержку HTTPS в наш проект. Основываясь на этих двух статьях, мы рассмотрим, как использовать WebSocket в Spring Boot сегодня.
Что такое WebSocket
WebSocket обеспечивает дуплексную асинхронную функцию связи между браузером и сервером, что означает, что мы можем использовать браузер для отправки сообщений на сервер, а сервер также может отправлять сообщения в браузер. В настоящее время основная версия основных браузеров поддерживает WebSocket, но рабочая нагрузка на использование WebSocket в реальной разработке будет немного больше, а проблема совместимости браузера будет увеличена. В настоящее время мы с большей вероятностью будем использовать подпротокол WebSocket для быстрого реализации наших функций. Хорошо, я не буду много говорить о WebSocket здесь, мы в основном смотрим, как его использовать.
Создание проекта
Использование WebSocket требует от нас сначала создать проект. Метод создания этого проекта такой же, как и то, что мы сказали в предыдущей статье (я сначала узнаю о Spring Boot Framework). Разница заключается в том, что при выборе зависимости мы выбираем зависимости от тимелиста и WebSocket, как показано на рисунке ниже:
Настройка WebSocket
После того, как проект успешно создан, мы сначала настроим WebSocket и создаем следующий класс:
Конфигурация @enableWebSocketMessageBrokerPublic класса WebSocketConfig Extrable AbstractWebSocketMessageBrokerConfigurer {@Override public void RegisterStompendPoints (StompendPointregistry Stompendpointregistry) {Stompendpointregistry.addendpoint ("/endpointsantregistry). } @Override public void configureMessagebroker (реестр сообщений -мощности) {registry.enablesImpleBroker ("/topic"); }}Я скажу следующие пункты об этой категории:
1@EnableWebSocketCockeSgeSageBroker Annotation означает, что протокол Stomp включен для передачи сообщений на основе прокси. Брокер означает прокси.
2. Метод RegisterStompendpoints представляет узел, который регистрирует протокол Stomp и определяет отображенный URL.
3. STOPPENDPOINTREGISTION.AddendPoint ("/endpointsang"). Withsockjs (); Эта строка кода используется для регистрации узла протокола Stomp, а также определения использования протокола Sockjs.
4. Configuremessagebroker метод используется для настройки брокера сообщения. Поскольку мы реализуем функцию push, брокер сообщений здесь /тема
Создайте приемный класс для браузера для отправки сообщений
Сообщения, отправленные браузером, принимаются с использованием этого класса:
открытый класс requestMessage {private String name; public String getName () {return name; }}Создать класс сообщений ответа
Сообщение, возвращаемое сервером в браузер, переносится этим классом:
public Class actionEmessage {private String actionEmessage; public responsemessage (string responsemessage) {this.responsemessage = responsemessage; } public String getResponseMessage () {return responseMessage; }}Создать контроллер
@Controllerpublic class wscontroller {@messagemapping ("/wervelode") @sendto ("/topic/getResponse") public actionEmessage show (requestMessage) {System.out.println (message.getName ()); вернуть New RecplionEmessage ("Welcome" + message.getName () + "!"); }}Что касается этого контроллера, прежде всего, нет необходимости много говорить об аннотации @Controller. Аннотация @messagemapping, добавленная в методе SAIP, аналогична @requestmapping, которое мы использовали ранее. Аннотация @sendto означает, что, когда на сервере есть сообщение, которое необходимо нажать, в браузер будет отправлено сообщение, подписанное на путь в @Sendto.
Добавить скрипт
В этом случае нам нужно три файла сценария JS, а именно сценарий клиента Stomp.js протокола Stomp, клиент Sock.js Sockjs и jQuery. Эти три файла JS копируются в каталог SRC/Main/Resources/Static/JS. Хорошо, я подготовил эти три файла JS для моих друзей. Вы можете скачать случай непосредственно в конце статьи. В случаях есть случаи, или вы можете загрузить эти три файла JS самостоятельно.
Демо -страница
Перед тем, как написать эту страницу HTML, я хочу сначала рассказать о том, чего мы пытаемся достичь. После того, как мой проект запускается, я получаю доступ к странице отправки сообщения в браузере и отправляю сообщение на этой странице. Когда сервер получает это сообщение, сообщение отправляется всем браузерам, подключенным к серверу. Хорошо, мы создаем новую страницу WS.HTML в каталоге SRC/Main/Resources/Templates, со следующим содержанием:
<html lang = "en" xmlns: th = "http://www.thymeleaf.org"> <head> <meta charset = "utf-8"/> <title> Веб-сайт </title> <script th: src = "@{js/sockjs.min.js}" th: src = "@{js/stomp.js}"> </script> <script th: src = "@{js/jquery-3.1.1.js}"> </script> </head> <body onload = "dinnonnect ()"> <noscript> <h2 style = "color: #e80b0 Websocket </h2> </noscript> <div> <div> <button id = "connect" onclick = "connect ();"> connect </button> <button id = "disconnect" disabled = "dived" onclick = "disconnect ();"> Disconnect </button> </div> <div id = "degancediv"> <babel> Введите ваше имя <button id = "sendname" onclick = "sendname ();"> send </button> <p id = "response"> </p> </div> </div> <script type = "text/javascript"> var stompclient = null; function setConnected (подключен) {document.getElementById ("connect"). Disabled = Connected; document.getElementById ("Dinnonnect"). отключен =! Connected; document.getElementbyId ("degrainDiv"). style.visibility = подключен? 'visible': 'hidden'; // $ ("#connect"). отключен = подключен; // $ ("#disconnect"). Disabled =! Connected; $ ("#response"). html (); } function connect () {var socket = new sockjs ('/endpointsang'); stompclient = stomp.over (сокет); stompclient.connect ({}, function (frame) {setConnectect (true); console.log ('connected:' + frame); stompclient.subscribe ('/topic/getResponse', function (response) {showresponse (json.parse (response.body.doponsemessage);})}); } function dinconnect () {if (stompclient! = null) {stompclient.disconnect (); } setConnected (false); console.log ('decroded'); } function sendName () {var name = $ ('#name'). val (); console.log ('name:' + name); stompclient.send ("/wellow", {}, json.stringify ({'name': name})); } функция showresponse (message) {$ ("#response"). html (сообщение); } </script> </body> </html>Хотя здесь немного больше кода, очень просто тщательно проанализировать его. Прежде всего, я не буду говорить о той части, представленной JS File. Если вы не понимаете этого здесь, вы можете обратиться к использованию Spring Boot для разработки веб -проекта. Тогда на нашей странице есть две кнопки, одна - это соединение, а другая - разъединение. Две кнопки соответствуют различным событиям щелчка. Под этими двумя кнопками есть окно ввода, которое является контентом, который мы хотим отправить, а затем есть кнопка отправки. Кнопка «Отправить» соответствует событию Click для отправки сообщения. Это элемент всей страницы, очень простой. Давайте сосредоточимся на логическом коде JS здесь.
Метод подключения выполняется, когда я нажимаю кнопку подключения. var socket = new sockjs ('/endpointsang'); означает, что имя конечной точки подключенного sockjs является /endpointsang, stompclient = stomp.over (opcote); означает, что использование топма для создания клиента WebSocket. Затем вызовите метод Connect в Stompclient, чтобы подключиться к серверу. После того, как соединение будет успешным, вызовите метод SetConnected, который скрывает скрытый и отображает отображение. Затем, вызывая метод подписки в Stompclient, чтобы подписаться на сообщение, отправленное /The Teach /getResponse, то есть параметр аннотации @Sendto, который мы добавили в метод SAIP в контроллере. Метод отправки в Stompclient означает отправку сообщения на сервер, а остальные - это регулярное использование JS. Я не буду повторять это.
Настройте ViewController
Далее следует предоставить карты пути для ws.html:
@Configurationpublic class webmvcconfig extends webmvcconfigureradapter {@override public void addViewControllers (viewControllerRegistry) {registry.addviewController ("/ws"). SetViewName ("/ws"); }}Хорошо, после всего этого мы можем запустить проект. Я открываю несколько браузеров одновременно и отправляю сообщение на один из них. Посмотрим результаты:
Я отправляю сообщения в верхнем браузере, и оба других браузера получают от меня сообщения.
ОК, вышеуказанное - весь процесс использования WebSocket для реализации сообщения сообщений под платформой Spring Boot.
Загрузить адрес этого случая: демонстрация
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.