DEV Community

Cover image for Streamline MQTT Broker Connections and Callback Management for Vue.js and TypeScript
tommy.xin
tommy.xin

Posted on

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

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,
})
Enter fullscreen mode Exit fullscreen mode

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!')
    }
)
Enter fullscreen mode Exit fullscreen mode

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')
})
Enter fullscreen mode Exit fullscreen mode

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

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

Top comments (0)

Jetbrains image

Build Secure, Ship Fast

Discover best practices to secure CI/CD without slowing down your pipeline.

Read more

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay