Question : How to receive messages once connected to a server and subscribed to a topic

[pierregremaud]

I am using Vue 3 and I managed to connect to a server and to subscribe to a topic, but i can't figure out how to display the messages..

Any help would be appreciated.

This is my code so far...

`<script lang='ts' setup>

    import { ref, watch, onMounted, onUnmounted} from "vue";
    import { useMQTT } from 'mqtt-vue-hook'
    import { toast } from 'vue3-toastify';
    import 'vue3-toastify/dist/index.css';    

    const mqttHook = useMQTT()

    const protocol = "wss";
    const host = "xxxxxxxxxxxxxxxxx";
    const port = 443;

    mqttHook.connect(`${protocol}://${host}:${port}`, {
        clean: false,
        keepalive: 60,
        clientId: `mqtt_client_${Math.random().toString(16).substring(2, 10)}`,
        connectTimeout: 4000,
    })

    onMounted(() => {

        const mqttHook = useMQTT()
        // mqttHook.subscribe([...topic], qos, opts?, callback?, clientID?)
        // mqttHook.unSubscribe(topic, opts?, callback?, clientID?)
        // '+' == /.+/
        // '#' == /[A-Za-z0-9/]/
        mqttHook.subscribe(

            ['/v3/gre-application-1@ttn/devices/23-v6-02-20/#'],
            0,
            undefined,
            () => {
                console.log('subscribed!')
            }
        );

        // mqttHook.registerEvent(topic, callback function, vm = string, clientID?)
        // mqttHook.unRegisterEvent(topic, vm)
        mqttHook.registerEvent(
            '/v3/gre-application-1@ttn/devices/23-v6-02-20/#',
            (topic: string, message: string) => {
                console.log(`topic=${topic} message=${message.toString()}`);  
            },
            'string_key',
        );

        mqttHook.registerEvent(
            'on-connect', // mqtt status: on-connect, on-reconnect, on-disconnect, on-connect-fail
            (topic: string, message: string) => {
                console.log('mqtt connected')
            },
            'string_key',
        );        
    });
    
    onUnmounted(() => {

        mqttHook.unSubscribe(

            '/v3/gre-application-1@ttn/devices/23-v6-02-20/#',
            undefined,
            () => {
                console.log('unSubscribed!')
            }
        );
    })`

[tommy44458]

Hi @pierregremaud,

Thank you for your question. Your code is correct. Have you seen the "mqtt connected" log? Additionally, if you want to see the "topic=${topic} message=${message.toString()}", you need to publish a message to the topic "/v3/gre-application-1@ttn/devices/23-v6-02-20/#".

You can also refer to my other repository at "https://github.com/tommy44458/light-vue3-starter" to learn how to control the topic event using "mqtt-vue-hook".

[pierregremaud]

Hi,

Thank you for your quick reply. I managed to receive the messages after a few tries. Everything is working now...

Any idea how I could manage the connection globally in the main.ts file (using app.use(...)) and then do only subscribe and unsubscribe in the vue component ?

[tommy44458]

Hi @pierregremaud,

Congratulations! You can connect to the broker and subscribe to the topic from anywhere. For example, you can call mqttHook.connect() in main.ts and mqttHook.subscribe() or mqttHook.registerEvent() in a Vue component or another .ts file.