以前使用websocket

window.webSocket = new WebSocket('ws://' + config.webSocketUrl + '/webData/websocket?token=' + token + '&username=' + username);

由于项目要求，需要访问网关使用http的连接方式进行socket信息推送，采用SockJs。

在项目前期开发，我们都是在全局的js文件中定义socket的连接ip和端口，在页面调用。但在项目优化过程中，我们希望可以直接使用webpack的代理模式，直接通过代码进行请求，这样页面就不需要进行socket地址的配置。
优点：
（1）页面减少全量变量的配置；
（2）系统方法调用的统一性，和其他普通的接口调用代理一致。
缺点：
（1）由于在页面中配置的代理，而不是直接请求http:xxxx,导致需要在代理服务器中（例如ngnix）上多添加一个代理配置。相当于把以前http的直接请求方式变成代理转发请求。

新写法：const socket = new SockJS('/bullet');// 连接SockJS的endpoint名称为"bullet"
旧写法：let socket = new SockJS('http://'+config.webSocketUrl+'/bullet');//连接SockJS的endpoint名称为"bullet"

使用方法：

导入模块

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

根据状态判断是否开始通信

var url
if (location.hostname === '192.168.10.143' ||
    location.hostname === 'localhost' ||
    location.hostname === '127.0.0.1') {
     url = 'http://121.40.115.212' // 本地测试地址
   } else {
     url = `https://${location.hostname}/proxy` // 线上地址
   }
   this.connection( // 开始连接
     `${url}/api/development/websocket/ws`,
     { name: this.userId, landId: this.auctionData.landId }
   )

创建连接方法

connection (url, headers) { // 建立连接
      // 动态的连接地址 url 和 订阅的数据 headerData
      if ('WebSocket' in window) {
        // 建立连接对象
        const socket = new SockJS(url)
        // 获取STOMP子协议的客户端对象
        this.stompClient = Stomp.over(socket)
        this.stompClient.connect(headers, this.callbackSuccess, this.callbackError)
      } else {
        alert('当前浏览器 Not support websocket')
      }
    },

成功、失败函数回调(定义多个topic，对不同状态下的判断，例如聊天scoket: 接收都信息，接收到动画，接收到提醒等，不同的主题做不同的业务)

   callbackSuccess () { // websocket的返回成功的方法，可在里面进行具体的监听接口和路径的配置
      console.log('建立连接成功')
      // subscribe订阅服务端提供的某个topic(主题)
      this.stompClient.subscribe('/topic/' + this.auctionData.auctionId + '/auctionStart/getResponse', (msg) => {
        // 业务操作
      })
      // subscribe订阅服务端提供的某个topic(主题)
      this.stompClient.subscribe('/topic/' + this.auctionData.auctionId + '/rotationSettlement/getResponse', (msg) => {
        // 业务操作
      })
      // subscribe订阅服务端提供的某个topic(主题)
      this.stompClient.subscribe('/topic/' + this.auctionData.auctionId + '/auctionOver/getResponse', (msg) => {
        // 业务操作
      })

      // 监听轮次完成
      this.stompClient.subscribe('/topic/' + this.auctionData.auctionId + '/rotationOver/getResponse', (msg) => {
        // 业务操作
      })

      // 完成一个流程 开启新轮询
      this.stompClient.subscribe('/user/' + this.userId + '/' + this.auctionData.auctionId + '/getResponse', (res) => {
        console.log(res + 'user')
        const result = JSON.parse(res.body)
        if (result.code === 200) {
          this.query() // 完成后新业务逻辑，或创建新的轮询等
        } else {
          console.log(result.msg)
        }
      })
    },
    callbackError (err) { // websocket的返回失败的方法
      console.log(err)
    },

断开连接

disconnect () { // 断开连接的方法
      console.log(this.stompClient)
      if (this.stompClient) {
        this.stompClient.disconnect()
        this.stompClient = null
      }
    },

访问地址优化 参考地址
帮助理解stompjs