更新记录

1.0.1（2024-09-13）

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

1.0.0（2024-09-05）

首次发布

平台兼容性

uni-app

uni-app x

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的原生插件附赠插件

兼容性

类型参考

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()
        }
    }