При разработке веб-приложений нам иногда необходимо передавать события сервера подключенным клиентам. Однако HTTP не был предназначен для этого. Клиент открывает соединение с сервером и запрашивает данные. Сервер не открывает соединение с клиентом и не передает данные.
Чтобы обойти это ограничение, был установлен шаблон опроса, где веб-страницы периодически опрашивали сервер на наличие новых событий. Этот шаблон не был идеальным, так как он добавлял издержки HTTP, был так же быстр, как частота опроса, и вызывал ненужную нагрузку на сервер.
К счастью, с появлением HTML5 появился WebSocket. Протокол WebSocket обеспечивает взаимодействие между браузером и веб-сервером с меньшими издержками. В этом блоге мы познакомимся с API Websockets и покажем, как реализовать Websockets с помощью Spring Boot.
HTML5 на помощь!
WebSockets обеспечивают полнодуплексную связь через одно соединение между браузером и сервером. Он не имеет издержек HTTP и позволяет серверу отправлять сообщения клиенту в режиме реального времени.
API WebSocket на самом деле довольно прост. Создайте объект WebSocket , присоедините прослушиватели событий и отправьте сообщения.
Вот пример:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
var socket = new WebSocket('ws://' + window.location.host + '/my-websocket-endpoint');// Add an event listener for when a connection is opensocket.onopen = function() { console.log('WebSocket connection opened. Ready to send messages.'); // Send a message to the server socket.send('Hello, from WebSocket client!');};// Add an event listener for when a message is received from the serversocket.onmessage = function(message) { console.log('Message received from server: ' + message);}; |
Весенний ботинок
Spring имеет отличную поддержку взаимодействия с WebSockets.
Во-первых, нам нужно создать класс, который расширяет класс TextWebSocketHandler .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
public class MyMessageHandler extends TextWebSocketHandler { @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { // The WebSocket has been closed } @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { // The WebSocket has been opened // I might save this session object so that I can send messages to it outside of this method // Let's send the first message session.sendMessage(new TextMessage("You are now connected to the server. This is the first message.")); } @Override protected void handleTextMessage(WebSocketSession session, TextMessage textMessage) throws Exception { // A message has been received System.out.println("Message received: " + textMessage.getPayload()); }} |
Далее нам нужно настроить нашу конечную точку WebSocket .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
@Configuration@EnableWebSocketpublic class WebsocketConfig implements WebSocketConfigurer { @Bean public WebSocketHandler myMessageHandler() { return new MyMessageHandler(); } @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(myMessageHandler(), "/my-websocket-endpoint"); }} |
Поскольку API WebSockets — это чистый JavaScript, вы должны иметь возможность использовать его в большинстве интерфейсных сред. Это включает в себя Angular, поскольку вы можете включить JavaScript прямо там с TypeScript.
Последние мысли
Довольно просто, и это решает большую головную боль в отношении передачи данных между сервером и клиентом одновременно. Spring Boot делает это еще проще.
Хотите увидеть Websockets в действии? В Keyhole мы создали инструмент Trouble Maker с открытым исходным кодом, который внедряет сбои в нашу платформу, чтобы мы могли испытать и протестировать механизмы восстановления, которые делают платформу устойчивой. Trouble Maker имеет угловой интерфейс и использует WebSockets для связи в реальном времени. Проверьте Github Repo, чтобы попробовать его в действии.
| Ссылка: | Коммуникация в реальном времени: внедрение веб-сокетов с помощью Spring Boot от нашего партнера JCG Томаса Кендала в блоге Keyhole Software . |