SpringBoot+ vue3 集成websocket Stomp

SpringBoot 后端：

4. 配置maven

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

2. WebSocketConfig.java 配置

package com.example.demoserver.config;

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

/**
 * @description:
 * @author:houqd
 * @time: 2022/5/28 16:22
 */
@Slf4j
@Configuration
//注解开启使用STOMP协议来传输基于代理(message broker)的消息,这时控制器支持使用@MessageMapping,就像使用@RequestMapping一样
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/webSocket")//注册为STOMP的端点
                .setAllowedOriginPatterns("*")//可以跨域
                .withSockJS();//支持sockJs
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        // 设置广播节点
        registry.enableSimpleBroker("/topic");
//        // 客户端向服务端发送消息需有/app 前缀
//        registry.setApplicationDestinationPrefixes("/app");
//        // 指定用户发送（一对一）的前缀 /user/
//        registry.setUserDestinationPrefix("/user");
    }
}

Vue3 前端：

1. npm 安装

npm install sockjs-client@^1.6.1 --save
npm install stompjs@^2.3.3 --save

2. vue 页面引入

import SockJS from 'sockjs-client/dist/sockjs.min';
import Stomp from 'stompjs';


// websocket 相关
const  ws = {
  url: "/dev-api/webSocket",
  socket: null,
  stompClient: null,
  reconnecting: false,
  headers: {Authorization: ''}
}
onMounted(()=>{
  initWebSocket(ws.url);
})
function initWebSocket(url){
  ws.socket = new SockJS(url);
  ws.stompClient = Stomp.over(ws.socket);

  ws.stompClient.connect(
      ws.headers,// 可添加客户端的认证信息
      frame => {// 连接成功回调
        console.log("webSocket 连接成功")
        connectSucceed()
      },
      error=>{
        console.log("webSocket 连接失败："+error);
        reconnect(ws.url,connectSucceed)
      }
  )
}
function connectSucceed(){
  // ws.stompClient.heartbeat.outgoing = 10000;
  // ws.stompClient.heartbeat.incoming = 0;
  ws.stompClient.subscribe('/topic/controll/acs',function(response){
    const result = JSON.parse(response.body);
    console.log("websocket 推送："+result)

    axios.get("demo2.json").then(res=>{
      prview_data.value = res.data;
      let temp: Array<any> = [...res.data];
      const list = temp.filter(f=>f.title=='device1_V');
      const list2 = temp.filter(f=>f.title=='device1_IA');
      const list3 = temp.filter(f=>f.title=='device1_IB');
      const list4 = temp.filter(f=>f.title == 'CircuitBreaker1');

      const list5 = temp.filter(f=>f.title=='device2_V');
      const list6 = temp.filter(f=>f.title=='device2_IA');
      const list7 = temp.filter(f=>f.title=='device2_IB');


      list.forEach(v=>{
        (v as any).extend_attr.text.val = result.V
      })
      list2.forEach(v=>{
        (v as any).extend_attr.text.val= result.IA
      })
      list3.forEach(v=>{
        (v as any).extend_attr.text.val= result.IB
      })
      list4.forEach(v=>{
        (v as any).extend_attr.switch.val.selectval = result.CircuitBreaker1 == 0? '{\"fill\":\"#FF0000\"}':'{\"fill\":\"#00FF00\"}';
      })

      list5.forEach(v=>{
        (v as any).extend_attr.text.val = result.V2
      })
      list6.forEach(v=>{
        (v as any).extend_attr.text.val= result.IA2
      })
      list7.forEach(v=>{
        (v as any).extend_attr.text.val= result.IB2
      })

      const tempa = JSON.stringify(temp)
      prview_data.value = JSON.parse(tempa);
    })

  })

}
let count = 1;
function reconnect(socketUrl,callback){
  ws.reconnecting = true;
  let connected = false;
  const timer = setInterval(()=>{
    ws.socket = new SockJS(socketUrl);
    ws.stompClient = Stomp.over(ws.socket);
    ws.stompClient.connect(ws.headers,frame =>{
      ws.reconnecting = false;
      connected = true;
      clearInterval(timer);
      callback();
    },error=>{
      console.log("WebSocket Reconnected failed!")
      count += count;
      if (!connected){
        console.log(error)
      }
      if (count >10){
        clearInterval(timer);
      }
    })
  },1000)

}
function closeSocket(){
  if (ws.stompClient !=null){
    ws.stompClient.disconnect()
  }
}