Vue+WebSocket+RabbitMQ 实现页面实时通讯
123
·
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连接,方便使用,如果项目简单,不想封装,也可以在代码中直接建立连接。
更多推荐
已为社区贡献1条内容
所有评论(0)