更新记录

1.0.1(2024-09-13)

  • ios补充取消订阅的方法。

1.0.0(2024-09-05)

首次发布


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.8,Android:支持,iOS:支持,HarmonyNext:不确定 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

x-mqtt-s

开发文档

TMUI4.0文档 TMUI4.0组件库

用于mqtt连接,推送,订阅消息的插件。

安卓:适于用tcp,ssl,ws,wssl等几乎所有协议 ios:仅适配了webstock mqtt,ws,wss协议,另外(wss需要你的应用正式签名才可使用) web:适配webstock mqtt,ws,wss协议

说明

这是tmui4.0|XUI的原生插件附赠插件

兼容性

IOS Andriod WEB
支持 支持 支持

类型参考


export type CONNECT_STATUS = "opening" | "open" | "dissconnect" | "error" | "wait";
export type MQTT_EVENT_TYPE = "open" | "dissconnect" | "error" | "message";
export type MQTT_EVENT_CALL = (type : MQTT_EVENT_TYPE, topic : string | null, str : string) => void;
export type MQTT_EVENT_PUBLISH = (isSuccess : boolean) => void;
export type MQTT_SUBSCRIBE = { topic : string, qos : number };
export type MQTT_PUBLISH_TOPIC = {
    // 订阅的主题
    topic:string,
    //返回的消息内容。
    message:string,
    // 优先级0,1,2 依此表示至少接收到的消息级别1至少要收到1次
    qos:number,
    // 消息是否持久化,就是指推送的消息是否保留在服务器上,供未来订阅者订阅时收到此前发送的消息。
    retained:boolean
};
export type MQTT_CONNECT_OPTS = {
    // web,ios不需要指定,但为了对齐建议填写,协议格式:ws://,wss://,tcp://等
    protocol : string,
    // 连接的路径,如果没有就空值,有就填写比如:'/mqtt'
    path : string,
    // 客户端id
    clientId : string,
    // 服务器地址
    server : string,
    // 服务器端口
    port : number,
    // 用户名,没有为空
    userName : string,
    // 用户密码,没有为空
    passWord : string,
    // 是否使用加密连接,web,ios端true时为wss,否则为ws协议
    useSSL : boolean,
    // 保持消息跳动的间隔
    keepAliveInterval : number,
    // 连接超时时间
    timeout : number,
    // 是否自动重连
    reconnect : boolean,
};

export type MQTT_EVENTS_CALL = {
    type : MQTT_EVENT_TYPE,
    value : MQTT_EVENT_CALL
};

使用

如果是安卓请务必打自定义基座,如果ios:你在mac环境下配置好了环境无需打包本地编译,如果win开发ios需要打包基座。

页面

        <view><text>连接状态:
{{connecting==0?'待连接':''}}
{{connecting==1?'连接中':''}}
{{connecting==3?'断开连接':''}}
{{connecting==2?'连接成功':''}}
</text></view>
<view><text>收到的消息:{{message}}</text></view>

<button @click="create">创建</button>
<button @click="connect">连接</button>
<button @click="subscribe">订阅消息</button>
<button @click="publish">推送消息</button>
<button @click="disconnect">断开</button>

调用


import {
    xMqtt,
    CONNECT_STATUS,
    MQTT_EVENT_TYPE,
    MQTT_EVENT_CALL,
    MQTT_EVENT_PUBLISH,
    MQTT_SUBSCRIBE,
    MQTT_PUBLISH_TOPIC,
    MQTT_CONNECT_OPTS
} from '@/uni_modules/x-mqtt-s';
export default {
    data() {
        return {
            //0待连接,1连接中/待连接,2连接成功,3断开
            connecting: 0,
            message: '',
            qtt:new xMqtt() as xMqtt|null
        };
    },
    onLoad() {

    },
    methods: {

        create() {
            if(this.qtt==null) return;
            let t = this;

            this.qtt!.create({
                // web,ios端不会起作用,由软件根据useSSL来判断是ws,wss,app需要指定是ws://,wss://,ssl://等
                protocol: 'ws://',
                // 连接的路径,如果没有就空值,有就填写比如:'/mqtt'
                path: '/mqtt',
                // 客户端id
                clientId: 'tmzdy-test',
                // 服务器地址
                server: "broker.emqx.io",
                // 服务器端口
                port: 8083,
                // 用户名,没有为空
                userName: '',
                // 用户密码,没有为空
                passWord: '',
                // 是否使用加密连接,web端true时为wss,否则为ws协议
                useSSL: false,
                // 保持消息跳动的间隔
                keepAliveInterval: 60,
                // 连接超时时间
                timeout: 30,
                // 是否自动重连
                reconnect: true
            } as MQTT_CONNECT_OPTS)

            this.qtt!.addEventListener('open', (type : MQTT_EVENT_TYPE, topic : string | null, str : string) => {
                t.connecting = 2;
            })
            this.qtt!.addEventListener('message', (type : MQTT_EVENT_TYPE, topic : string | null, str : string) => {
                console.log(topic, str)
                t.message = `主题:${topic},内容:${str}`
            })
            this.qtt!.addEventListener('dissconnect', (type : MQTT_EVENT_TYPE, topic : string | null, str : string) => {
                t.connecting = 3;
            })
            this.qtt!.addEventListener('error', (type : MQTT_EVENT_TYPE, topic : string | null, str : string) => {
                t.connecting = 3;
            })

        },
        subscribe() {
            if(this.qtt==null||this.connecting!=2) {
                uni.showToast({
                    title:"未创建或者未连接成功",
                    icon:'none'
                })
                return;
            }
            this.qtt!.subscribe([{
                topic: "xui/hi",
                qos: 1
            } as MQTT_SUBSCRIBE] as MQTT_SUBSCRIBE[])
        },
        publish() {
            if(this.qtt==null||this.connecting!=2) {
                uni.showToast({
                    title:"未创建或者未连接成功",
                    icon:'none'
                })
                return;
            }
            this.qtt!.publish({
                topic: "xui/hi",
                qos: 0,
                message: (Math.random()*100).toFixed(2)+"-消息内容" ,
                retained: false
            } as MQTT_PUBLISH_TOPIC, (_ : boolean) => { })
        },
        connect() {
            if(this.qtt==null||this.connecting==1||this.connecting==2) {
                uni.showToast({
                    title:"已连接或者连接中或者未创建mtqq",
                    icon:'none'
                })
                return;
            }
            this.connecting = 1;
            this.qtt.connect()
        },
        disconnect() {
            if(this.qtt==null||this.connecting!=2) {
                uni.showToast({
                    title:"已断开连接或者连接中或者未创建mtqq",
                    icon:'none'
                })
                return;
            }
            this.connecting = 3
            this.qtt.disconnect()
        }
    }

隐私、权限声明

1. 本插件需要申请的系统权限列表:

网格权限

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问