网站建设 深度网平面图在线设计

1. 首先确保rabbitmq服务已开启web-stomp

        1.1 登录rabbitmq web控制台

        1.2 在overview目录下 下拉找到Ports and contexts 看列表有没有http/web-stomp

        1.3 如果没有需要开启 window/centos 进入rabbitmq安装目录的bin目录下执行rabbitmq-plugins enable rabbitmq_web_stomp rabbitmq_stomp rabbitmq_web_stomp_examples

        1.4 如果是docker安装需要先rm 容器，然后在启动命令加15674端口 重新启动容器

2.前端部分

        2.1 引入stompjs, npm install stompjs --save

        2.2 前端完整代码

<template><div class="page"><button @click="createConnection">连接MQTT</button><button @click="doSubscribe">订阅主题</button><button @click="doUnSubscribe">取消主题</button><button @click="destroyConnection">断开MQTT</button></div>
</template><script>import Stomp from 'stompjs'; // 引入stompjs 需要先npm install stompjs --saveexport default {data() {return {client: null,options: {vhost: '/', // rabbitmq的vhostincoming: 8000, // 心跳包时间，（须大于0，且小于10000，因为服务器可能默认10秒没心跳就会断开）outgoing: 8000, // 心跳包时间，（须大于0，且小于10000，因为服务器可能默认10秒没心跳就会断开）account: 'guest', // rabbitmq的账户pwd: 'guest', // rabbitmq的密码server: 'ws://192.168.56.10:15674/ws' // ws://rabbitmq的ip:rabbitmq的web-stomp的端口/ws}}},methods: {connect(options) {this.options = { ...this.options, ...options }const mqUrl = this.options.server // 连接地址const ws = new WebSocket(mqUrl) // 创建ws.onclose = close => {console.log('webSocket关闭', close) // 关闭回调}ws.onerror = error => {console.log('webSocket异常', error) // 异常回调}ws.onopen = success => {console.log('webSocket连接成功', success) // 成功回调}this.client = Stomp.over(ws)this.client.heartbeat.incoming = this.options.incomingthis.client.heartbeat.outgoing = this.options.outgoing//开始连接this.client.connect(this.options.account, // 用户名this.options.pwd, // 密码this.onSuccessConnectRabbitmq, // 连接成功时回调this.onErrorConnectRabbitmq, // 失败时回调this.options.vhost);},onSuccessConnectRabbitmq() {console.log('stomp 连接成功！')// 直接在连接成功的时候就订阅监听user.audit.queue队列 user.audit.queue是rabbitmq里创建的queue名称this.doSubscribe('user.audit.queue')},onErrorConnectRabbitmq(errorMsg) {console.error(`stomp 断开连接，正在准备重新连接...`, errorMsg)this.connect(this.options)},doSubscribe(queueName) {this.currentSubscribe = this.client.subscribe(queueName, function (messages) {console.log('receive:', messages)console.log('message body', messages.body) // 消息内容主体 json需要自己转});},doUnSubscribe() {this.currentSubscribe.unsubscribe()},createConnection() {this.connect()},destroyConnection() {this.client.disconnect(() => {console.log('已关闭rabbitmq连接')});},},mounted() {this.connect()},};
</script>

3. 后端/rabbitmq操作

        3.1 后端代码操作 直接给队列发消息前端doSubscribe即可收到消息

                3.1.1 rabbitTemplate.convertAndSend(exchange routingkey, message);

        3.2 rabbitmq web控制台操作

                3.2.1 创建exchange、queue, 将queue绑定到exchange, 在publish message直接发送消息验证