websocket

Сегодня мы напишем простое приложение с использованием Spring, технологии WebSocket и протокола STOMP, использующегося поверх WebSocket. Клиентская часть будет представлять собой HTML-страницу с клиентским JavaScript кодом.

Посмотреть или скачать проект можно на моем GitHub‘е: https://github.com/JavaGrinko/spring-websocket-example

Постановка задачи

Необходимо реализовать приложение, которое будет обновлять цвет фона клиентской страницы каждую секунду без перезагрузки страницы.

Реализация

Так, как необходимо менять цвет клиента без перезагрузки страницы будем использовать JavaScript и технологию WebSocket.

Для начала, создадим конфигурационный файл build.gradle:

Данные зависимости обеспечат проект всеми библиотеками, необходимыми для поддержки WebSocket.

Создадим главный класс приложения с конфигурацией WebSocket:

Аннотация @EnableWebSocketMessageBroker включает брокер соединений WebSocket.

Аннотация @EnableScheduling нам необходима для включения аннотаций планирования задач. Это понадобится для обеспечения отправки сообщений на изменение цвета фона каждую секунду.

В методе registerStompEndpoints() регистрируются все конечные точки, которые будут обслуживаться SockJsHttpRequestHandler. Если вы в браузере перейдете по пути http://localhost:8080/color то увидите сообщение “Welcome to SockJS!”.

Сделаем POJO-класс для сообщения:

Класс-контроллер, обрабатывающий входящие и исходящие сообщения:

Метод receiveColor() слушает конечную точку /color и работает на прием сообщений.

Метод bgColor() аннотирован аннотацией @Scheduled и обеспечивает запуск этого метода каждую секунду. В методе формируется код произвольного цвета в формате HTML и отправляется сообщением через стандартный метод convertAndSend() класса SimpMessagingTemplate. Реализацией бина SimpMessagingTemplate нас обеспечивает проект spring-messaging.

Серверная часть закончена. Приступим к созданию клиента:

Здесь используется две библиотеки: sockjs.min.js версии 1.0.3 и stomp.js. После успешного подключения происходит подписка на очередь /topic/color для получения сообщений. После принятия сообщения происходит его парсинг как JSON объекта и достается поле color. Далее, полученный цвет устанавливается как цвет фона и после этого отправляется обратно в конечную точку /color.

Таким образом, при работающем клиенте вы видим меняющийся цвет фона, а в логе IDE следующий текст:

Всё! Приложение готово!

Для тестирования web-клиента я использовал браузер FireFox и плагин Firebug 2.0.13. Firebug позволяет отлаживать JavaScript код и мониторить лог.

Посмотреть или скачать проект можно на моем GitHub’е: https://github.com/JavaGrinko/spring-websocket-example

Мой профиль на GitHub: https://github.com/JavaGrinko

Простое Spring WebSocket приложение + JS-клиент
Метки:                

4 thoughts on “Простое Spring WebSocket приложение + JS-клиент

Добавить комментарий для GetUsername Отменить ответ

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">