131 lines
3.8 KiB
Markdown
131 lines
3.8 KiB
Markdown
# x-mqtt-s
|
|
### 开发文档
|
|
[TMUI4.0文档](https://xui.tmui.design/)
|
|
[TMUI4.0组件库](https://ext.dcloud.net.cn/plugin?id=16369)
|
|
|
|
用于mqtt连接，推送，订阅消息的插件。
|
|
|
|
安卓：适于用tcp,ssl,ws,wssl等几乎所有协议
|
|
ios:仅适配了webstock mqtt,ws协议
|
|
web:适配webstock mqtt,ws,wss协议
|
|
微信端:wss协议，且服务器不能为mqtt服务需要是ws服务，因此可能需要你在服务器将Mqtt转换为ws
|
|
|
|
### 微信使用说明
|
|
微信不支持websocket连接以Mqtt为服务的服务器，你需要在服务器上转换
|
|
|
|
|
|
### 说明
|
|
这是tmui4.0|XUI的原生插件附赠插件
|
|
|
|
### 兼容性
|
|
|
|
| Harmony | IOS | Android | WEB | 小程序 |
|
|
| --- | --- | --- | --- | --- |
|
|
| 支持 | 支持 | 支持 | 支持 | 支持 |
|
|
|
|
### 类型参考
|
|
|
|
```vue
|
|
<template>
|
|
<x-sheet :margin="['0']">
|
|
<view class="mb-12"><x-text>收到的消息:{{message}}</x-text></view>
|
|
<x-text>
|
|
{{connecting==0?'待连接':''}}
|
|
{{connecting==1?'连接中':''}}
|
|
{{connecting==3?'断开连接':''}}
|
|
{{connecting==2?'连接成功':''}}
|
|
</x-text>
|
|
<x-button class="mb-12 mt-12" :disabled="isCreate" @click="create" :block="true">创建服务对象</x-button>
|
|
<x-button class="mb-12" :disabled="(connecting==1||connecting==2)||!isCreate" @click="connect" :block="true">连接服务器</x-button>
|
|
<x-button class="mb-12" :disabled="connecting!=2" @click="subscribe" :block="true">订阅消息</x-button>
|
|
<x-button class="mb-12" :disabled="connecting!=2" @click="publish" :block="true">推送消息</x-button>
|
|
<x-button :disabled="connecting!=2" @click="disconnect" :block="true">断开</x-button>
|
|
</x-sheet>
|
|
</template>
|
|
|
|
<script setup>
|
|
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';
|
|
const connecting = ref(0)
|
|
const message = ref("")
|
|
const mqtt = new xMqtt()
|
|
const isCreate = ref(false)
|
|
const create = () => {
|
|
mqtt.create({
|
|
// web，ios端不会起作用，由软件根据useSSL来判断是ws,wss,app需要指定是ws://,wss://,ssl://等
|
|
protocol: 'wss://',
|
|
// 连接的路径，如果没有就空值，有就填写比如:'/mqtt'
|
|
path: '/mqtt',
|
|
// 客户端id
|
|
clientId: 'tmui4x-'+Date.now().toString(),
|
|
// 服务器地址
|
|
server: "i90e06e9.ala.cn-hangzhou.emqxsl.cn",
|
|
// 服务器端口
|
|
port: 8084,
|
|
// 用户名，没有为空
|
|
userName: 'tmui4x',
|
|
// 用户密码，没有为空
|
|
passWord: '123456',
|
|
// 是否使用加密连接，web端true时为wss,否则为ws协议
|
|
useSSL: true,
|
|
// 保持消息跳动的间隔
|
|
keepAliveInterval: 60,
|
|
// 连接超时时间
|
|
timeout: 30,
|
|
// 是否自动重连
|
|
reconnect: true
|
|
})
|
|
|
|
mqtt.addEventListener('open', (type : MQTT_EVENT_TYPE, topic : string | null, str : string) => {
|
|
connecting.value = 2;
|
|
})
|
|
mqtt.addEventListener('message', (type : MQTT_EVENT_TYPE, topic : string | null, str : string) => {
|
|
console.log(topic, str)
|
|
message.value = `主题:${topic},内容:${str}`
|
|
})
|
|
mqtt.addEventListener('dissconnect', (type : MQTT_EVENT_TYPE, topic : string | null, str : string) => {
|
|
connecting.value = 3;
|
|
})
|
|
mqtt.addEventListener('error', (type : MQTT_EVENT_TYPE, topic : string | null, str : string) => {
|
|
connecting.value = 3;
|
|
})
|
|
|
|
isCreate.value = true;
|
|
}
|
|
const connect = ()=>{
|
|
if(connecting.value!=3&&connecting.value!=0) return;
|
|
connecting.value = 1;
|
|
mqtt.connect()
|
|
}
|
|
const subscribe = ()=>{
|
|
mqtt.subscribe([{
|
|
topic: "xui/hi",
|
|
qos: 1
|
|
} as MQTT_SUBSCRIBE] as MQTT_SUBSCRIBE[])
|
|
}
|
|
const publish = ()=>{
|
|
mqtt.publish({
|
|
topic: "xui/hi",
|
|
qos: 0,
|
|
message: (Math.random()*100).toFixed(2)+"-消息内容" ,
|
|
retained: false
|
|
} as MQTT_PUBLISH_TOPIC, (_ : boolean) => { })
|
|
}
|
|
const disconnect = ()=>{
|
|
connecting.value = 3
|
|
mqtt.disconnect()
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
```
|