记一次利用vue连接rabbitMq

• 连接rabbitMq必要利用stompjs
  
• npm i stompjs
  下下面是连接代码
  

1. import Stomp from 'stompjs'
4.       onConnected(frame) {
5.         // 绑定交换机exchange_pushmsg是交换机的名字rk_pushmsg是绑定的路由key
6.         var exchange = this.rabbitMqexchange || 'queue.device.zzzz'
9.         // 创建随机队列用上面的路由key绑定交换机,放入收到消息后的回调函数和失败的回调函数
10.         this.client.subscribe(exchange, this.responseCallback, this.onFailed)
11.       },
12.       onFailed(frame) {
13.         console.log(frame)
14.       },
15.       responseCallback(frame) {
16.         if (frame.body != '' && frame.body != null) {
18.           const formatter = (data, params) => {
19.             this.dataOldChart = data;
20.             if (typeof this.dataFormatter === 'function') {
21.               try {
22.                 data = this.dataFormatter(data, params, this.getItemRefs());
23.               } catch (err) {
24.                 console.log(new Error(err))
25.                 data = err + ''
26.               }
27.             }
28.             this.handleCommonBind(data, -1, 'dataAfterFormatter')
29.             return data
30.           }
31.           console.log('-----[' + frame.body);
32.           let result = typeof frame.body == 'string' ? JSON.parse(frame.body) : frame.body
33.           this.dataChart = formatter(result, this.dataParams)
34.           setTimeout(() => { this.updateChart() }, 100)
36.         }
37.       },
38.       connect() {
39.         this.client = Stomp.client(this.rabbitMqUrl || 'ws://172.16.0.97:15670')
40.         // 填写你rabbitMQ登录的用户名和密码
41.         var headers = {
42.           'login': this.rabbitMqUser || '',
43.           'passcode': this.rabbitMqPass || '',
44.           // 虚拟主机，默认“/”
45.           'host': this.rabbitMqHost || '/'
46.         }
47.         let safe = this
49.         // 创建连接,放入连接成功和失败回调函数
50.         this.client.connect(headers, this.onConnected, this.onFailed)
51.         this.client.debug = (message) => {
52.           console.log('对接：' + message)
53.           this.mqDockingMessage = message
54.         }
55.       },

复制代码

  后端端口一搬都是15670或者15672 、我们这后端就因为端口问题搞啦很久 一直以为是我的问题
我这里得dataChart 就是页面想要的数据、基本上代码都在这啦 直接this.connect()接可以啦
之后在关闭页面时断开if (this.client !== null) { this.client.disconnect(); // 关闭连接 }
  固然都是复制粘贴 、但是也是创作不易、末端出给个小连接、如果你得后端不会rabbitMq抓紧让他看这个、-> 学学吧、别硬挺

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。