vue使用mqtt对讲

### 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 useMqttSubscriber(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='';}// 清空输入框 }); } } // 使用前面定义好的useMqttSubscriber函数实例化聊天窗口的数据源 let {messages:chatMessages}=useMqttSubscriber(chatTopic); </script> ``` 这段示例不仅包含了表单元素让用户能键入待发文字外还实现了点击按钮触发实际推送行为的过程描述。另外值得注意的是这里再次调用了之前提到过的`useMqttSubscriber()`方法从而确保双方都能看到最新的交流记录。