前程无忧网杭州网站建设类岗位,重庆汽车网站建设,成都做网站设计哪家便宜,内容管理系统开发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 ra…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 前端完整代码
templatediv classpagebutton clickcreateConnection连接MQTT/buttonbutton clickdoSubscribe订阅主题/buttonbutton clickdoUnSubscribe取消主题/buttonbutton clickdestroyConnection断开MQTT/button/div
/templatescriptimport 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直接发送消息验证
