vue mqtt topic 使用记录

墨_痕

已于 2022-10-21 09:32:36 修改

阅读量652

点赞数 1

分类专栏： vue mqtt 文章标签： vue.js javascript ecmascript

于 2022-09-27 17:49:25 首次发布

本文链接：https://blog.csdn.net/qq_40944072/article/details/127075394

版权

vue 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

mqtt

1 篇文章 0 订阅

订阅专栏

rabbitmq 启用 web-stomp
linux:该操作需要进入到rabbitmq的sbin目录

rabbitmq-plugins enable rabbitmq_management rabbitmq_web_stomp rabbitmq_stomp rabbitmq_web_stomp_examples

前端
package.json 中引入依赖

      "stompjs": "^2.3.3",

应用


<script>
import Stomp from 'stompjs'
import * as util from "@antv/x6/es/util/string/uuid"; //uuid
export const MQTT_SERVICE = 'ws://IP:15674/ws' // mqtt服务地址，web-stomp端口默认15674

export const MQTT_topic = 'BBBB.AAA.CCC' //主题


export default {
    name: 'index',
    data() {
        return {
            message: '',
            client: ''
        }
    },

   mounted() {
      this.connect()
    },
   destroyed() {
      this.client.disconnect()
    },

    methods: {
        onConnected: function() {
            //订阅的频道 ,这里指定：topic ,格式：/类型/+ topic队列
            const topic = '/topic/' + MQTT_topic
            this.client.subscribe(topic, this.responseCallback, this.onFailed)
        },
        onFailed: function(msg) {
            console.log('MQTT Failed:' + msg)
            this.client.disconnect()
            this.connect()
        },
        //成功时的回调函数
        responseCallback: function(msg) {
            //接收消息的处理
            console.log('MQTT MESSAGE:' + msg.body)
            this.message = msg.body
        },
        //连接
        connect: function() {
            this.client = Stomp.client(MQTT_SERVICE)
            const headers = {
                login: 'admin',
                passcode: 'admin',
               'client-id': util.uuid()
            }
            this.client.connect(headers, this.onConnected, this.onFailed)
        }
    },
    watch: {}
}
</script>