Spring Websocket на примере онлайн чата

Сегодня будет практичная но очень интересная тема: использование Websocket в Spring Boot приложении на примере онлайн чата.
Очень часто бывает необходимым получать данные с сервера без перезагрузки страницы. Для этого используют технологию AJAX. Но что делать если клиент не знает, когда будет ответ от сервера?

Можно например делать запрос на сервер каждые несколько секунд и смотреть — готов ли сервер дать нам информацию. Такой подход не самое хорошее решение. Особенно когда речь заходит об высоконагруженных системах с большим количеством пользователей. Тогда на помощь приходят веб сокеты.

Использование технологии веб сокетов без сторонних фреймворков или библиотек — занятие не самое удобное. Поэтому в данной статье мы рассмотрим Spring Websocket с библиотекой StompJS. Ведь нужно будет не только передавать сообщения с сервера, но и принимать их на клиенте.

На примерах все выглядит значительно проще, чем в теории. Современное программирование стало настолько простым, что скоро Вам нужно будет нажимать Ctrl+Space и Eclipse будет сам писать код))

Первое что нужно сделать — создать простое Spring Boot приложение. Далее нужно добавить необходимые зависимости для веб сокетов:

Для серверной части этого достаточно.

Напишем настройки для WebSocket:

Не пугаться!!! Здесь все просто. Аннотация @Configuration говорит, что это конфигурационный класс спринг приложения. @EnableWebSocketMessageBroker — указывает, что мы разрешаем работу с веб сокетами. Далее в методе configureMessageBroker мы указываем префиксы и адреса нашего веб сокет эндпоинта. В registerStompEndpoints подключается конечный адрес, по котором мы будем слушать и передавать сообщения. .withSockJS() — говорит, что будет использоваться библиотека SockJS которая является оберткой для стандартных веб сокетов и обеспечивает более удобное их использование.

Это все настройки, которые нужны для передачи сообщение по Websocket.

Для того, чтобы приложение слушало входящие сообщения и посылало исходящие, необходимо воспользоваться контроллером, который мы привыкли видеть в Spring MVC приложениях. Только вместо аннотаций @GetMapping и т.д. Нужно воспользоваться аннотациями, которые предназначены для Spring Websocket:

@MessageMapping — урл, по которому будет слушать наш сервер. @SendTo — урл, куда он отправит сообщение. Message — простой объект:

Можно передавать как объекты, так и список объектов. Можно просто строки или числа передавать. Здесь разницы нет. Для наглядности и предметной области я создал простой объект в которого только два поля: from — будет содержать имя адресата и message — само сообщение.

Вы же можете изменить объект как только пожелаете.

Это все, что касается серверной части. Если запустить приложение — оно будет слушать входящие сообщения и как только поймает хоть одно — сразу отправит его на клиент.

На этом можно было бы и закончить статью, но как по мне — нужно увидеть приложение в действии.

Давайте напишем клиентскую часть. Будет использовано HTML, CSS, Javascript, JQuery. Если Вы не знакомы с этими технологиями и языками программирования — не спешите закрывать статью. Код будет максимально понятным и простым. Для подключения необходимых библиотек, вместо того, чтобы качать я подключу их через Maven.

Для полноценной работы с веб сокетами мне нужны быблиотеки:

  • sockjs-client;
  • stomp-websocket.

Для оформления и стилизации кода я подключу bootstrap и jquery.

Мой полный файл pom.xml теперь выглядит так:

Для того, чтобы подключиться к веб сокетам на сервере нужно создать экземпляр класса SockJS: var socket = new SockJS(/chat-messaging);

В конструкторе указывается адрес эндпоинта, который мы указали в классе настроек WebSocketConfiguration. Так мы позволим нашему клиенту установить соединение с сервером. Для того, чтобы использовать сокеты через библиотеку Stomp — создадим stopClient: stompClient = Stomp.over(socket);

Чтобы не мучить Вас утомительными комментариями даю полный код клиентской части. Файл script.js имеет вид:

После того, как мы создали stompClient — вызывается метод connect в котором клиент подписывается на урл /chat/messages. Таким образом он будет слушать все, что придет по этому адресу без перезагрузки страницы. С информацией, которая придет от сервера можно делать все что угодно. В данном случае я ее распарсиваю var data = JSON.parse(response.body); и передаю в метод draw(«left», data.message);.

Метод draw нас в этой теме не интересует. Он выполняет функцию красивого наполнения странички информацией. Более интересен метод sendMessage. Когда он вызывается — идет отправление сообщение по адресу /app/message. Если Вы вернетесь к Java коду то увидите, что app — это destination prefix (смотримWebSocketConfiguration), а message конечный адрес, по котором слушает контроллер.

Для полноты картины я добавлю код файла index.html в который подключен наш script.js:

Стили оформления CSS файл style.css:

Эти файлы нужно поместить в src/main/resources/static тогда Spring Boot будет по умолчанию открывать файл index.html в котором и будет наш чат с подключенными стилями и js.

Полный код проекта Вы найдете по ссылке: https://github.com/caligula95/web-socket-chat 

Ну а теперь сама работа приложения:

Websocket Spring boot результат работы чата

Я записал видео с пошаговыми инструкциями создания приложение на Spring Websocket. Можете посмотреть его, если все еще не понятно, как сделать чат на веб сокетах:

Это все, что касается Spring Websocket. Тема очень обширная и интересная. Указанный пример не единственный способ работы с данным фреймворком. В нем есть еще очень много полезных методов, которым можно передавать информацию с сервера на клиент и обратно.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *