Recently I had to use MQTT over WebSocket in a React web application to fetch live location from an API. Here is my solution. I tried to make the MQTT module as functional as possible.

The MQTT service module

I have used the mqtt npm package, which you can install with npm install mqttcommand. This is the MQTT module I created:

import mqtt from "mqtt";

const websocketUrl = "wss://<SERVER-ADDRESS>:443/mqtt";
const apiEndpoint = "<API-ENDPOINT>/";
function getClient(errorHandler) {
  const client = mqtt.connect(websocketUrl);
  client.stream.on("error", (err) => {
    errorHandler(`Connection to ${websocketUrl} failed`);
    client.end();
  });
  return client;
}
function subscribe(client, topic, errorHandler) {
  const callBack = (err, granted) => {
    if (err) {
      errorHandler("Subscription request failed");
    }
  };
  return client.subscribe(apiEndpoint + topic, callBack);
}
function onMessage(client, callBack) {
  client.on("message", (topic, message, packet) => {
    callBack(JSON.parse(new TextDecoder("utf-8").decode(message)));
  });
}
function unsubscribe(client, topic) {
  client.unsubscribe(apiEndpoint + topic);
}
function closeConnection(client) {
  client.end();
}
const mqttService = {
  getClient,
  subscribe,
  onMessage,
  unsubscribe,
  closeConnection,
};
export default mqttService;

#react #mqtt-client #javascript