Vue使用WebSocket实现实时获取后端推送的数据

Vue可以使用WebSocket实现实时获取后端推送的数据。

1.在Vue项目中安装WebSocket库

可以使用npm或yarn安装WebSocket库：

npm install --save websocket

2.创建WebSocket连接

在Vue组件中创建WebSocket连接，连接到后端WebSocket服务器，代码如下：

data(){
   return {
      wsUrl: "ws://192.168.1.18:8088/websocket",
      ws: null,
      testSetinterval: null,
  }
},
mounted() {
    this.websocket()
},
methods: {
    websocket() {
      this.ws = new WebSocket(this.wsUrl)
      if (typeof (WebSocket) === "undefined") {
        alert("您的浏览器不支持socket")
      } else {
        this.ws.onopen = () => {
          // Web Socket 已连接上，使用 send() 方法发送数据
          // 设置定时器
          this.testSetinterval = setInterval(() => {
            setTimeout(() => {
              this.ws.send('Holle')
            }, 0)
          }, 1000 * 2)

          // 通过$once来监听生命周期beforeDestroy钩子，在组件销毁前清除定时器。
          // 实现页面切换或者刷新时清除websocket连接
          this.$once('hook:beforeDestroy', () => {
            //清除定时器
            clearInterval(this.testSetinterval)
            //关闭websocket连接
            this.ws.close()
            console.log("定时器清除了")
          })
        }
        this.ws.onmessage = evt => {
            console.log("连接成功")
        }
        this.ws.onclose = e => {
          // 关闭 websocket
          console.log('websocket 断开')
          console.log(e.code + ' ' + e.reason + ' ' + e.wasClean);
        }
      }
    },
}

上面的代码中，使用WebSocket连接到后端WebSocket服务器，通过监听onmessage事件，实时获取从后端推送来的数据。