# 使用 Vue.js 连接到部署
本文主要介绍如何在 Vue 项目中使用 MQTT.js
,实现客户端与 MQTT 服务器的连接、订阅、收发消息、取消订阅等功能。
Vue.js (opens new window) 是一款由尤雨溪及其团队开发的渐进式 Javascript 前端框架。该框架具备数据双向绑定、组件化、响应式和轻量等特点,搭配其脚手架 Vue CLI 使得开发者更加容易上手,大大减少了学习成本。同时其配备一个专用的状态管理模式 Vuex ,在这里可以集中管理所有组件的状态。
MQTT (opens new window) 是一种基于发布/订阅模式的 轻量级物联网消息传输协议。该协议提供了一对多的消息分发和应用程序的解耦,具备很小的传输消耗和协议数据交换、最大限度减少网络流量和三种不同消息服务质量等级,满足不同投递需求的优势。
Vue 3 项目中使用 MQTT.js 实现 MQTT 连接,请参阅: https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-Vue3.js
# 前提条件
- 已经创建了部署,在 部署概览 下可以查看到连接相关的信息,请确保部署状态为运行中。同时你可以使用 WebSocket 测试连接到 MQTT 服务器。
- 在
认证鉴权
>认证
中设置用户名和密码,用于连接验证。
本项目使用 Vue CLI (opens new window) 创建 Vue 项目进行开发和测试,可通过以下命令确认 Vue CLI 的版本(本示例版本为 v4.x)并创建一个新项目,也可以 通过引用 Vue.js 创建 Vue 项目 (opens new window)。
# 检查 Vue CLI 版本
vue --version
# 创建项目
vue create vue-mqtt-test
2
3
4
5
# 安装依赖
MQTT.js (opens new window) 是一个 MQTT 协议的客户端库,使用 JavaScript 编写,用于 Node.js 和 浏览器环境中。是 JavaScript 生态中目前使用最为广泛的 MQTT 客户端库 (opens new window)。
以下 2、3 方法更适用于通过直接引用 Vue.js 创建的 Vue 项目,本示例使用 yarn 命令。
通过命令行安装,可以使用 npm 或 yarn 命令(二者选一)
npm install mqtt --save # 或者 yarn yarn add mqtt
1
2
3通过 CDN 引入
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
1下载到本地,然后使用相对路径引入
<script src="/your/path/to/mqtt.min.js"></script>
1
# 连接
请在控制台的 部署概览 找到相关的地址以及端口信息,需要注意如果是基础版,端口不是 1883 或 8883 端口,请确认好端口。
# 连接设置
本文将使用 EMQX 提供的 免费公共 MQTT 服务器 (opens new window),该服务基于 EMQX 的 MQTT 物联网云平台 (opens new window) 创建。服务器接入信息如下:
- Broker: broker.emqx.io(国内可以使用 broker-cn.emqx.io)
- TCP 端口: 1883
- WebSocket 端口: 8083
- WebSocket Secure 端口: 8084
# 连接关键代码
<script>
import mqtt from "mqtt";
export default {
data() {
return {
connection: {
protocol: "ws",
host: "broker.emqx.io",
// ws: 8083; wss: 8084
port: 8083,
endpoint: "/mqtt",
// for more options, please refer to https://github.com/mqttjs/MQTT.js#mqttclientstreambuilder-options
clean: true,
connectTimeout: 30 * 1000, // ms
reconnectPeriod: 4000, // ms
clientId: "emqx_vue_" + Math.random().toString(16).substring(2, 8),
// auth
username: "emqx_test",
password: "emqx_test",
},
subscription: {
topic: "topic/mqttx",
qos: 0,
},
publish: {
topic: "topic/browser",
qos: 0,
payload: '{ "msg": "Hello, I am browser." }',
},
receiveNews: "",
qosList: [0, 1, 2],
client: {
connected: false,
},
subscribeSuccess: false,
connecting: false,
retryTimes: 0,
};
},
methods: {
initData() {
this.client = {
connected: false,
};
this.retryTimes = 0;
this.connecting = false;
this.subscribeSuccess = false;
},
handleOnReConnect() {
this.retryTimes += 1;
if (this.retryTimes > 5) {
try {
this.client.end();
this.initData();
this.$message.error(
"Connection maxReconnectTimes limit, stop retry"
);
} catch (error) {
this.$message.error(error.toString());
}
}
},
createConnection() {
try {
this.connecting = true;
const { protocol, host, port, endpoint, ...options } =
this.connection;
const connectUrl = `${protocol}://${host}:${port}${endpoint}`;
this.client = mqtt.connect(connectUrl, options);
if (this.client.on) {
this.client.on("connect", () => {
this.connecting = false;
console.log("Connection succeeded!");
});
this.client.on("reconnect", this.handleOnReConnect);
this.client.on("error", (error) => {
console.log("Connection failed", error);
});
this.client.on("message", (topic, message) => {
this.receiveNews = this.receiveNews.concat(message);
console.log(`Received message ${message} from topic ${topic}`);
});
}
} catch (error) {
this.connecting = false;
console.log("mqtt.connect error", error);
}
},
},
};
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
# 订阅主题
doSubscribe() {
const { topic, qos } = this.subscription
this.client.subscribe(topic, { qos }, (error, res) => {
if (error) {
console.log('Subscribe to topics error', error)
return
}
this.subscribeSuccess = true
console.log('Subscribe to topics res', res)
})
},
2
3
4
5
6
7
8
9
10
11
# 取消订阅
doUnSubscribe() {
const { topic } = this.subscription
this.client.unsubscribe(topic, error => {
if (error) {
console.log('Unsubscribe error', error)
}
})
}
2
3
4
5
6
7
8
# 消息发布
doPublish() {
const { topic, qos, payload } = this.publish
this.client.publish(topic, payload, { qos }, error => {
if (error) {
console.log('Publish error', error)
}
})
}
2
3
4
5
6
7
8
# 断开连接
destroyConnection() {
if (this.client.connected) {
try {
this.client.end(false, () => {
this.initData()
console.log('Successfully disconnected!')
})
} catch (error) {
console.log('Disconnect failed', error.toString())
}
}
}
2
3
4
5
6
7
8
9
10
11
12
项目完整代码请见:https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-Vue.js (opens new window)。
# 测试验证
我们使用 Vue 编写了如下简单的浏览器应用,该应用具备:创建连接、订阅主题、收发消息、取消订阅、断开连接等功能。
使用 MQTT 5.0 客户端工具 - MQTT X (opens new window) 作为另一个客户端进行消息收发测试。
在 MQTT X 发送第二条消息之前,在浏览器端进行取消订阅操作,浏览器端将不会收到 MQTT X 发送的后续消息。
# 更多内容
综上所述,我们实现了在 Vue 项目中创建 MQTT 连接,模拟了客户端与 MQTT 服务器进行订阅、收发消息、取消订阅以及断开连接的场景。可以在 这里 (opens new window) 下载到示例的源码,同时也可以在 GitHub (opens new window) 上找到更多其他语言的 Demo 示例。