更新记录

1.0.0（2026-01-15） 下载此版本

MQTT WebSocket 客户端插件

基于 WebSocket 的 MQTT 客户端插件，支持 uni-app 多端运行。

功能特性

• ✅ 支持 MQTT 3.1.1 和 MQTT 5.0 协议
• ✅ 基于 uni-app 的 WebSocket API 实现
• ✅ 自动心跳保活机制
• ✅ 支持自动重连
• ✅ 提供 JavaScript SDK 和 Vue 组件两种使用方式
• ✅ 支持订阅/发布消息
• ✅ 完整的连接状态管理
• ✅ 多端兼容：App、小程序、H5

安装

1. 将本插件文件夹 my-plugin 复制到项目的 uni_modules 目录下
2. 在需要使用的页面或组件中引入

使用方式

方式一：JavaScript SDK（推荐）

import MQTTClient from '@/uni_modules/my-plugin/js_sdk/index.js'

// 创建客户端实例
const mqttClient = new MQTTClient({
  host: 'broker.emqx.io',
  port: 8083,
  path: '/mqtt',
  clientId: 'client_' + Date.now(),
  username: '',
  password: '',
  protocolVersion: 4, // 4 for MQTT 3.1.1, 5 for MQTT 5.0
  keepAlive: 60,
  connectTimeout: 10000,
  reconnectPeriod: 5000
})

// 监听连接事件
mqttClient.on('connect', () => {
  console.log('连接成功')
})

// 监听消息事件
mqttClient.on('message', (msg) => {
  console.log('收到消息:', msg)
})

// 连接服务器
mqttClient.connect()

// 发布消息
mqttClient.publish('test/topic', 'Hello MQTT', 0)

// 订阅主题
mqttClient.subscribe('test/topic', 0)

// 取消订阅
mqttClient.unsubscribe('test/topic')

// 断开连接
mqttClient.disconnect()

方式二：Vue 组件

<template>
  <view>
    <mqtt-client :options="mqttOptions" @connect="onConnect" @message="onMessage">
      <template v-slot="{ connect, disconnect, publish, status }">
        <button @click="connect">连接</button>
        <button @click="disconnect">断开</button>
        <text>状态: {{ status }}</text>
      </template>
    </mqtt-client>
  </view>
</template>

<script>
import mqttClient from '@/uni_modules/my-plugin/components/mqtt-client.vue'

export default {
  components: {
    mqttClient
  },
  data() {
    return {
      mqttOptions: {
        host: 'broker.emqx.io',
        port: 8083,
        path: '/mqtt'
      }
    }
  },
  methods: {
    onConnect() {
      console.log('连接成功')
    },
    onMessage(msg) {
      console.log('收到消息:', msg)
    }
  }
}
</script>

API 文档

MQTTClient 类

构造函数

new MQTTClient(options)

配置选项

方法

• connect(): 连接服务器
• disconnect(): 断开连接
• publish(topic, message, qos): 发布消息
• subscribe(topic, qos): 订阅主题
• unsubscribe(topic): 取消订阅
• on(event, callback): 添加事件监听
• off(event, callback): 移除事件监听
• getStatus(): 获取当前连接状态
• getSubscribedTopics(): 获取已订阅的主题列表

事件

• connect: 连接成功
• disconnect: 连接断开
• error: 发生错误
• message: 收到或发送消息
• statusChange: 连接状态变化
• subscribed: 订阅成功
• unsubscribed: 取消订阅成功

示例

本项目包含完整的示例页面，位于 pages/mqtt-demo/index.vue，展示了插件的所有功能。

注意事项

1. 小程序端需要使用真机调试，部分模拟器可能不支持 WebSocket
2. 确保服务器支持 WebSocket 协议的 MQTT
3. 不同平台的 WebSocket 实现可能有差异，建议在各平台测试

更新日志

详见 CHANGELOG.md

许可证

MIT License

平台兼容性

其他

MQTT WebSocket 客户端插件

基于 WebSocket 的 MQTT 客户端插件，支持 uni-app 多端运行。

功能特性

• ✅ 支持 MQTT 3.1.1 和 MQTT 5.0 协议
• ✅ 基于 uni-app 的 WebSocket API 实现
• ✅ 自动心跳保活机制
• ✅ 支持自动重连
• ✅ 提供 JavaScript SDK 和 Vue 组件两种使用方式
• ✅ 支持订阅/发布消息
• ✅ 完整的连接状态管理
• ✅ 多端兼容：App、小程序、H5

安装

1. 将本插件文件夹 my-plugin 复制到项目的 uni_modules 目录下
2. 在需要使用的页面或组件中引入

使用方式

方式一：JavaScript SDK（推荐）

import MQTTClient from '@/uni_modules/my-plugin/js_sdk/index.js'

// 创建客户端实例
const mqttClient = new MQTTClient({
  host: 'broker.emqx.io',
  port: 8083,
  path: '/mqtt',
  clientId: 'client_' + Date.now(),
  username: '',
  password: '',
  protocolVersion: 4, // 4 for MQTT 3.1.1, 5 for MQTT 5.0
  keepAlive: 60,
  connectTimeout: 10000,
  reconnectPeriod: 5000
})

// 监听连接事件
mqttClient.on('connect', () => {
  console.log('连接成功')
})

// 监听消息事件
mqttClient.on('message', (msg) => {
  console.log('收到消息:', msg)
})

// 连接服务器
mqttClient.connect()

// 发布消息
mqttClient.publish('test/topic', 'Hello MQTT', 0)

// 订阅主题
mqttClient.subscribe('test/topic', 0)

// 取消订阅
mqttClient.unsubscribe('test/topic')

// 断开连接
mqttClient.disconnect()

方式二：Vue 组件

<template>
  <view>
    <mqtt-client :options="mqttOptions" @connect="onConnect" @message="onMessage">
      <template v-slot="{ connect, disconnect, publish, status }">
        <button @click="connect">连接</button>
        <button @click="disconnect">断开</button>
        <text>状态: {{ status }}</text>
      </template>
    </mqtt-client>
  </view>
</template>

<script>
import mqttClient from '@/uni_modules/my-plugin/components/mqtt-client.vue'

export default {
  components: {
    mqttClient
  },
  data() {
    return {
      mqttOptions: {
        host: 'broker.emqx.io',
        port: 8083,
        path: '/mqtt'
      }
    }
  },
  methods: {
    onConnect() {
      console.log('连接成功')
    },
    onMessage(msg) {
      console.log('收到消息:', msg)
    }
  }
}
</script>

API 文档

MQTTClient 类

构造函数

new MQTTClient(options)

配置选项

方法

• connect(): 连接服务器
• disconnect(): 断开连接
• publish(topic, message, qos): 发布消息
• subscribe(topic, qos): 订阅主题
• unsubscribe(topic): 取消订阅
• on(event, callback): 添加事件监听
• off(event, callback): 移除事件监听
• getStatus(): 获取当前连接状态
• getSubscribedTopics(): 获取已订阅的主题列表

事件

• connect: 连接成功
• disconnect: 连接断开
• error: 发生错误
• message: 收到或发送消息
• statusChange: 连接状态变化
• subscribed: 订阅成功
• unsubscribed: 取消订阅成功

示例

本项目包含完整的示例页面，位于 pages/mqtt-demo/index.vue，展示了插件的所有功能。

注意事项

1. 小程序端需要使用真机调试，部分模拟器可能不支持 WebSocket
2. 确保服务器支持 WebSocket 协议的 MQTT
3. 不同平台的 WebSocket 实现可能有差异，建议在各平台测试

更新日志

详见 CHANGELOG.md

许可证

MIT License