vue3+ts+vite创建mqtt

1. 首先，安装MQTT库：

   npm install paho-mqtt

2. 在需要使用MQTT的组件中，导入MQTT客户端

   import { ref } from "vue";
   import { Client, Message } from "paho-mqtt";
   
   export default {
     setup() {
       // 创建 MQTT 客户端实例
       const client = new Client("ws://192.168.6.60:8083/mqtt", "data-proxy");
       
       // 创建响应式数据
       const message = ref("");
       
       // MQTT 连接成功时的回调函数
       client.onConnectionLost = (responseObject: Object) => {
         if (responseObject.errorCode !== 0) {
           console.log("连接丢失: " + responseObject.errorMessage);
         }
       };
       
       // 订阅主题成功时的回调函数
       client.onMessageArrived = (message: Message) => {
         console.log("接收到消息: " + message.payloadString);
         // 处理收到的消息
         message.value = message.payloadString;
       };
   
       // 连接到 MQTT 服务器
       client.connect({
         onSuccess: () => {
           console.log("已连接到 MQTT 服务器");
           // 订阅主题
           client.subscribe("topic", { qos: 1 });
         },
         onFailure: (error: Object) => {
           console.log("连接失败: " + error.errorMessage);
         },
         userName: "admin",
         password: "info1202",
       });
   
       return { message };
     },
   };

3. 在模板中使用来显示收到的消息：

     <template>
       <div>
         <p>收到的消息: {{ message }}</p>
       </div>
     </template>