uni-app实现本地MQTT连接的方法步骤

npm i mqtt@3.0.0 uuid

// mqttClient.js 对 MQTT 的简单封装
let client = null;
/**
 * 初始化 MQTT 连接
 * @param {Object} options
 * @param {string} options.host - 服务器地址（不带协议）
 * @param {number} options.port - 端口（通常 WebSocket 是 8083、8084 或 443）
 * @param {string} options.clientId - 客户端 ID（建议唯一）
 * @param {string} [options.username] - 用户名
 * @param {string} [options.password] - 密码
 * @param {boolean} [options.useWss=false] - 是否使用 wss（HTTPS）
 */
export function initMqtt(options) {
	const {
		host,
		port,
		clientId,
		username = '',
		password = '',
		useWss = false
	} = options;

	// 根据平台选择协议（App 和 H5 用 ws/wss，小程序用 wxs/wss）
	let protocol = 'ws';
	if (useWss) protocol = 'wss';

	// #ifdef MP-WEIXIN
	protocol = useWss ? 'wxs' : 'wxs';
	// #endif

	const url = `${protocol}://${host}:${port}/mqtt`; // 注意：路径可能是 / 或 /mqtt，根据你的 broker 配置

	const connectOptions = {
		clientId: clientId,
		username: username,
		password: password,
		keepalive: 60, // 心跳间隔（秒）
		reconnectPeriod: 5000, // 自动重连间隔（毫秒）
		connectTimeout: 10000, // 连接超时
		clean: true // 是否清除会话
	};

	// 引入 mqtt（必须用 min 版本，否则小程序报错）
	const mqtt = require('mqtt/dist/mqtt.min.js');

	client = mqtt.connect(url, connectOptions);

	// 监听连接事件
	client.on('connect', () => {
		console.log('MQTT 连接成功');
	});

	client.on('reconnect', () => {
		console.log('MQTT 正在重连...');
	});

	client.on('error', (err) => {
		console.error('MQTT 连接错误:', err);
	});

	client.on('close', () => {
		console.log('MQTT 连接已关闭');
	});

	return client;
}

/**
 * 订阅主题
 * @param {string} topic
 * @param {Function} callback - (topic, message) => {}
 */
export function subscribe(topic, callback) {
	if (!client) {
		console.warn('MQTT 客户端未初始化');
		return;
	}

	client.subscribe(topic, (err) => {
		if (!err) {
			console.log(`订阅主题成功: ${topic}`);
		} else {
			console.error('订阅失败:', err);
		}
	});

	// 监听消息（全局监听，需配合 topic 过滤）
	client.on('message', (receivedTopic, message) => {
		// if (receivedTopic === topic) {
			try {
				// 尝试解析 JSON
				const payload = JSON.parse(message.toString());
				callback(receivedTopic, payload);
			} catch (e) {
				// 非 JSON 消息
				callback(receivedTopic, message.toString());
			}
		// }
	});
}

/**
 * 发布消息
 * @param {string} topic
 * @param {string|object} message
 */
export function publish(topic, message) {
	if (!client) {
		console.warn('MQTT 客户端未初始化');
		return;
	}

	const payload = typeof message === 'object' ? JSON.stringify(message) : message;
	client.publish(topic, payload, {
		qos: 1
	}, (err) => {
		if (err) {
			console.error('发布失败:', err);
		} else {
			console.log(`发布成功: ${topic}`, payload);
		}
	});
}

/**
 * 断开连接
 */
export function disconnect() {
	if (client) {
		client.end(true); // true 表示强制断开
		client = null;
		console.log('MQTT 已断开');
	}
}

import {initMqtt, subscribe, publish, disconnect} from './mqttClient.js';
export default {
    data() {
        return {
            host: 'broker.emqx.io',
            messages: []
        }
    },
    mounted() {
        this.connect()
    },
    beforeDestroy() {
        this.disconnect()
    },
    methods: {
        // 连接
        connect() {
            const uuid = uuidv4();
            const client = initMqtt({
                host: this.host,
                port: 8083,
                clientId: uuid,
                username: '',
                password: '',
                useWss: false // 如果是 HTTPS/WSS，设为 true
            });
            if (client) {
                this.subscribeTopic();
            }
        },
        // 订阅 test/topic 主题
        subscribeTopic() {
            subscribe('test/topic', (topic, message) => {
                // 接收到的消息
                const msg = JSON.stringify(message);
                this.messages.unshift(msg);
            });
        },
        // 订阅 带通配符 的主题
        subscribeTopics() {
            subscribe('+/topic', (topic, message) => {
                // 接收到的消息
                const msg = JSON.stringify(message);
                this.messages.unshift(msg);
            });
        },
        // 发送消息到 test/topic 主题
        publishMessage() {
            publish('test/topic', {
                name: 'uni-app',
                time: new Date().toISOString(),
                msg: '测试信息'
            });
        },
        disconnect() {
            disconnect();
        }
    }
}