https://github.com/tommy44458/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.
https://github.com/tommy44458/mqtt-vue-hook
hook mqtt react reactjs typescript vue vue-hook vue3 vue3-typescript
Last synced: 9 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/tommy44458/mqtt-vue-hook
- Owner: tommy44458
- License: mit
- Created: 2022-04-25T09:56:32.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-02-03T07:45:38.000Z (over 2 years ago)
- Last Synced: 2025-06-15T06:48:58.861Z (about 1 year ago)
- Topics: hook, mqtt, react, reactjs, typescript, vue, vue-hook, vue3, vue3-typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/mqtt-vue-hook
- Size: 193 KB
- Stars: 25
- Watchers: 1
- Forks: 3
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Mqtt-Vue-Hook
[](https://www.npmjs.com/package/mqtt-vue-hook)
[](https://www.npmjs.com/package/mqtt-vue-hook)
[](https://www.npmjs.com/package/mqtt-vue-hook)
[](https://www.npmjs.com/package/mqtt-vue-hook)
[](https://www.npmjs.com/package/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](https://github.com/tommy44458/light-vue3-starter)
## Install
```bash
npm install mqtt-vue-hook --save
```
```bash
yarn add mqtt-vue-hook -D
```
## Usage
### Vue or React or Typescript instance
```ts
// 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
```vue
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!')
}
)
})
```
options: https://github.com/mqttjs/MQTT.js#subscribe
### Publish
```vue
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!')
}
)
})
```
options: https://github.com/mqttjs/MQTT.js#publish
### Register Event
```vue
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')
})
```
### Typescript
```ts
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
```ts
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
)
}