1、保证在微信公众平台配置socket合法域名
2、项目中使用mqtt
建议在package.json中配置"mqtt": “4.1.0”,使用这个版本的依赖
页面中引入mqtt并配置连接
// @ts-ignore
import * as mqtt from 'mqtt/dist/mqtt.js'; //要使用这里面的
const state = reactive({
client: null as any,
timeCount: 0,
mqttConnected: false,
});
// 连接mqtt
const connectMqtt = () => {
if(state.mqttConnected) return;
const options = {
connectTimeout: 4000,
clientId: 'xxx',
username: 'xxx',
password: 'xxxx',
port: 8084,
};
// 微信小程序中要使用wxs,不能使用wss://
state.client = mqtt.connect('wxs://xxxxxx/mqtt', options);
state.client.on('connect', () => {
console.log('mqtt connect success');
state.mqttConnected = true;
});
subscribe();
state.client.on('error', (err:any) => {
console.log('mqtt connect error', err);
});
state.client.on('message', (topic: any, message:any) => {
console.log('mqtt receive message', topic, message);
publish ();
});
}
// 取消订阅主题
const unsubscribe = () => {
state.client.unsubscribe('/xxx/xxx', (err:any) => {
if (err) {
console.error(err);
// un.toast('订阅失败')
} else {
console.log('unsubscribe to topic');
}
});
}
// 订阅主题
const subscribe = () => {
state.client.subscribe('/xxx/xxxx', (err:any) => {
if (err) {
console.error(err);
// un.toast('订阅失败')
} else {
console.log('Subscribed to topic');
}
});
}
// 发布信息
const publish = () => {
if(state.client) {
state.client.publish('/xx/xxx', 'Hello, MQTT!', {qos: 2}, (err:any) => {
if(!err) {
console.log("发布信息成功")
}
})
return
}
}
// 断开mqtt连接
const disconnectMqtt = () => {
console.log(state.mqttConnected)
if(state.mqttConnected && state.client) {
unsubscribe();
state.client.end(true);
state.mqttConnected = false;
state.client = null;
}
}