在
Vue 中使用
MQTT，一般需要安装 `paho-
mqtt` 库。可以通过 `npm` 进行安装：
```
npm install paho-
mqtt --save
```
接下来，我们可以在
Vue 的组件中使用 `paho-
mqtt` 库进行
MQTT 的发布和
订阅。
首先，需要创建一个
MQTT 的客户端连接对象，可以在
Vue 组件的 `created` 生命周期中进行创建：
```
javascript
created() {
// 创建
MQTT 客户端连接对象
this.client = new Paho.
MQTT.Client("localhost", 8000, "clientId");
// 连接服务器
this.client.connect({ onSuccess: this.onConnect });
},
```
其中，`Paho.
MQTT.Client` 是 `paho-
mqtt` 库提供的
MQTT 客户端连接对象。它的构造函数需要传入三个参数：
- `host`：
MQTT 服务器的主机名或 IP 地址；
- `port`：
MQTT 服务器的端口号；
- `clientId`：客户端 ID。
接下来，我们可以在 `onConnect` 回调函数中
订阅 MQTT 主题：
```
javascript
onConnect() {
//
订阅主题
this.client.subscribe("testTopic");
},
```
其中，`this.client.subscribe` 方法用于
订阅 MQTT 主题，需要传入一个主题名称作为参数。
当客户端收到
MQTT 消息时，会触发 `onMessageArrived` 回调函数。可以在该函数中处理接收到的消息：
```
javascript
onMessageArrived(message) {
console.log("Received message:", message.payloadString);
},
```
最后，我们可以在
Vue 组件中定义发布消息的方法：
```
javascript
methods: {
// 发布消息
publishMessage() {
const message = new Paho.
MQTT.Message("Hello,
MQTT!");
message.destinationName = "testTopic";
this.client.send(message);
},
},
```
其中，`Paho.
MQTT.Message` 是 `paho-
mqtt` 库提供的
MQTT 消息对象。它的构造函数需要传入一个字符串作为消息内容。接着，我们需要为消息设置目标主题，然后通过 `this.client.send` 方法将消息发送出去。
完整的代码示例如下：
```
javascript
<template>
<div>
<button @click="publishMessage">发布消息</button>
</div>
</template>
<script>
import Paho from "paho-
mqtt";
export default {
data() {
return {
client: null,
};
},
created() {
// 创建
MQTT 客户端连接对象
this.client = new Paho.
MQTT.Client("localhost", 8000, "clientId");
// 连接服务器
this.client.connect({ onSuccess: this.onConnect });
},
methods: {
//
MQTT 连接成功回调函数
onConnect() {
//
订阅主题
this.client.subscribe("testTopic");
},
//
MQTT 收到消息回调函数
onMessageArrived(message) {
console.log("Received message:", message.payloadString);
},
// 发布消息
publishMessage() {
const message = new Paho.
MQTT.Message("Hello,
MQTT!");
message.destinationName = "testTopic";
this.client.send(message);
},
},
mounted() {
// 注册
MQTT 消息接收回调函数
this.client.onMessageArrived = this.onMessageArrived;
},
};
</script>
```
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
