vue使用SockJS实现webSocket通信

1.在布局组件中使用

import SockJS from 'sockjs-client'
import Stomp from 'stompjs'


data() {
    return {
      stompClient: '',
      timer: ''
    }
  },
  computed: {
    fixedHeader() {
      return this.$store.state.settings.fixedHeader
    }
  },
  mounted() {
    this.initWebSocket()
  },
  beforeDestroy: function() {
    // 页面离开时断开连接,清除定时器
    this.disconnect()
    clearInterval(this.timer)
  },
  methods: {
    initWebSocket() {
      this.connection()
      const that = this
      // 断开重连机制,尝试发送消息,捕获异常发生时重连
      this.timer = setInterval(() => {
        try {
          that.stompClient.send('test')
        } catch (err) {
          console.log('断线了: ' + err)
          that.connection()
        }
      }, 5000)
    },
    connection() {
      // 建立连接对象 此次将/api/notification代理
      const socket = new SockJS('/api/notification')
      // 获取STOMP子协议的客户端对象
      this.stompClient = Stomp.over(socket)
      // 定义客户端的认证信息,按需求配置
      const headers = {
        Authorization: ''
      }
      // 向服务器发起websocket连接
      this.stompClient.connect(
        headers,
        () => {
          console.log('websocket连接成功')
          this.stompClient.subscribe(
            '/topic/server',
            (msg) => {
              // 订阅服务端提供的某个topic
              // console.log(msg.body) // msg.body存放的是服务端发送给我们的信息
            },
            headers
          )
        },
        (err) => {
          // 连接发生错误时的处理函数
          console.log('失败')
          console.log(err)
        }
      )
    },
    // 断开连接
    disconnect() {
      if (this.stompClient) {
        this.stompClient.disconnect()
      }
    }
  }

2.在vue.config.js中进行代理

在vue.config.js和.env.development和.env.production中，进行代理：

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/api/datacenter'
VUE_APP_BASE_WEBSOCKET = '/api/notification'




proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://192.168.0.139:9999',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: process.env.VUE_APP_BASE_API
        }
      },
      [process.env.VUE_APP_BASE_WEBSOCKET]: {
        target: 'http://192.168.0.139:9999',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_WEBSOCKET]: process.env.VUE_APP_BASE_WEBSOCKET
        }
      }
    }