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

拄杖忙学轻声码

已于 2023-02-20 19:02:26 修改

阅读量6.4k

点赞数 4

分类专栏： TCP\HTTP、WebSocket通信协议文章标签： websocket 网络协议

于 2023-02-16 23:47:11 首次发布

本文链接：https://blog.csdn.net/hkl_Forever/article/details/129074369

版权

TCP\HTTP、WebSocket通信协议专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

一、服务端

1、导入 websocket 依赖

		<!-- Socket -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

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<WsMessageService> webSockets = new CopyOnWriteArraySet<>();
    private static Map<String, WsMessageService> webSocketsBeanMap = new ConcurrentHashMap<>();

    //用来保存在线连接数
    //private static Map<String, Session> 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();
    }


    /**
     * <p>返回在线人数</p>
     *
     * @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脚本测试

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"content="width=device-width, initial-scale=1.0">
    <title>WebSocket测试</title>
    <script>
        function initWebSocket(wsUri) {
            var websocket = new WebSocket(wsUri);
            websocket.onopen = function(evt) {
                console.log('连接建立中... '+wsUri);
            };
            websocket.onclose = function(evt) {
                console.log('连接关闭中...', evt);
            };
            websocket.onmessage = function(evt) {
                console.log('收到来自服务端的消息：', evt.data);
            };
            websocket.onerror = function(evt) {
                console.log('发生错误...', evt);
            };
            return websocket;
        }
    
        //在此配置 websocket 的地址
        var websocket = initWebSocket("ws://localhost:6000/mpj/websocket/msg/1");
        var msg, i = 0;
        var loop = setInterval(function(){
            msg = "Hello " +(i++);
            if(websocket.readyState == WebSocket.OPEN) {
                websocket.send(msg);
                console.log('已发送消息：' +msg);
            } else{
                clearInterval(loop);
                console.log('连接已关闭，拜拜~');
            }
        }, 3000);
    </script>
</head>
<body>请按 F12 打开控制台查看消息
</body>
</html>

运行如下：

拄杖忙学轻声码

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
2
评论
SpringBoot集成WebSocket实现客户端与服务端长连接通信

1、WebSocket协议是用于前后端长连接交互的技术，此技术多用于交互不断开的场景。特点是连接不间断、更轻量，只有在关闭浏览器窗口、或者关闭浏览器、或主动close，当前会话对象才会关闭。第1步：var ws = new WebSocket("ws://localhost:7000/mpj/websocket/1");第2步：console.log("连接状态：", ws.readyState);3：CLOSED，表示连接已经关闭，或者打开连接失败。1：OPEN，表示连接成功，可以通信了。
复制链接

扫一扫