以Vue项目为例
1、我们采用发布订阅模式,使用STOMP协议,所以需要室内rabbitMQ
的stomp插件
终端切到rabbitmq的sbin目录执行
rabbitmq-plugins enable rabbitmq_stomp
启用后,可以通过监听ws://IP:15674/ws
服务地址接收后台用发布的消息
2、配置rabbitMQ
客户端
写配置文件 cnonfig/rabbitmq.js
export const MQTT_SERVICE = 'ws://127.0.0.1:15674/ws'
export const MQTT_USERNAME = 'guest'
export const MQTT_PASSWORD = 'guest'
创建客户端,订阅消息队列,注册回调函数
<template>
<div id='image'></div>
</template>
<script>
import Stomp from 'stompjs'
import {MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD} from '../../config/rabbitmq'
export default {
name: 'Home',
data() {
return {
client: Stomp.client(MQTT_SERVICE) //创建mq客户端
x : new Array(10) //绘制曲线x坐标
y : new Array(10) //绘制曲线y坐标
}
},
method(){
onConnected1: function (frame) {
this.client.subscribe('queueName', this.responseCallback, this.onFailed)
},
onFailed1: function (frame) {
console.log('MQ Failed: ' + frame)
},
responseCallback: function (frame) {
/**
假设消息为json格式:
"{
'x':'Array(10)',
'y':'Array(10)'
}"
*/
let data = JSON.parse(frame.body) // frame.body是后台消息内容
//更新数据
this.x=data['x']
this.y=data['y']
//重新绘图
this.draw('image')
},
connect: function () {
this.client.connect(MQTT_USERNAME, MQTT_PASSWORD, this.onConnected, this.onFailed)
},
draw(id){
let charts = echarts.init(document.getElementById(id))
charts.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
data: ['data']
},
grid: {
containLabel: true
},
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
xAxis: {
type: 'category',
boundaryGap: false,
data: this.x,
splitLine: {
show: true,
lineStyle: {
color: ['#006400'],
width: 2,
type: 'dotted'
}
}
},
yAxis: {
type: 'value',
min: function (value) {
return value.min - 10
},
max: function (value) {
return value.max + 10
},
splitLine: {
show: true,
lineStyle: {
color: ['#006400'],
width: 2,
type: 'dotted'
}
}
},
series: [
{
symbol: "none",
name: 'data',
type: 'line',
data: this.y,
lineStyle: {
width: 1
}
}
]
})
}
},
created() {
this.connect() //建立连接
},
mounted() {
this.draw('image')
}
}
</script>