Vue+WebSocket+RabbitMQ 实现页面实时通讯

1.websocket是一种实时性、全双工通信的HTML5协议。可以用它来实现后台消息的实时获取，例如获取一些司机、乘客地图定位数据等，可代替传统的轮询方式，更加的智能灵巧。

 

2.stomp 是一个简单的面向文本的消息传递协议，利用websocket+stomp 来构建mq连接。

3.首先先安装stompjs。

npm install stompjs

4.定义一个golbal.js文件存放rabbitmq服务器、账号、密码等地址。

/**
 * rabbitmq -dev
 */
export const RMQ_SERVER = '' // mq服务地址
export const RMQ_VIRTUAL_HOST = '' //虚拟主机
export const RMQ_ACCOUNT = '' // 用户名
export const RMQ_PASSWORD = '' // 密码

5.定义一个stomp-client.js文件存放建立rabbitmq连接的代码，利用js class + constructor建立构造方法，对rabbitmq进行基础的封装，就可以在代码中直接引入文件连接rabbitmq、订阅消息。

import Stomp from 'stompjs'
import { RMQ_SERVER, RMQ_VIRTUAL_HOST, RMQ_ACCOUNT, RMQ_PASSWORD, RMQ_ERR_CONNECT_LIMIT } from '@/const/global'
class StompClient {
  // eslint-disable-next-line space-before-function-paren
  constructor(rmqServer, rmqVirtualHost, rmqAccount, rmqPassword) {
    this.subscribes = ''// 订阅信息
    this.client = null
    this.options = {
      vhost: rmqVirtualHost,
      incoming: 10000,
      outgoing: 10000,
      account: rmqAccount,
      pwd: rmqPassword,
      server: `ws://${rmqServer}/ws`
    }
  }
  connect (options) {
    let mqUrl = this.options.server
    let ws = new WebSocket(mqUrl)
    ws.onclose = close => {
      console.log('webSocket关闭', close)
    }
    ws.onerror = error => {
      console.log('webSocket异常', error)
    }
    ws.onopen = success => {
      console.log('webSocket连接成功', success)
    }
    this.client = Stomp.over(ws)
    this.client.heartbeat.incoming = this.options.incoming
    this.client.heartbeat.outgoing = this.options.outgoing
    this.client.debug = null // 关闭控制台调试
    // mq连接
    let onConnect = () => {
      console.log('stomp 连接成功！')
    }
    // mq错误重新进行连接
    let onError = (errorMsg) => {
      console.error(`stomp 断开连接，正在准备重新连接...`, errorMsg)
      this.connect(this.options)
    }
    // 连接
    this.client.connect(this.options.account, this.options.pwd, onConnect, onError, this.options.vhost)
  }
  //消息订阅
  subscribe () {}
  // 关闭mq连接
  closeConnect () {
    this.client.disconnect(() => {
      console.log('已关闭mq连接')
    })
  }
}
export default new StompClient(RMQ_SERVER, RMQ_VIRTUAL_HOST, RMQ_ACCOUNT, RMQ_PASSWORD)

6.在代码中需要开始进行mq连接的代码中引入上面的定义的js文件地址，这次是放在/util文件夹中 ，可自行建立。在需要连接mq的时候执行StompClient.connect()创建连接，在不需要用到的地方取消连接StompClient.closeConnect()，比如：登出时候，可减少资源浪费。

import StompClient from '@/util/stomp-client.js'

export default {
  data () {
    return {
    }
  },
  created () { },
  mounted () {
   //mq连接
    StompClient.connect()
  },
  beforeDestroy () {
    //取消mq连接
    StompClient.closeConnect()
  },

}

7.连接成功，打开控制台 ，打印出如下所示就是连接成功。mq默认会打印出一些自带的控制台消息，内容很多，影响效果，在第5步骤中 this.client.debug = null ，可关闭关闭控制台调试。附上其stomp源码内容（使用npm 加载的stomp代码地址在node_modules文件夹中的stompjs里）。

8.到此mq连接已经完成，使用constructor封装了一个mq连接，方便使用，如果项目简单，不想封装，也可以在代码中直接建立连接。