Spring集成webSocket详解

最新推荐文章于 2024-05-29 17:55:17 发布

原创

最新推荐文章于 2024-05-29 17:55:17 发布 · 置顶 · 2.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#spring #websocket #实时通信 #聊天系统

本文详细介绍了Spring集成WebSocket的实战经验，包括前端配置、后端配置的关键步骤，如uid的处理和WebSocketSession的使用。文章强调了在前后端分离环境下解决session获取和跨域问题的重要性，并分享了作者自己封装的WebSocket Spring Boot Starter的GitHub源码链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

踩坑总结

因为之前从来没有接触过，所以网上找了很多教程最后发现都不怎么完整，大多数都是直接全盘照抄《Spring Boot》一书中的相关示例，没有做任何修改，没有说明为什么一定要用spring security，而下面的教程自己也是踩了不少坑，如前后分离中session一直获取不到，导致无法链接上，uid不可为中文，websocket自带协议和服务，导致前后端分离一直报跨域的错误等等。当然websocket一些解释在这边就不多说了，相信你已经看了很多教程了，我们就直接上配置教程

前端配置

前端配置相对比较简单，主要就是websocket服务的注册，消息的发送和接收。比较关键的点：uid的定义。

    // 用户的特殊标志，一般用id或者生成的uuid，后台为Long，不可带有中文，并且这些值如果从session中获取，需要注意前后端分离带来的session，否则会报错,这些参数主要对应着后台的message类，用于信息的发送
    let from = '';
    let fromName = '';
    let to = 5521;
    let host = window.location.host;
    let webSocket = "";
    // 不同的浏览器对websocket的支持不同
    if ('WebSocket' in window) {
    // 最关键的点，ws必须加上，不可用http，因为两者的协议是不同的，websocket有自带的请求协议，uid是为了将用户的id注册到websocket的服务中
        webSocket = new WebSocket("ws://127.0.0.1:8090/ws?uid=" + from);
    } else if ('MozWebSocket' in window) {
        webSocket = new MozWebSocket("ws://" + host + "/ws" + from);
    } else {
        webSocket = new SockJS("ws://" + host + "/ws/sockjs" + from);
    }
    // 链接，错误，关闭，收到消息相关的回掉函数
    webSocket.onopen = function (event) {
   
   
        console.log("WebSocket:已连接");
    };
    webSocket.onerror = function (event) {
   
   
        console.log("WebSocket:发生错误 ");
        console.log(event);
    };
    webSocket.onclose = function (event) {
   
   
        console.log("WebSocket:已关闭");
        console.log(event);
    };
    webSocket.onmessage = function (event) {
   
   
    // 接收到的消息的对象
        let data = JSON.parse(event.data);
    };
    // 发送消息的实例
    function sendMsg() {
   
   
        let data = {};
        data["from"] = from;
        data["fromName"] = fromName;
        data["to"] = to;
        data["text"] = "我发给你一条信息";
        webSocket.send(JSON.stringify(data));
    }

后端配置

先添加maven相关依赖
       <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>