uniapp与设备通信 通过mqtt实现通信

MQTT (Message Queuing Telemetry Transport)

协议类型:MQTT 是一种轻量级的发布/订阅消息传输协议,通常基于 TCP/IP 实现。

功能:设计用于高延迟网络环境中,在带宽有限的情况下高效传输小量数据。广泛用于物联网(IoT)设备之间的通信。

特点:

  • 发布/订阅模型:客户端可以发布消息到主题,也可以订阅主题以接收消息。
  • 质量服务等级(QoS):支持三种服务质量等级(QoS 0、1、2),以确保消息传递的可靠性。
  • 轻量级:头部开销小,适合资源受限的设备。
  • 保持会话:支持保持会话和持久化会话,以便在连接丢失后恢复状态。

WebSocket

协议类型:WebSocket 是一种双向全双工通信协议,建立在 TCP 协议之上。

功能:允许在客户端和服务器之间建立持久的、全双工的通信通道。主要用于浏览器和服务器之间的实时通信。

特点:

  • 全双工通信:客户端和服务器可以在同一连接上同时发送和接收数据。
  • 低延迟:提供实时的数据交换,减少通信延迟。
  • Web集成:原生支持浏览器,适合基于 Web 的应用程序(如实时聊天、在线游戏等)。

比较

设计目标:

MQTT:优化为在低带宽和高延迟的网络环境下工作,适合 IoT 设备和传感器。

WebSocket:优化为在浏览器和服务器之间实现实时、全双工通信,适合 Web 应用程序。

使用场景:

  • MQTT:常用于物联网(IoT)、移动应用的后台服务、传感器网络等。
  • WebSocket:常用于实时网页应用、聊天应用、在线游戏等。

通信模型:

  • MQTT:基于发布/订阅模型,消息发布者和订阅者不需要直接连接。
  • WebSocket:基于客户端和服务器之间的全双工通信,数据流动是对等的。

协议开销:

  • MQTT:更轻量,适合低带宽和高延迟的环境。
  • WebSocket:在网络条件较好的环境下使用,适合实时、快速的数据交换。
js 复制代码
  publishMessage() {//开关触发
      if (this.client) {
        this.client.publish("zhLock/openLock", "Hello");
      } else {
        console.log("MQTT client is not initialized");
      }
    },
  onLoad() {
    // 动态引入 MQTT.js 库
    const script = document.createElement("script");
    script.src = "https://unpkg.com/mqtt/dist/mqtt.min.js";
    script.onload = () => {
      // 初始化 MQTT 客户端
      this.client = mqtt.connect("ws://broker.hivemq.com:8000/mqtt", {
        username: "admin",
        password: "public",
        clientId: `client_${Math.random().toString(36).substring(2, 15)}`, // 生成唯一的 clientId
        cleanSession: true,
        reconnectPeriod: 1000, // 1秒重新连接一次
      });

      // 连接成功回调
      this.client.on("connect", () => {
        console.log("连接成功回调");

        // 订阅主题
        const topics = ["zhLock/lockHeart", "zhLock/lockSuccess", "zhLock/openLock"];
        topics.forEach((topic) => {
          this.client.subscribe(topic, (err) => {
            if (!err) {
              console.log(`Subscribed to ${topic}`);
            }
          });
        });
      });

      // 处理接收到的消息
      this.client.on("message", (topic, message) => {
        console.log("处理接收到的消息 Received message:", topic, message.toString());
        switch (topic) {
          case "zhLock/lockHeart":
            // 处理锁心跳消息
            break;
          case "zhLock/lockSuccess":
            // 处理锁成功消息
            break;
          case "zhLock/openLock":
            // 处理开锁消息
            break;
          default:
            console.warn(`Unhandled topic: ${topic}`);
        }
      });

      // 处理连接错误事件
      this.client.on("error", (err) => {
        console.log(" 处理连接错误事件 MQTT connection error:", err);
      });
    };
    document.head.appendChild(script);
  },
相关推荐
2501_916007471 小时前
iOS和macOS应用程序性能分析和优化工具使用综合指南
android·macos·ios·小程序·uni-app·iphone·webview
2501_916007471 天前
深入理解HTTPS对称与非对称加密机制及Charles抓包实践
网络协议·http·ios·小程序·https·uni-app·iphone
小徐_23331 天前
AI 写 wot-ui 总在猜 API?我们把 Skills、MCP 和 CLI 都配好了
前端·uni-app·ai编程
Liu.7741 天前
uni-app 组件 uni-easyinput 常见 Bug 及解决方案
uni-app·bug
小徐_23332 天前
uni-app 项目别再从零搭了!3 个 Wot UI 起手模板怎么选?
前端·uni-app
蜡台2 天前
uniapp pdf文件预览组件
pdf·uni-app·合同·pdfh5
凡泰AI2 天前
如何借助MCP打通企业APP内部服务:从统一调用到小程序承接
小程序·uni-app·app·mpaas·mcp·小程序容器
华玥作者2 天前
uniapp 万条数据不卡顿:我写了个虚拟列表组件 hy-list,原生支持瀑布流
数据结构·uni-app·list·vue3
这是个栗子2 天前
uni-app 微信小程序开发:常用函数总结(一)
微信小程序·小程序·uni-app·getcurrentpages
宠友信息4 天前
消息序号如何保证即时通讯源码聊天记录稳定加载
java·spring boot·redis·python·mysql·uni-app