使用vue连接rabbitMQ

10 篇文章 0 订阅

首先是连接的资源包插件 为

stompjs

然后说一下连接的简要的流程(可以查到很多),通过stop创建一个连接,

let client = Stomp.client("mqURL")

然后登陆mq的服务

 client.connect('用户名', '密码', () => {
            console.log('登录成功');
        }, () => {
            console.log('登录失败');
        }, '/');

 

在登陆成功后进行监听创建好的mq队列

 this.Socket = client.subscribe("消息路由", (res) => {
                            console.log(JSON.parse(res.body));
                        }
                    );

大概就是这个流程,具体的配置参数自行官网吧。

然后说一下封装的思路,封装时创建了一个util和vuex中的socketReady变量;

1、util文件中引用Stomp并创建连接,登陆mq,登陆成功后改变vuex中 socketReady 状态;

2、vuex中的socketReady变量的作用:方便子页面监听mq登陆成功时机,也不必重新登陆mq服务,只需监听mq消息路由即可;

下面为完成代码,按需粘贴

utils/websocket.js

import Stomp from 'stompjs'
import store from '../store'

let client = null;

export function connectWs() {
    return new Promise((resolve, reject) => {
        if (typeof WebSocket == 'undefined') {
            alert('不支持websocket,请联系管理员!')
            reject();
        }
        client = Stomp.client(window.socketURL);
        client.debug = null;
        // 连接RabbitMQ  
        client.connect('用户名', '密码', () => {
            console.log('登录成功');
            store.commit("SET_SOCKET_STATE", true);
            resolve();
        }, () => {
            console.log('登录失败');
            reject()
        }, '/');
    })
}


export {client}

登陆成功后(可在拦截器中登陆,或在首页登陆),如不需要登陆,在页面加载调用即可

import {connectWs, client} from "@/utils/websocket"; 

connectWs().then(() => {
                this.socket= client.subscribe("路由", (res) => {
                        console.log(JSON.parse(res.body));
                    }
                );
            });

子页面使用(计算属性+监听登陆成功后)

 computed: {
            socektReady() {
                return this.$store.state.socektReady
            }
},
 watch: {
           
            socektReady(val) {
                if (val) {
                    //监听队列里面得消息
                    this.zjSocket = client.subscribe("消息路由", (res) => {
                            console.log(JSON.parse(res.body));
                        }
                    );
                }
            }
        },

至于怎么搭建rabbitmq服务,了解甚微,都是度娘,过程不是很复杂,创建消息队列也不是很复杂(路由类型:fadeout)

欢迎评论指导

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值