WebSocket基础知识以及设计思路

基础知识

后端

1. 后端通过配置文件注册一个ServerEndpointExporter类型的bean，顾名思义，该类叫做服务端点导出器，该bean会自动扫描并组测用注解@ServerEndpoint标记的类。

2. 使用@ServerEndpoint标注的类，会被ServerEndpointExporter扫描注册成一个服务端点，可以理解为一个webSocket的服务器，@ServerEndpoint具有一个value属性，该属性用来指定连接该服务端点的uri，该uri可以包含如/chatServer/{id}这样的uri模板，只要id不同则可进行多个webSocket连接，否则如value设置为"/chatServer"的服务端点将只会接受一个uri为"/chatServer"的连接。

3. @ServerEndpoint标注的服务端点类，包含一下几个常用的注解

   1. @OnOpen

      用于监听建立连接，当有客户端与该服务端点建立连接时，将会自回调该注解标注的方法

   2. @OnClose

      用于监听连接关闭，当客户端与该服务端点断开连接时，将会回调该注解标注的方法

   3. @OnError

      用于监听该连接上的任何错误，当客户端与该服务端点的连接发生任何异常，都将回调该注解标注的方法

      注意该方法的参数必选Throwable，可选Sessiion以及0-n个String参数，且String参数需要使用@PathParam注解标注

   4. @OnMessage

      用于监听客户端向服务端发送消息，当客户端与服务端发送消息时，将会回调该注解标注的方法

   5. @OnPathParam

      用以获取连接上的uri模块中的值

4. session对象

   一个session即一个webSocket连接，使用对应的session调用其getBasicRemote().sendText("message")即可向其发送消息

前端

1. 构建一个连接服务端点的socketUrl,WebSocket使用的是ws协议，所以以ws开头，uri和后端服务端点定义的value保持一致，如@ServerEndpoint(value="/chatServer/{username}")

   let socketUrl = "ws://localhost:8080/chatServer/" + username;

1. 根据socketUrl创建一个socket对象

   const socket = new WebSocket(socketUrl);

1. 为socket对象的属性设置回调函数

   //连接建立时触发
   socket.opopen = () - > {}
   //接收到来自服务器的消息时触发
   socket.onmessage = () -> {}
   //连接关闭时触发
   socket.onclose= () -> {}
   //连接发生异常时触发
   socket.οnerrοr= ()-> {}

1. 使用socket对象的方法发送消息

   socket.send("message")；

1. 关闭socket的连接

   socket.close();

总体思路

后端利用@ServerEndpointExporter和@ServerEndpoint注册一个WebSocket的服务端点，并通过注解监听相应的事件，前端创建一个WebSocket的对象，通过为WebSocket的属性设置回调函数监听以及send()方法向服务器发送消息

业务细节：

后端需要使用一个集合保存当前连接的用户的session，用于向这些session连接发送消息，最好为每个session使用一个key标记

比如使用hashMap，key为用户名，value为该用户的session，接收到消息时根据消息中的用户名去拿到对应的消息，然后向其发送消息