使用方法:直接放到需要做websocket连接的页面的methods中,把this.wsUrl(后端给的websocket地址)配上就可以使用。initSysWebsocket()方法用来创建连接,可以放在mounted()中调用。可以在setOnmessageMessage(event)方法中拿到服务器传的数据并做自己的业务处理,event就是传的参数。

methods:{

initSysWebsocket() {

      try {

        if ('WebSocket' in window) {

          console.log(this.wsUrl)

          // console.log(this.$store.getters.userId)

          // 正式环境参数

          // this.wsUrl是连接路径,需要在data()里自己定义

          this.websocket = new WebSocket(this.wsUrl)

          console.log(this.websocket)

          this.initWebSocket()

        } else {

          alert('当前浏览器 不支持')

        }

      } catch (e) {

        console.log('尝试创建连接失败')

        // 如果无法连接上webSocket 那么重新连接!可能会因为服务器重新部署,或者短暂断网等导致无法创建连接

        this.reConnect()

      }

    },

    reConnect() {

      // 重连函数

      var that = this

      if (this.isConnect) return

      this.rec && clearTimeout(this.rec)

      // 延迟5秒重连  避免过多次过频繁请求重连

      this.rec = setTimeout(function () {

        that.createWebSocket()

      }, 5000)

    },

    initWebSocket() {

      this.isConnect = true

      // 连接错误

      this.websocket.onerror = this.setErrorMessage

      // 连接成功

      this.websocket.onopen = this.setOnopenMessage

      // 收到消息的回调

      this.websocket.onmessage = this.setOnmessageMessage

      // 连接关闭的回调

      this.websocket.onclose = this.setOncloseMessage

      // 监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。

      window.onbeforeunload = this.onbeforeunload

    },

    setErrorMessage() {

      this.isConnect = false

      // 调用重连函数

      this.reConnect()

      console.log('WebSocket连接发生错误   状态码:' + this.websocket.readyState)

    },

    setOnopenMessage() {

      console.log('WebSocket连接成功    状态码:' + this.websocket.readyState)

    },

    setOnmessageMessage(event) {

      // 根据服务器推送的消息做自己的业务处理

      var json = JSON.parse(event.data)

      // 获取标签数据

      var markerData = json

      console.log(markerData)

    },

    setOncloseMessage() {

      this.isConnect = false

      // 重连

      this.reConnect()

      // console.log('connection closed (' + e.code + ')')

      console.log('WebSocket连接关闭    状态码:' + this.websocket.readyState)

    },

    onbeforeunload() {

      this.closeWebSocket()

    },

    closeWebSocket() {

      this.websocket.close()

    }

}

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐