Has anyone successfully referenced mqtt.js using shared worker in Vue3?

[bbhxwl]

Has anyone successfully referenced mqtt.js using shared worker in Vue3?

[robertsLando]

I know about users using mqttjs in workers so I think it should work in shared workers as well

[bbhxwl]

I know about users using mqttjs in workers so I think it should work in shared workers as well

Do you have any examples? I don't know how to connect this.

import mqtt from "mqtt";
// 2. 存储所有连接到本 worker 的端口
const ports = [];

// 3. 全局 MQTT 客户端，避免重复连接
let client = null;

// 4. 当有新的页面/主线程连接进来时触发
onconnect = function (event) {
    const port = event.ports[0];
    ports.push(port);

    // 启动该 port 的消息接收
    port.start();
    console.log("mqtt");
    // 只在首次连接时初始化 MQTT 客户端
    if (!client) {
        initMQTTClient();
    }

    // 监听来自页面/主线程的消息
    port.onmessage = function (e) {
        const msg = e.data;
        console.log('SharedWorker 收到消息:', msg);

        switch (msg.type) {
            case 'subscribe':
                if (client) {
                    client.subscribe(msg.topic, (err) => {
                        port.postMessage({
                            type: err ? 'error' : 'subscribe_ok',
                            payload: err || `订阅成功: ${msg.topic}`
                        });
                    });
                }
                break;

            case 'publish':
                if (client) {
                    client.publish(msg.topic, msg.payload, (err) => {
                        port.postMessage({
                            type: err ? 'error' : 'publish_ok',
                            payload: err || `发布成功: ${msg.topic}`
                        });
                    });
                }
                break;

            default:
                port.postMessage({
                    type: 'info',
                    payload: `未知消息类型: ${msg.type}`
                });
        }
    };
};

/**
 * 初始化 MQTT 客户端连接
 */
function initMQTTClient() {
    // 根据实际 Broker 地址进行修改，必须支持 WebSocket。
    // 例如： ws://test.mosquitto.org:8080 或 wss://test.mosquitto.org:8081
    client = mqtt.connect('wss://test.mosquitto.org:8081');

    // 连接成功时
    client.on('connect', () => {
        broadcast({ type: 'mqtt_status', payload: 'connected' });
    });

    // 收到任何 MQTT 消息时
    client.on('message', (topic, message) => {
        broadcast({
            type: 'mqtt_message',
            payload: {
                topic,
                message: message.toString()
            }
        });
    });

    // 连接/通信出错时
    client.on('error', (err) => {
        broadcast({ type: 'error', payload: err.toString() });
    });
}

/**
 * 将消息广播给所有端口
 */
function broadcast(msg) {
    ports.forEach((p) => p.postMessage(msg));
}

onMounted(()=>{
    const sharedWorker = new SharedWorker(
        new URL('../workers/mqtt.js', import.meta.url),
        { type: 'module' } );
    sharedWorker.port.start();
    sharedWorker.port.onmessage = (event) => {
        const data = event.data;
        console.log('Main thread received from worker:', data);
    };
    sharedWorker.port.postMessage({
        type: 'greet',
        payload: 'Hello, I am main thread!'
    });
})

[robertsLando]

@bbhxwl not sure you can use import in workers. I have a test to check MQTT works in worker, this is the worker code:

https://github.com/mqttjs/MQTT.js/blob/d7553e3dce72c9a74aef44c13bfcfcf5328d8d49/test/browser/worker.js