前后端 websocket 通信

古城微笑少年丶 2024-04-01 16:42 71阅读 0赞

#### 文章目录 ####

*  后端配置
 *  前端配置

**项目框架**

后端： springboot 项目  
前端： vue 项目

## 后端配置 ##

**pom** 文件添加依赖

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

**websocket** 实现类

*  ServerEndpoint 注解：定义 websocket 连接名，调用此接口时，开启 websocket 连接，即调用 onOpen 方法
 *  onOpen：开启连接
 *  onClose：关闭连接
 *  onMessage：接收对方发送的消息
 *  sendMessage：向所有连接此后台的另一端发送消息，即向前端发送消息

@Component
    @ServerEndpoint("/external/websocket")
    @Slf4j
    @EqualsAndHashCode
    public class WebSocket {
        
    
        private Session session;
    
        private static CopyOnWriteArraySet<WebSocket> webSocketSet=new CopyOnWriteArraySet<>();
    
        @OnOpen
        public void onOpen(Session session){
        
            this.session=session;
            webSocketSet.add(this);
            log.info("【websocket消息】 有新的连接，总数：{}",webSocketSet.size());
        }
    
        @OnClose
        public void onClose(){
        
            webSocketSet.remove(this);
            log.info("【websocket消息】 连接断开，总数：{}",webSocketSet.size());
        }
    
        @OnMessage
        public void onMessage(String message){
        
            log.info("【websocket消息】 收到客户端发来的消息：{}",message);
        }
    
        public void sendMessage(String message){
        
            for(WebSocket webSocket:webSocketSet){
        
                log.info("【websocket消息】 广播消息，message={}",message);
                try {
        
                    webSocket.session.getBasicRemote().sendText(message);
    
                }catch (Exception e){
        
                    log.error("【websocket消息】异常：{}", e);
                    throw ErrorExceptionEnum.UNKNOWN.getValue();
                }
            }
        }
    }

测试 websocket 连接  
postman 创建 WebSocket Request  
![在这里插入图片描述][e86db64342a94137adfb7240e651f5b6.png]

连接接口在 @ServerEndpoint 配置  
![在这里插入图片描述][37273ba1181f46d68adbf9b7323a7fd2.png]

后台打印：成功连接

2022-11-09 15:33:56.162  INFO  [TID: N/A]  c.n.j.controller.external.WebSocket:  【websocket消息】 有新的连接，总数：1

postman 发送消息 test  
![在这里插入图片描述][a9de403c924c485ea125895e5f7ed0bf.png]

后台打印：收到消息

2022-11-09 15:45:14.202  INFO  [TID: N/A]  c.n.j.controller.external.WebSocket:  【websocket消息】 收到客户端发来的消息：test

后台打印：断开连接

2022-11-09 15:33:53.464  INFO  [TID: N/A]  c.n.j.controller.external.WebSocket:  【websocket消息】 连接断开，总数：0

## 前端配置 ##

**前端** 配置 websocket 连接，修改 App.vue 文件

*  在 created 生命周期建立 websocket 连接
 *  根据 env 配置不同环境的域名

<template>
      <div id="app">
        <router-view />
      </div>
    </template>
    
    <script>
    export default {
        
      name: "App",
      watch: {
        
        "$store.getters.name": {
        
          deep: true,
          immediate: true,
          handler: function (val, oldVal) {
        
            if (val != "" && oldVal != "" && val != oldVal) {
        
              location.reload();
            }
          },
        },
      },
      data() {
        
        return {
        
          path: "",
          socket: "",
        };
      },
      mounted() {
        
        window.onbeforeunload = (e) => {
        
          if (
            location.pathname != "/401" &&
            location.pathname != "/404" &&
            location.pathname != "/app" &&
            location.pathname != "/"
          ) {
        
            sessionStorage.setItem("refresh", location.pathname);
          }
        };
      },
      created() {
        
        this.init();
      },
      methods: {
        
        init() {
        
          if (typeof WebSocket === "undefined") {
        
            alert("您的浏览器不支持webSocket,将体验不到系统部分功能！");
          } else {
        
            // 实例化socket
            this.socket = new WebSocket(
              `${
        
                process.env.VUE_APP_WebSocket
              }external/websocket`
              //   `ws://192.168.122.70:8888/external/webSocket`
            );
            // 监听socket连接
            this.socket.onopen = this.open;
            // 监听socket错误信息
            this.socket.onerror = this.error;
            // 监听socket消息
            this.socket.onmessage = this.getMessage;
          }
        },
        open() {
        
          console.log("socket连接成功");
        },
        error() {
        
          console.log("连接错误");
        },
        getMessage(msg) {
        
          console.log("接收消息 :>> ", msg.data);
          if (msg.data == this.$store.getters.pernr) {
        
            this.$store.dispatch("user/logout");
            // 登出系统
    
            location.replace(
              (localStorage.getItem("uat_login_url")
                ? localStorage.getItem("uat_login_url")
                : process.env.VUE_APP_LOGIN_URL) + "logout?type=passive"
            );
          }
        },
        send() {
        
          this.socket.send(params);
        },
        close() {
        
          console.log("socket已经关闭");
        },
      },
      destroyed() {
        
        // 销毁监听
        this.socket.onclose = this.close;
      },
    };
    </script>

**环境变量**配置，.env.dev 文件

# webscoket 链接地址
    VUE_APP_WebSocket = ws://dev.api.com/

此时，websocket 通道已连接，前端收到 websocket 后执行登出操作即可

[e86db64342a94137adfb7240e651f5b6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d3f90c9fd9dd4d15b12183de62fb37d8.png
[37273ba1181f46d68adbf9b7323a7fd2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1447b90d16cb409f80ae7ee58f68fbeb.png
[a9de403c924c485ea125895e5f7ed0bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/79009b510bc64ecc98b75d9fcf951899.png