目录前言一、websockt是什么Websockt与 HTTP协议的核心区别二、后端代码实现三、前端代码实现总结前言本文目标springboot实现websocket通信并且实现聊天功能。一、websockt是什么WebSocket 是一种在单个 TCP 连接上实现全双工通信的网络协议旨在解决传统 HTTP 协议在实时通信场景中的局限性。Websockt与 HTTP协议的核心区别HTTP 是单向、无状态的请求 - 响应协议客户端必须主动发起请求服务端才能响应服务端无法主动向客户端推送数据每次请求都需要建立新的 TCP 连接HTTP/1.1 虽支持长连接但仍需客户端主动发起请求。而 WebSocket 实现了双向、持久的实时通信一旦连接建立客户端和服务端可随时互相发送数据无需频繁发起请求连接建立后保持持久直到某一方主动关闭大幅降低了连接开销。二、后端代码实现编写websocket配置类。Configuration public class WebSocketConfiguration { Bean public ServerEndpointExporter serverEndpointExporter(){ return new ServerEndpointExporter(); } }编写websocket实现类。Component ServerEndpoint(/ws/{id}) public class WebSocket { private static MapString, Session sessionMap new HashMap(); OnOpen public void onOpen(Session session){ MapString, ListString parameters session.getRequestParameterMap(); String token parameters.get(token).get(0); String id TokenUtil.webSocketGetUser(token).getId().toString(); sessionMap.put(id,session); System.err.println(id); } OnMessage public void onMessage(String message,PathParam(id) String id,Session session){ MapString, ListString parameters session.getRequestParameterMap(); //获取用户连接集合 String token parameters.get(token).get(0); //通过路径携带参数获取接收者id Integer id1 TokenUtil.webSocketGetUser(token).getId(); //通过token获取用户id System.out.println(收到来自客户端的信息message发给id); sendToOneClient(id,message); } OnClose public void onClose(Session session){ MapString, ListString parameters session.getRequestParameterMap(); String token parameters.get(token).get(0); String id TokenUtil.webSocketGetUser(token).getId().toString(); sessionMap.remove(id); } public void sendToOneClient(String id,String message) { Session session1 sessionMap.get(id); try { session1.getBasicRemote().sendText(message); } catch (Exception e){ e.printStackTrace(); } } public static void sendToAllClient(String message) { CollectionSession sessions sessionMap.values(); for (Session session : sessions) { try { session.getBasicRemote().sendText(message); } catch (Exception e){ e.printStackTrace(); } } } }该实现类中接口地址ws://xxx/ws/{id}xxx是服务后端的地址加上端口号前端连接时url 参数带上 token如ws://127.0.0.1:8080/ws/接收方id?tokenxxx。其中id可以是任何用于区分接收方的值。接下来介绍该实现类中的主要部分首先sessionMap是静态 Map该实例全局共享。其中key 用户 id 字符串value 当前用户的 webSocket 会话 session。它的作用是保存所有在线用户并用来定向发消息。接下来是几个方法的详细讲解OnOpen注解的函数在客户端建立连接时触发。当客户端和该服务建立连接时先获取客户端带过来的用户token通过token解析用户信息这里获取用户id在用户登录时生成token需要使用用户id生成随后把可以识别用户唯一标识的信息存入sessionMap。即表示该用户在线。OnMessage注解的函数在收到客户端消息时触发。形参中的 message 为消息内容因此可以获取到发送人id、接收人id以及发送消息内容三样东西可以形成一个两人聊天的闭环。其中PathParam(id) String id 用来获取路径中所传递的接收方id。OnClose注解的函数在客户端断开连接时触发。当客户端关闭 ws 连接时解析当前用户会话的session和对应的token并拿到用户 id从 sessionMap 移除该 session表示该用户下线。最后就是两个发送消息的函数第一个是 sendToOneClient接收的参数分别为接收方id和消息内容。使用接收方id便可以在 sessionMap 中找到接收方的会话 session。调用该session的getBasicRemote().sendText() 方法就可以实现把消息发送给接收方。但是在这一步如果接收方不在线即 sessionMap 中没有该用户的 session那么消息将无法送达。因此可以在这一步之前添加其它业务的代码如将对应的消息内容、发送方id、接收方id以及发送时间保存至数据库实现接收方用户登录时可以查看到所收到的所有消息。第二个是 sendToAllClient接收的参数为消息内容。该函数会先遍历 sessionMap随后对sessionMap 中所有的 session 所有在线用户发送对应的消息内容。以上是websocket的后端实现更多的玩法如群聊等等都可以在这些基础功能函数上进行拓展。三、前端代码实现代码如下// 替换成你的后端地址200是接收方id const ws new WebSocket(ws://127.0.0.1:8080/ws/200?tokenxxx); //连接创建时调用的函数 ws.onopen function() { console.log(连接成功); } //收到消息时调用的函数 ws.onmessage function(e) { console.log(收到消息, e.data); } //连接关闭时调用的函数 ws.onclose function() { console.log(连接关闭); } // 捕获连接过程中的异常 ws.onerror function(err) { console.error(错误, err); } //向接收方发送消息时调用的函数 function send() { const val document.getElementById(msg).value; ws.send(val); }这段 JS 代码创建 WebSocket 实例连接地址中指定接收方 id与身份 token。ws.onopen在 WebSocket 成功建立连接时触发打印连接成功日志ws.onmessage用于监听后端推送过来的消息ws.onclose在连接关闭时执行输出关闭日志ws.onerror捕获连接过程中的异常并打印错误信息自定义 send 函数读取输入框内容通过 ws.send 把消息内容发送给后端。总结本文实现了前后端的 websocket 通信。希望对未来的架构师们有帮助~
