@techolution-ai/computer-vision/build/modern/messages/messages-provider.js

A JavaScript/TypeScript library for computer vision applications, providing tools for image processing, scanning, and MQTT-based messaging.

// src/messages/messages-provider.tsx
import mqtt from "mqtt";
import { createContext, useCallback, useEffect, useMemo, useRef } from "react";
import { jsx } from "react/jsx-runtime";
var MessagesContext = createContext(null);
function MessagesProvider({
  children,
  url,
  enableDebugging = false
}) {
  const clientRef = useRef(null);
  const listenersRef = useRef({});
  const log = useCallback(
    (...params) => {
      if (!enableDebugging) return;
      console.log("[mqtt]:", ...params);
    },
    [enableDebugging]
  );
  const subscribeTopics = useCallback(
    (topic) => {
      clientRef.current?.subscribe(topic, { qos: 0 });
      log(`subscribed to topic:`, topic);
    },
    [clientRef.current]
  );
  const removeListener = useCallback(
    (topic) => {
      log(`removing the listener from topic: ${topic}`);
      log(`unsubscribed to topic: ${topic}`);
      clientRef.current?.unsubscribe(topic);
    },
    [clientRef.current]
  );
  const registerListener = useCallback(
    (topic, listener) => {
      listenersRef.current[topic] = {
        queued: !clientRef.current || !clientRef.current.connected,
        callback: listener
      };
      subscribeTopics(topic);
      return () => removeListener(topic);
    },
    [subscribeTopics, removeListener]
  );
  const connect = useCallback(() => {
    if (clientRef.current && clientRef.current.connected) return;
    try {
      const optionsMqtt = {
        clientId: `computer-vision-${Math.random().toString(16).substring(2, 8)}`
      };
      clientRef.current = mqtt.connect(url, optionsMqtt);
      clientRef.current.on("connect", () => {
        log("connected");
        Object.keys(listenersRef.current).forEach((topic) => {
          const listener = listenersRef.current[topic];
          if (!listener) return;
          if (listener.queued) {
            subscribeTopics(topic);
            listener.queued = false;
          }
        });
      });
      clientRef.current.on("error", (err) => {
        console.error("Connection error:", err);
        clientRef.current?.end();
      });
      clientRef.current.on("reconnect", () => {
        log(`reconnect`);
      });
      clientRef.current.on("message", (topic, message) => {
        const listener = listenersRef.current[topic];
        listener?.callback(topic, message.toString());
      });
      return clientRef.current;
    } catch (error) {
      log(`error: `, error);
    }
  }, [url, subscribeTopics]);
  const disconnect = useCallback(() => {
    clientRef.current?.end();
    clientRef.current = null;
  }, [clientRef.current]);
  const options = useMemo(
    () => ({
      log,
      connect,
      client: clientRef.current,
      registerListener,
      removeListener,
      disconnect
    }),
    [connect, clientRef.current, registerListener, removeListener, disconnect]
  );
  const renderMqttProvider = () => {
    return /* @__PURE__ */ jsx(MessagesContext.Provider, { value: options, children });
  };
  useEffect(() => {
    const client = clientRef.current || connect();
    return () => {
      if (client && client.connected) {
        client.end();
        clientRef.current = null;
        log("disconnected: " + client.disconnected);
      }
    };
  }, []);
  return renderMqttProvider();
}
export {
  MessagesContext,
  MessagesProvider as default
};
//# sourceMappingURL=messages-provider.js.map