Streamline MQTT Broker Connections and Callback Management for Vue.js and TypeScript

tommy.xin — Thu, 02 Mar 2023 20:11:40 +0000

Hey everyone! I wanted to share my new TypeScript library with you all - mqtt-vue-hook!

This library provides a simple and efficient way for developers to connect to an MQTT broker and manage callback functions for various topics. While the library is primarily designed for use with Vue.js, it can be used in any TypeScript project.

Here's an example tutorial on how to use it in three simple steps:

Step 1: Connect to MQTT Broker

// protocol = 'wss', 'ws', 'mqtt', ...
// host = ip or domain
// port = 8083, 1883, ...
import { useMQTT } from 'mqtt-vue-hook'
const mqttHook = useMQTT()

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

Step 2: Subscribe to Topic

import { useMQTT } from 'mqtt-vue-hook'

const mqttHook = useMQTT()
// mqttHook.subscribe([...topic], qos, opts?, callback?)
// mqttHook.unSubscribe(topic, opts?, callback?)
// '+' == /.+/
// '#' == /[A-Za-z0-9/]/
mqttHook.subscribe(
    ['+/root/#'],
    1,
    {
        properties: {
            userProperties: {...}
        },
    },
    () => {
        console.log('subscribed!')
    }
)

Step 3: Register Callback Function

import { useMQTT } from 'mqtt-vue-hook'

const mqttHook = useMQTT()

onMounted(() => {
    // mqttHook.registerEvent(topic, callback function, vm = string)
    // mqttHook.unRegisterEvent(topic, vm)
    mqttHook.registerEvent(
        '+/root/#',
        (topic: string, message: string) => {
            Notification({
                title: topic,
                message: message.toString(),
                type: 'info',
            })
        },
        '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.unRegisterEvent(topic, vm)
    mqttHook.unRegisterEvent('+/root/#', 'string_key')
    mqttHook.unRegisterEvent('on-connect', 'string_key')
})

If you're working on an IoT application or another project that uses MQTT, then this library can help streamline your development process. With mqtt-vue-hook, you can manage MQTT-related logic more efficiently, and reduce the complexity of the development process.

I've already received some great feedback from early users, and I'm excited to continue developing this library to meet the changing needs of the developer community. If you're interested in checking it out, head over to npm to download it for free!

Let me know if you have any questions or comments. Looking forward to hearing your thoughts!

GitHub Repo

DEV Community: tommy.xin

Streamline MQTT Broker Connections and Callback Management for Vue.js and TypeScript

Step 1: Connect to MQTT Broker

Step 2: Subscribe to Topic

Step 3: Register Callback Function