WebSocket 连接完整流程连接建立阶段

📅 2026/7/1 2:13:38
WebSocket 连接完整流程连接建立阶段
!-- websocket: 提供了对 WebSocket 协议的支持 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-websocket/artifactId /dependency简单的前后端WebSocket连接示例WebSocket 连接完整流程连接建立阶段前端初始化后端接收连接OnOpen public void onOpen(Session session, PathParam(sid) String sid) { System.out.println(客户端 sid 建立连接); sessionMap.put(sid, session); }连接确认消息交互阶段前端发送消息function send(){ var message document.getElementById(text).value; websocket.send(message); }后端接收处理消息OnMessage public void onMessage(String message, PathParam(sid) String sid) { System.out.println(收到来自客户端 sid 的信息: message); }后端主动推送消息public void sendToAllClient(String message) { CollectionSession sessions sessionMap.values(); for (Session session : sessions) { try { //服务器向客户端发送消息 session.getBasicRemote().sendText(message); } catch (Exception e) { e.printStackTrace(); } } }前端接收消息websocket.onmessage function(event){ setMessageInnerHTML(event.data); } function setMessageInnerHTML(innerHTML){ document.getElementById(message).innerHTML innerHTML br/; }连接关闭阶段主动关闭用户点击 关闭连接 按钮触发closeWebSocket()函数调用websocket.close()方法关闭连接function closeWebSocket() { websocket.close(); }页面关闭时关闭连接监听window.onbeforeunload事件在页面关闭前主动关闭 WebSocket 连接防止连接未断开就关闭页面导致服务器抛出异常window.onbeforeunload function(){ websocket.close(); }后端处理关闭OnClose public void onClose(PathParam(sid) String sid) { System.out.println(连接断开: sid); sessionMap.remove(sid); }前端关闭回调简单的代码实现注册WebSocket的ServerEndpointExporterConfiguration public class WebSocketConfiguration { /** * 注册WebSocket的ServerEndpointExporter * 扫描带有ServerEndpoint注解的类并注册成websocket服务 * * ServerEndpointExporter是Spring框架提供的一个用于支持WebSocket的核心组件它的主要作用是 * 扫描并注册WebSocket端点自动检测Spring容器中带有ServerEndpoint注解的类并将它们注册为WebSocket端点 * 创建和管理WebSocket实例负责为每个WebSocket连接创建对应的端点实例 * 连接生命周期管理处理WebSocket连接的建立、消息传输和关闭等生命周期事件 * * return */ Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }定义WebSocket服务端组件Component ServerEndpoint(/ws/{sid}) public class WebSocketServer { //存放会话对象 private static MapString, Session sessionMap new HashMap(); /** * 连接建立成功调用的方法 */ OnOpen public void onOpen(Session session, PathParam(sid) String sid) { System.out.println(客户端 sid 建立连接); sessionMap.put(sid, session); } /** * 收到客户端消息后调用的方法 * * param message 客户端发送过来的消息 */ OnMessage public void onMessage(String message, PathParam(sid) String sid) { System.out.println(收到来自客户端 sid 的信息: message); } /** * 连接关闭调用的方法 * * param sid */ OnClose public void onClose(PathParam(sid) String sid) { System.out.println(连接断开: sid); sessionMap.remove(sid); } /** * 群发 * * param message */ public void sendToAllClient(String message) { CollectionSession sessions sessionMap.values(); for (Session session : sessions) { try { //服务器向客户端发送消息 session.getBasicRemote().sendText(message); } catch (Exception e) { e.printStackTrace(); } } } }简单的前端!DOCTYPE HTML html head meta charsetUTF-8 titleWebSocket Demo/title /head body input idtext typetext / button οnclicksend()发送消息/button button οnclickcloseWebSocket()关闭连接/button div idmessage /div /body script typetext/javascript var websocket null; var clientId Math.random().toString(36).substr(2); //判断当前浏览器是否支持WebSocket if(WebSocket in window){ //连接WebSocket节点 websocket new WebSocket(ws://localhost:8080/ws/clientId); } else{ alert(Not support websocket) } //连接发生错误的回调方法 websocket.onerror function(){ setMessageInnerHTML(error); }; //连接成功建立的回调方法 websocket.onopen function(){ setMessageInnerHTML(连接成功);