Vue使用Stompjs监听并接收Activemq的信息

后端说他能监听到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转化之后就可以正常使用该数据对象。