@artcom/mqtt-topping-react

mqtt-topping-react

Wraps the Art+Com Mqtt Topping library for react. It provides multiple hooks and exposes the publish/unpublish methods.

Install

The package can be installed from npmjs.com via:

npm install @artcom/mqtt-topping-react

Usage

MQTT Context

Create an MQTT context with an MQTT and HTTP client.

Note: The unpublishRecursively method as well as the Query methods need/use the HTTP client internally.

import React from "react"
import { connectAsync, createHttpClient, MqttProvider } from "@artcom/mqtt-topping-react"

async function start() {
  const mqttClient = await connectAsync("ws://broker.test.local:1883", { clientId: "testClientId" })
  const httpClient = createHttpClient("http://broker.test.local:8080")

  render(
    <MqttProvider mqttClient={mqttClient} httpClient={httpClient}>
      // render app
    </MqttProvider>
  )
}

start()

Connect

Note: if you know your deviceId e.g. via url parameters please provide an appId aswell as the deviceId so debugging is a lot easier, otherwise you can just provide a clientId as seen in the example above

const mqttClient = await connectAsync("ws://broker.test.local:1883", {
  appId: "testApp",
  deviceId: "testDevice",
})

Subscribe

Note: Its mandatory to persist the handler (e.g. useCallback) otherwise a new subscription is made on every render.

import React, { useCallback } from "react"
import { useMqttSubscribe } from "@artcom/mqtt-topping-react"

const MyComponent = ({ greeting }) => {
  const handler = useCallback((payload) => console.log(`${greeting} ${payload}`), [greeting])
  useMqttSubscribe("myTopic", handler)

  return <></>
}

Publish

import React, { useContext } from "react"
import { MqttContext } from "@artcom/mqtt-topping-react"

const MyComponent = ({ payload }) => {
  useContext(MqttContext).publish("myTopic", payload)

  return <></>
}

Unpublish

import React, { useContext } from "react"
import { MqttContext } from "@artcom/mqtt-topping-react"

const MyComponent = () => {
  useContext(MqttContext).unpublish("myTopic")

  return <></>
}

UnpublishRecursively

import React, { useContext } from "react"
import { MqttContext } from "@artcom/mqtt-topping-react"

const MyComponent = () => {
  useContext(MqttContext).unpublishRecursively("myTopic")

  return <></>
}

HTTP Queries

To query topics via the retained topic HiveMQ plugin the following hooks can be used. See the async-task-hook documentation for details.

Query

import React from "react"
import { useQuery, RUNNING, FINISHED, ERROR } from "@artcom/mqtt-topping-react"

const MyComponent = () => {
  const query = useQuery({ topic: "myTopic", depth: 0, flatten: false, parseJson: true })

  switch (query.status) {
    case RUNNING:
      return <>Loading...</>
    case FINISHED:
      return <>{JSON.stringify(query.result)}</>
    case ERROR:
      return <>{query.error.message}</>
  }
}

Query Batch

Note: Its mandatory to persist (e.g. memoize the queries) otherwise a new task is created on every rerender.

import React, { useMemo } from "react"
import { useQueryBatch, RUNNING, FINISHED, ERROR } from "@artcom/mqtt-topping-react"

const MyComponent = () => {
  const queries = useMemo(
    () => [
      { topic: "topic1", depth: 1 },
      { topic: "topic2", depth: 0 },
    ],
    []
  )
  const query = useQueryBatch(queries)

  switch (query.status) {
    case RUNNING:
      return <>Loading...</>
    case FINISHED:
      return <>{JSON.stringify(query.result)}</>
    case ERROR:
      return <>{query.error.message}</>
  }
}

Query Json

import React from "react"
import { useQueryJson, RUNNING, FINISHED, ERROR } from "@artcom/mqtt-topping-react"

const MyComponent = () => {
  const query = useQueryJson("myTopic")

  switch (query.status) {
    case RUNNING:
      return <>Loading...</>
    case FINISHED:
      return <>{JSON.stringify(query.result)}</>
    case ERROR:
      return <>{query.error.message}</>
  }
}

Query Json Batch

Note: Its mandatory to persist (e.g. memoize the queries) otherwise a new task is created on every rerender.

import React, { useMemo } from "react"
import { useQueryJsonBatch, RUNNING, FINISHED, ERROR } from "@artcom/mqtt-topping-react"

const MyComponent = () => {
  const queries = useMemo(() => ["topic1", "topic2"], [])
  const query = useQueryJsonBatch(queries)

  switch (query.status) {
    case RUNNING:
      return <>Loading...</>
    case FINISHED:
      return <>{JSON.stringify(query.result)}</>
    case ERROR:
      return <>{query.error.message}</>
  }
}

Development

Build

npm install
npm run build

Test

npm install
npm run test