SpringBoot集成WebSocket实现客户端与服务端长连接通信

场景：
1、WebSocket协议是用于前后端长连接交互的技术，此技术多用于交互不断开的场景。特点是连接不间断、更轻量，只有在关闭浏览器窗口、或者关闭浏览器、或主动close，当前会话对象才会关闭。
2、相较于 Http/Https 通信只能由客户端主动发起请求，而 Socket 通信不仅能由客户端主动发起请求、服务端也可能主动给客户端推送消息

这里只是简单的记录一下使用方式

一、服务端

1、导入 websocket 依赖

		
        
            org.springframework.boot
            spring-boot-starter-websocket
        

2、配置 WebSocket 通信协议标准(服务端点导出)对象

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

说明：
如果没有配置 WebSocket 通信协议标准对象，可能会导致如下错误：

错误一：
VM105:1 WebSocket connection to 'ws://xxx:7002' failed: Error during WebSocket handshake: Unexpected response code: 404

错误二：
This request has been blocked; this endpoint must be available over WSS.

错误三：
VM78:1 WebSocket connection to 'wss://xxx:7002' failed: Error in connection establishment: net::ERR_SSL_PROTOCOL_ERROR

错误四(没有携带token或密钥)：
VM78:1 WebSocket connection to 'wss://xxx:7002' failed: Error in connection establishment: net::ERR_SSL_PROTOCOL_ERROR

3、服务端的四个注解方法，对应触发事件

@OnOpen：连接成功交互初始化
@OnMessage：消息事件
@OnClose：关闭事件
@OnError：异常事件

4、websocket 事件服务类，可以理解为Restful Api的映射类(controller)

@Slf4j
@Component
@ServerEndpoint("/websocket/msg/{userId}")
public class WsMessageService {

    //与某个客户端的连接会话，通过此会话对象给客户端发送数据
    private Session session;

    //concurrent包的线程安全Set，用来存放每个客户端对应的WebSocket对象。
    //注：泛型是当前类名
    //private static Set webSockets = new CopyOnWriteArraySet<>();
    private static Map webSocketsBeanMap = new ConcurrentHashMap<>();

    //用来保存在线连接数
    //private static Map sessionPool = new HashMap<>();

    //每次连接都是一个新的会话对象，线程安全的
    String userId;


    @OnOpen
    public void onOpen(Session session, @PathParam(value = "userId") String userId) {
        this.session = session;
        this.userId = userId;
        webSocketsBeanMap.put(userId, this);
        log.info("OnOpen连接成功，userId：{}，当前在线人数：{}", userId, this.getOnLineCount());
    }

    @OnMessage
    public void onMessage(String message) throws IOException {
        Session session = webSocketsBeanMap.get(this.userId).session;
        if (ObjectUtil.isNull(session) || !session.isOpen()) {
            return;
        }
        log.info("收到客户端的消息:" + message);
        this.session.getBasicRemote().sendText(String.valueOf(this.getOnLineCount()));
    }

    @OnClose
    public void onClose() throws IOException {
        log.info("会话关闭，关闭会话的用户Id为：{}", this.userId);
        webSocketsBeanMap.remove(this.userId);
        log.info("当前在线人数：{}", this.getOnLineCount());
    }

    @OnError
    public void onError(Session session, Throwable error) {
        log.error("连接错误：" + error.getMessage());
        error.printStackTrace();
    }


    /**
     * 
返回在线人数
     *
     * @author hkl
     * @date 2023/2/16
     */
    private int getOnLineCount() {
        return webSocketsBeanMap.size();
    }

}

 到这里服务端demo已经完成，可以使用浏览器、HTML页面、Apipost测试

二、测试验证

连接语法：ws://IP地址:端口号

1、使用 Apipost 工具测试

【1】下载安装 Apipost

【2】输入访问地址、连接、发送消息，如下

2、用浏览器测试
第1步：var ws = new WebSocket("ws://localhost:7000/mpj/websocket/1");
第2步：console.log("连接状态：", ws.readyState);

连接状态说明：
0：CONNECTING，表示正在连接。
1：OPEN，表示连接成功，可以通信了。
2：CLOSING，表示连接正在关闭。
3：CLOSED，表示连接已经关闭，或者打开连接失败

第3步：ws.send("hello"); 

示例如下：

 服务端收到消息：

3、使用 html 页面编写js脚本测试

    
    
    
    

请按 F12 打开控制台查看消息

运行如下：