后端说他能监听到Activemq发过来的信息，但是没办法传给前端，因此就只能前端去监听，参考了网上相关的文章之后在这里记个笔记。
第一步：安装Stompjs和net
npm install stompjs
npm install net第二步：新建连接Activemq参数文件
在config文件夹下新建一个linkparam.js文件
里面复制下面三句话，修改服务地址、用户名和密码即可
export const MQ_SERVICE = 'ws://192.168.x.x:61614/stomp' // mq服务地址
export const MQ_USERNAME = 'xx' // mq连接用户名
export const MQ_PASSWORD = 'xx' //mq连接密码第三步：在vue页面引入
import Stomp from 'stompjs'
import { MQ_SERVICE, MQ_USERNAME, MQ_PASSWORD } from '../../../../config/linkparam'第四步：使用
在vue页面的methods方法中写入：
onConnected: function (frame) {
console.log(frame, '****')
// 主题模式 不清楚是什么意思，可以问后端你们是主题模式还是点对点模式
// var topic = '/topic/Topic01'
// this.client.subscribe(topic, this.responseCallback, this.onFailed)
// 点对点模式 我们是点对点模式
// 定义的queue队列名称需要和你们监听的队列名称一致，否则监听不到
var queue = 'reply_weapon_db'
this.client.subscribe(queue, this.responseCallback, this.onFailed)
},
// 监听失败的回调
onFailed: function (frame) {
console.log('Failed: ' + frame)
},
// 监听成功的回调，获取消息
responseCallback(frame) {
console.log('responseCallback msg=>2' + frame.body)
// 他这里获取的是字符串型的json数据，需要用JSON.parse转一下
var data = JSON.parse(frame.body)
// 下面就是针对监听到的内容进行处理。可以注释掉写成你们自己的
if (data.type == 'qa') {
this.outputCont = data.data
}
if (data.type == 'query') {
this.imgArr1 = data.data
}
},
connect: function () {
var headers = {
'login': MQ_USERNAME,
'passcode': MQ_PASSWORD
}
this.client.connect(headers, this.onConnected, this.onFailed)
},写好方法后，在created函数中调用连接函数。就可以成功监听了
created() {
this.connect()
},效果：
能打印以下内容说明连接成功。
下面就是监听到的数据。json字符串类型。用JSON.parse转化之后就可以正常使用该数据对象。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/149698.html
