npm i mqtt@3.0.0 uuid

// mqttClient.js 對 MQTT 的簡單封裝
let client = null;
/**
 * 初始化 MQTT 連接
 * @param {Object} options
 * @param {string} options.host - 服務器地址（不帶協(xié)議）
 * @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;

	// 根據平臺選擇協(xié)議（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);

	// 監(jiān)聽連接事件
	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);
		}
	});

	// 監(jiān)聽消息（全局監(jiān)聽，需配合 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());
			}
		// }
	});
}

/**
 * 發(fā)布消息
 * @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('發(fā)布失敗:', err);
		} else {
			console.log(`發(fā)布成功: ${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);
            });
        },
        // 發(fā)送消息到 test/topic 主題
        publishMessage() {
            publish('test/topic', {
                name: 'uni-app',
                time: new Date().toISOString(),
                msg: '測試信息'
            });
        },
        disconnect() {
            disconnect();
        }
    }
}