mqtt-vue-hook
v1.2.20
Published
A TypeScript library that makes it easy to connect to an MQTT broker (supports v5) and manages callback functions for various topics.
Downloads
502
Maintainers
Readme
Mqtt-Vue-Hook
Mqtt-vue-hook is a TypeScript library that makes it easy to connect to an MQTT broker (supports v5) and manages callback functions for various topics.
It can be used with Vue, Vite, React, and other frameworks based on Typescript. This efficient and effective tool streamlines MQTT-related logic, making it valuable for IoT applications and other MQTT-based scenarios.
Example
A LIGHT vue3 starter support MQTT
Install
npm install mqtt-vue-hook --save
yarn add mqtt-vue-hook -D
Usage
Vue or React or Typescript instance
// src/app.tsx
// 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,
})
options: https://github.com/mqttjs/MQTT.js#client
Subscribe
<script setup lang="ts">
import { useMQTT } from 'mqtt-vue-hook'
onMounted(() => {
const mqttHook = useMQTT()
// mqttHook.subscribe([...topic], qos, opts?, callback?, clientID?)
// mqttHook.unSubscribe(topic, opts?, callback?, clientID?)
// '+' == /.+/
// '#' == /[A-Za-z0-9/]/
mqttHook.subscribe(
['+/root/#'],
1,
{
properties: {
userProperties: {...}
},
},
() => {
console.log('subscribed!')
}
)
})
</script>
options: https://github.com/mqttjs/MQTT.js#subscribe
Publish
<script setup lang="ts">
import { useMQTT } from 'mqtt-vue-hook'
onMounted(() => {
const mqttHook = useMQTT()
// mqttHook.publish(topic, message, qos?, opts?, callback?, clientID?)
mqttHook.publish(
['test/root/1'],
'my message',
1,
{},
() => {
console.log('published!')
}
)
})
</script>
options: https://github.com/mqttjs/MQTT.js#publish
Register Event
<script setup lang="ts">
import { useMQTT } from 'mqtt-vue-hook'
const mqttHook = useMQTT()
onMounted(() => {
// mqttHook.registerEvent(topic, callback function, vm = string, clientID?)
// 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, clientID?))
mqttHook.unRegisterEvent('+/root/#', 'string_key')
mqttHook.unRegisterEvent('on-connect', 'string_key')
})
</script>
Typescript
import { useMQTT } from 'mqtt-vue-hook'
const mqttHook = useMQTT()
mqttHook.registerEvent('+/root/1', (topic: string, message: string) => {
console.log(topic, message.toString())
})
mqttHook.publish(['test/root/1'], 'my message', 1)
// console log "test/root/1 my message"
Multi-Client
import { useMQTT } from 'mqtt-vue-hook'
const mqttHook = useMQTT()
if (!mqttHook.isConnected(
'mqtt-client-2' // // clientID
)) {
mqttHook.connect(
`${mqttProtocol}://${mqttHost}:${mqttPort}`,
{
clean: false,
keepalive: 60,
clientId: `mqtt_client_2_${Math.random().toString(16).substring(2, 10)}`,
path: '/mqtt',
connectTimeout: 4000,
},
'mqtt-client-2', // clientID
)
mqttHook.subscribe(
['test/root/1'],
1,
null,
null,
'mqtt-client-2' // // clientID
)
mqttHook.registerEvent(
'test/root/1',
(_topic: string, message: string) => {
// callback
},
'string_key',
'mqtt-client-2', // clientID
)
}