vue 请求 websocket 用法

版权声明：版权属 ©胖子ღ牛逼，微信：xuewen-weiboweixin https://blog.csdn.net/z_xuewen/article/details/83187587

前面有篇文章讲了 springboot整合websocket 推送 ，所以有了websocket接口，但前端如何接入这种长连接接口呢，这里简单的说下在vue中的用法。

可以把整个websocket放在一个方法中，在created的时候去调用该方法，具体代码如下：

webSocket () {
      let ws = new WebSocket('ws://localhost:8080/webSocket')
      ws.onopen = () => {
        // Web Socket 已连接上，使用 send() 方法发送数据
        // ws.send('Holle')
        console.log('socket连接中...')
        this.ws = ws //这里将socket对象存在data中，以便在其他function中调用发送数据
      }
      ws.onmessage = evt => {
        console.log(evt.data)
      }
      ws.onclose = function () {
        // 关闭 websocket
        console.log('连接已关闭...')
      }
      // 路由跳转时结束websocket链接
      this.$router.afterEach(function () {
        ws.close()
      })
    }

以上方法即可使用websocket，注意 this.ws = ws 

如果要在其他方法使用socket发送数据，就需要在onopen的时候把初始化好的对象存起来。如何通过 this.ws.send() 即可发送数据到服务端