websocket

不带订阅的websocket接口

//websocket接口//created里面触发

WebSocketTest()

WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               // 打开一个 web socket
               var ws = new WebSocket("ws://192.168.2.66:8118/risk");
                this.ws=ws
                console.log(ws);
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
               
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  console.log(evt);
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
            
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
  },

订阅websocket接口

//websocket接口//created里面触发
    this.WebSocketTest();

 methods: {
    //websocket接口
    initWebSocket() {
      this.connection();
      let that = this;
      // 断开重连机制,尝试发送消息,捕获异常发生时重连
      this.timer = setInterval(() => {
        try {
          that.stompClient.send("test");
        } catch (err) {
          //console.log("断线了: " + err);
          that.connection();
        }
      }, 5000);
    },
    connection() {
      // 建立连接对象
      let socket = new SockJS("http://vtoxbase.dev.internal.virtueit.net:81/v0-snapshot/gateway/vtoxbase-show///wsjs");
      // 获取STOMP子协议的客户端对象
      this.stompClient = Stomp.over(socket);
      let headers = {
        Authorization: "",
      };
      // 向服务器发起websocket连接
      this.stompClient.connect(
        headers,
        () => {
          this.stompClient.subscribe(
            `/city/event/broadcast`,//订阅信息
            (res) => {
              // 订阅服务端提供的某个topic
              this.show++
              let data=JSON.parse(res.body).data[JSON.parse(res.body).data.length-1]  //新增的一条数据
              document.getElementsByClassName(
                "ani2"
              )[0].children[0].children[0].children[1].innerText = data.eventName;
              document.getElementsByClassName(
                "ani2"
              )[0].children[0].children[1].innerText = data.time;
              document.getElementsByClassName("ani2")[0].children[1].innerText =
                data.description;
                document.getElementsByClassName('ani2')[0].style.visibility="inherit"
              //console.log(data); // msg.body存放的是服务端发送给我们的信息
            },
            headers
          );
        },
        (err) => {
          // 连接发生错误时的处理函数
          console.log("失败");
          console.log(err);
        }
      );
    }, //连接 后台
    disconnect() {
      if (this.stompClient) {
        this.stompClient.disconnect();
      }
    }, // 断开连接
  },
  beforeDestroy() {
    // 页面离开时断开连接,清除定时器
    this.disconnect();
  },