Spring Boot中的WebSocket

很多网站为了实现推送技术，所用的技术都是轮询。轮询是在特定的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

在这种情况下，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

(资料图片)

简介

WebSocket是一种在单个TCP连接上进行全双工通信的协议。

WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

特点

•较少的控制开销。相对于HTTP请求每次都要携带完整的头部，开销显著减少了。

•更强的实时性。由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。

•保持连接状态。Websocket需要先创建连接，是一种有状态的协议，之后通信时可以省略部分状态信息。而HTTP请求可能需要在每个请求都携带状态信息（如身份认证等）。

•更好的二进制支持。Websocket定义了二进制帧，相对HTTP，可以更轻松地处理二进制内容。

•可以支持扩展。Websocket定义了扩展，用户可以扩展协议、实现部分自定义的子协议。如部分浏览器支持压缩等。

•更好的压缩效果。相对于HTTP压缩，Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率。

在SpringBoot项目中创建WebSocket Server项目依赖（Maven）

4.0.0cn.jeremysongdemo1.0org.springframework.bootspring-boot-starter-parent3.0.3org.springframework.bootspring-boot-starter-websocket3.0.3

WebSocket服务

importorg.springframework.context.annotation.Bean;importorg.springframework.stereotype.Component;importorg.springframework.web.socket.server.standard.ServerEndpointExporter;/***ServerEndpointExporter作用**这个Bean会自动注册使用@ServerEndpoint注解声明的websocketendpoint**/@ComponentpublicclassWebSocketConfig{@BeanpublicServerEndPointExporterserverEndPointExporter(){returnnewServerEndPointExporter();}}

importlombok.extern.slf4j.Slf4j;importorg.springframework.stereotype.Component;importjavax.websocket.OnClose;importjavax.websocket.OnMessage;importjavax.websocket.OnOpen;importjavax.websocket.Session;importjavax.websocket.server.PathParam;importjavax.websocket.server.ServerEndpoint;importjava.io.IOException;importjava.util.concurrent.ConcurrentHashMap;@Slf4j@Component@ServerEndpoint("/websocket/{name}")publicclassWebSocket{privateSessionsession;privateStringname;privatestaticConcurrentHashMapwebSocketSet=newConcurrentHashMap<>();@OnOpenpublicvoidonOpen(Sessionsession,@PathParam(value="name")Stringname){this.session=session;this.name=name;webSocketSet.put(name,this);}@OnClosepublicvoidonClose(){webSocketSet.remove(this.name);}@OnMessagepublicvoidonMessage(Stringmessage){log.info("{}send{}",this.name,message);}/***群发*@parammessage消息内容*/publicvoidgroupSending(Stringmessage){for(Stringname:webSocketSet.keySet()){try{webSocketSet.get(name).session.getBasicRemote().sendText(message);}catch(IOExceptione){e.printStackTrace();}}}/***指定发动消息*@paramname指定的客户端名*@parammessage消息内容*/publicvoidappointSending(Stringname,Stringmessage){try{webSocketSet.get(name).session.getBasicRemote().sendText(message);}catch(IOExceptione){e.printStackTrace();}}}

使用JavaScript创建WebSocket ClientWebSocket客户端

letwebsocket=null;if("WebSocket"inwindow){websocket=newWebSocket("ws://localhost:8888/websocket/cli-1");websocket.onopen=function(){console.log("连接成功");};websocket.onclose=function(){console.log("退出连接");};websocket.onmessage=function(event){console.log("收到消息："+event.data);};websocket.onerror=function(){console.log("连接出错");};//MDNExamplewebsocket.addEventListener("open",function(event){websocket.send("HelloServer!");});websocket.addEventListener("message",function(event){console.log("Messagefromserver",event.data);});websocket.addEventListener("error",function(event){console.log("WebScoketerror:",event);});}window.onbeforeunload=function(){//页面关闭时关闭WebSocket连接websocket.close(1000);};

在Chrome console中测试

执行如下命令时可以在Server端添加日志输出和debug观察交互现象。

>ws1=newWebSocket("ws://localhost:8888/websocket/name1");>ws1.send("Sendmessagetoserver!Iamname1");>ws2=newWebSocket("ws://localhost:8888/websocket/name2");>ws2.send("Sendmessagetoserver!Iamname2");>ws1.close(1000);>ws2.close(1000);

参考

•WebSocket - MDN:

https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

•CloseEvent - MDN:

https://developer.mozilla.org/zh-CN/docs/Web/API/CloseEvent#status_codes---- END ----

---

欢迎关注我的公众号“须弥零一”，原创技术文章第一时间推送。