https://keyholesoftware.com/2017/04/10/websockets-with-spring-boot/
作者:THOMAS KENDALL
译者:oopsguy.com
在开发 Web 应用程序时,我们有时需要将服务端事件推送到连接的客户端。但 HTTP 并不能做到。客户端打开与服务端的连接并请求数据,但服务端不能打开与客户端的连接并推送数据。
为了解决这个限制,我们可以建立了一个轮询模式,网页会间隔地轮询服务器以获取新事件。但这种模式不太理想,因为它增加了 HTTP 开销,速度也只能达到与轮询的速率一样快,并且给服务器增加了不必要的负载。
幸运的是,HTML5 WebSocket 出现了。WebSocket 协议允许浏览器与 Web 服务器之间进行低开销的交互。在文中,我们将介绍 Websockets API,并展示如何使用 Spring Boot 实现 Websockets。
WebSockets 通过浏览器和服务器之间的单连接提供全双工通信。它不存在 HTTP 开销,并且允许服务器将消息实时推送到客户端。
WebSocket API 实际上很简单。您只需要创建一个 WebSocket
对象,附加事件监听器和发送消息即可。
以下是一个例子:
var socket = new WebSocket('ws://' + window.location.host + '/my-websocket-endpoint'); // Add an event listener for when a connection is open socket.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 server socket.onmessage = function(message) { console.log('Message received from server: ' + message); };
Spring 对 WebSockets 接口提供了很好的支持。
首先,我们需要创建一个类,继承 Spring 的 TextWebSocketHandler
类。
public class MyMessageHandlerextends 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 端点。
@Configuration @EnableWebSocket public class WebsocketConfigimplements WebSocketConfigurer{ @Bean public WebSocketHandler myMessageHandler(){ return new MyMessageHandler(); } @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry){ registry.addHandler(myMessageHandler(), "/my-websocket-endpoint"); } }
由于 WebSockets API 是纯 JavaScript,您可以在大多数前端框架中它。包括 Angular,您可以在 TypeScript 中包含 JavaScript 代码。