vue使用SockJS实现webSocket通信

由于项目的需求，需要访问网关因此需要使用http的连接方式进行socket信息推送，因此用的是 SockJS。

1、下载引入： 

1) 首先执行npm i sockjs-client stompjs -S

2) import SockJS from "sockjs-client";    import Stomp from "stompjs";

2、 在methods里定义 webSocket的connection以及取消订阅websocket的 disconnect，代码如下：

 webSocketJS() {
    let socket = new SockJS("/websocket/ws/sockjs");
    this.stompClient = Stomp.over(socket);
    //心跳机制
    //若使用STOMP 1.1 版本，默认开启了心跳检测机制，可通过client对象的heartbeat field进行配置
 （默认值都是10000 ms）：
    this.stompClient.heartbeat.outgoing = 10000; //前端对后端进行心跳检测的时长 ms
    this.stompClient.heartbeat.incoming = 0; //后端对前端就行心跳检测的时长 ms

    //去掉debug打印
    this.stompClient.debug = null;

    //这里是订阅路径，如果你要点对点的推送消息，就是这种格式”/user“是前缀，
    //“/machineId ”是订阅的机体Id，
    //“/single”就是个标识，加不加无所谓，加上可能比较容易理解吧，这些都要跟你的后端设置对应上

    //开始连接
    this.stompClient.connect(
      {},
      () => {
        console.info("[WebSocket] 连接请求发送成功!");
        //进行订阅服务
        //***连接
        this.subscribeUrl ="/user/" + machineId + "/single";
         this.stompClient.subscribe(this.subscribeUrl, (message) => {
            //后端ws推送的数据
            let data = this.getRealJsonData(message.body);
            console.log(data, 'data--');//打印后端推送的数据，根据你需要的数据进行编写
              //拷贝ws中data到页面属性
              for (let item in data) {
                this.formDevice[item] = data[item];
              }
             //JSON 支持
            //STOMP 帧的 body 必须是 string 类型，若希望接收/发送 json 对象，
            //可通过 JSON.stringify() and JSON.parse() 实现；
              if (JSON.stringify(data) != '{}') {
                   .....
             }
          });

        return true;
      },
      () => {
        // 断开连接
        console.log("连接请求发送失败");
        //一连接请求发送失败就关闭
        this.buttonStatus = true;
        
      });
    },

3、在created()执行连接，在destroyed()取消订阅，代码如下：

created(){
// 链接Websocket
  this.webSocketJS();
}

// 取消订阅webSocketJS，后面需更新其他飞机的实时推送的数据
   destroyed() {
     console.log('取消订阅');
     this.stompClient.disconnect();  //离开路由之后断开websocket连接
   },

以上就是vue使用SockJS实现webSocket通信过程，如有写的不好可指出哈，对你有用麻烦点赞一下哈~

参考链接：websoket前端基本使用：WebSocket的使用方法（JS前端）_前端websocket怎么用-CSDN博客