使用vue连接rabbitMQ

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

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）

欢迎评论指导

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！