import Stomp from 'stompjs' onConnected(frame) { // 绑定交换机exchange_pushmsg是交换机的名字rk_pushmsg是绑定的路由key var exchange = this.rabbitMqexchange || 'queue.device.zzzz' // 创建随机队列用上面的路由key绑定交换机,放入收到消息后的回调函数和失败的回调函数 this.client.subscribe(exchange, this.responseCallback, this.onFailed) }, onFailed(frame) { console.log(frame) }, responseCallback(frame) { if (frame.body != '' && frame.body != null) { const formatter = (data, params) => { this.dataOldChart = data; if (typeof this.dataFormatter === 'function') { try { data = this.dataFormatter(data, params, this.getItemRefs()); } catch (err) { console.log(new Error(err)) data = err + '' } } this.handleCommonBind(data, -1, 'dataAfterFormatter') return data } console.log('-----[' + frame.body); let result = typeof frame.body == 'string' ? JSON.parse(frame.body) : frame.body this.dataChart = formatter(result, this.dataParams) setTimeout(() => { this.updateChart() }, 100) } }, connect() { this.client = Stomp.client(this.rabbitMqUrl || 'ws://172.16.0.97:15670') // 填写你rabbitMQ登录的用户名和密码 var headers = { 'login': this.rabbitMqUser || '', 'passcode': this.rabbitMqPass || '', // 虚拟主机,默认“/” 'host': this.rabbitMqHost || '/' } let safe = this // 创建连接,放入连接成功和失败回调函数 this.client.connect(headers, this.onConnected, this.onFailed) this.client.debug = (message) => { console.log('对接:' + message) this.mqDockingMessage = message } },
后端端口一搬都是15670或者15672 、我们这后端就因为端口问题搞啦好久 一直以为是我的问题
我这里得dataChart
就是页面想要的数据、基本上代码都在这啦 直接this.connect()
接可以啦
之后在关闭页面时断开if (this.client !== null) { this.client.disconnect(); // 关闭连接 }
虽然都是复制粘贴 、但是也是创作不易、结尾出给个小连接、如果你得后端不会rabbitMq抓紧让他看这个、-> 学学吧、别硬挺