更新记录
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
开发文档
用于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()
}
}