Skip to main content

创建Vue项目并连接到mqtt broker

创建Vue项目并连接到mqtt broker

首先全局安装vue cli

yarn global add @vue/cli

创建项目

vue create hello-world

切换到新创建的项目目录

cd hello-world

安装mqttjs依赖,项目地址是:https://github.com/mqttjs/MQTT.js/,支持浏览器和nodejs,并且支持mqtt 5,推荐使用这个,而不是paho mqtt js

yarn add mqtt

运行项目

yarn serve

修改src/main.js,如果你熟悉javascript、es6,应该不陌生。

其中的mqttx.cn是我自己的服务器用hivemq搭建的mqtt broker

src/main.js
import Vue from 'vue'
import App from './App.vue'
import {connect} from 'mqtt'

Vue.config.productionTip = false

let client = connect('wss://mqttx.cn:8883/mqtt')

// 连接成功的回调方法
client.on('connect', function (connack) {
console.log(connack)
console.log('connected')
// 订阅主题
client.subscribe('test/topic', {qos: 1})
setInterval(function () {
// 发布消息
client.publish('test/topic', 'hello from browser: ' + new Date(), {qos: 1})
}, 3000)
})

// 收到消息打印到控制台
client.on('message', function (topic, payload, packet) {
console.log(topic, payload.toString('utf-8'), packet)
})

new Vue({
render: h => h(App),
}).$mount('#app')

浏览器打开 http://localhost:8080/ ,打开控制台查看输出,可以看到每隔3秒钟会收到一条消息