###
Vue集成
MQTT实现即时通讯或对讲功能
在
Vue项目中引入`
mqtt`库可以方便地实现实时通信的功能。通过安装依赖包并配置连接参数，能够快速搭建起基于
MQTT协议的消息传递机制。
#### 安装依赖
首先，在命令行工具里执行npm指令来获取必要的软件包：
```bash
npm install
mqtt --save
```
此操作会下载[
mqtt]
(https://www.npmjs.com/package/
mqtt)[^1]模块到当前工程目录下，并将其记录于项目的package.json文件之中以便后续管理版本控制等问题。
#### 创建服务端订阅者组件
为了监听来自其他客户端发送过来的信息，可以在
Vue应用内部创建
一个新的JavaScript对象作为消息接收器。下面是
一个简单的例子展示怎样定义这样
一个类：
```javascript
import { ref } from '
vue';
import
mqtt from '
mqtt';
const client =
mqtt.connect
('ws://broker.hivemq.com:8000/
mqtt'
); // 连接到公共测试服务器[^2]
client.on
('connect',
() => {
console.log
("Connected to
MQTT broker"
);
}
);
export default function use
MqttSubscriber
(topicName
){
const messages = ref
([]
);
client.subscribe
(topicName,
(err
) => {
if
(!err
) {
console.log
(`Subscribed to topic ${topicName}`
);
}
}
);
client.on
('message',
(topic, message
) => {
messages.value.push
({topic,message}
);
}
);
return {messages};
}
```
上述代码片段展示了如何建立与指定地址的WebSocket连接以及设置当成功接入后要采取的动作；同时注册了
一个事件处理器用于处理接收到的新数据并将它们存储在
一个响应式的数组内供视图层更新显示之用。
#### 构建前端发布者界面
为了让用户输入想要传输的内容并通过网络推送给目标设备/程序，则需设计相应的UI控件配合逻辑部分完成这项工作。这里给出
一段简化版HTML模板加上对应的脚本说明具体做法：
```html
<template>
<div class="chat-box">
<ul v-for="
(msg,index
) in chatMessages" :key="index">
<li>{{ msg.topic }}: {{ msg.message }}</li>
</ul>
<input type="text" placeholder="Type your message here..." v-model="newMessage"/>
<button @click="sendMessage">Send</button>
</div>
</template>
<script setup lang="ts">
import {ref} from "
vue";
import * as
mqtt from "
mqtt";
let newMessage = ref
(''
);
let chatTopic = '/test/topic';// 自定义主题名称
let chatClient =
mqtt.connect
('wss://your-
mqtt-broker-url'
);
function sendMessage
(){
if
(newMessage.value.trim
().length>0
){
chatClient.publish
(chatTopic,newMessage.value,
(error
)=>{
if
(error
){console.error
(error
);}
else{newMessage.value='';}// 清空输入框
}
);
}
}
//
使用前面定义好的use
MqttSubscriber函数实例化聊天窗口的数据源
let {messages:chatMessages}=use
MqttSubscriber
(chatTopic
);
</script>
```
这段示例不仅包含了表单元素让用户能键入待发文字外还实现了点击按钮触发实际推送行为的过程描述。另外值得注意的是这里再次调用了之前提到过的`use
MqttSubscriber
()`方法从而确保双方都能看到最新的交流记录。
博客介绍了emqx服务端的下载，在命令行下进入解压路径启动emqx，启动成功后可在本地浏览器进入指定页面，默认用户名是admin、密码为public，还提及了连接客户端id、发布和接受消息等操作。
扫一扫
457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
