网页通过Mqtt协议接收数据

原创

已于 2025-11-26 14:46:29 修改 · 309 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2025-11-26 10:46:29 首次发布

    <!-- 1. 引入MQTT.js库 -->
    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
// MQTT相关配置和功能
window.mqttClient = null;
window.mqttConfig = {
    brokerUrl: 'ws://xxx:8083/mqtt', // 使用公共测试服务器
    // 备用服务器: 'wss://broker.hivemq.com:8000/mqtt' 或 'ws://test.mosquitto.org:8080'
    options: {
        clean: true,
        connectTimeout: 4000,
        reconnectPeriod: 1000,
        clientId: 'web_client_' + Math.random().toString(16).substr(2, 8)
    },
    topics: {
        mainChart: 'demo/mainChart'
    }
};

// MQTT数据处理函数，供图表模块调用
window.mqttDataHandlers = [];
window.mqttTopicHandlers = {}; // 按topic分发的处理器


// 初始化MQTT连接
function initMqtt() {
    try {
        if (window.mqttClient) {
            window.mqttClient.end();
        }
        
        window.mqttClient = mqtt.connect(window.mqttConfig.brokerUrl, window.mqttConfig.options);
        
        window.mqttClient.on('connect', function() {
            console.log('成功连接到MQT