Source: data/SignalROqt.js

  1. import React, { useCallback, useEffect, useRef, useState } from "react";
  2. import { useSelector } from "react-redux";
  3. import * as immutable from 'object-path-immutable';
  4. import { SignalRContext } from "../../_core/contexts";
  5. import { booleanString, useHooks } from "../..";
  6. const signalR = require("@microsoft/signalr");
  8. /**
  9.  * Componente que crea un contexto de signalr para todos los watcher que contenga
  10.  * @name Reactor.Components.Data.SignalROqt
  11.  * @param {string} hub Url del endpoint de SignalR
  12.  * @param {BooleanString} [debug = "true"] 
  13.  * @class
  14.  * @example
  15. <signalr hub="http://www.orquesta.com.ar/signalr"> 
  16.   <watcher monitor="mensajes" hooks="ActualizarMensajes"></watcher>
  17.   <watcher monitor="saldo" hooks="ActualizarSaldo"></watcher>
  18.   <div>
  19.     ...lista de mensajes
  20.   </div>
  21. </signalr>
  22. */
  24. const SignalROqt = ({hub, children, onreconnect, debug = "false"}) => {
  26.   //const isAuth = useSelector(state => state.app.isAuth);  
  27.   //const online = useSelector(state => state.app.variables.app.online);
  28.   //const variables = useVariables();
  29.   const jwt = useSelector(state => state.app.jwt?.token);
  30.   const connection = useRef();
  31.   const subscriptions = useRef({});
  32.   const [state, setState] = useState("stop");
  33.   const { procesarHooks } = useHooks({silent: "true", onreconnect, debug});
  35.   useEffect(()=>{
  36.     booleanString(debug) && console.log("SignalR", {event: "load", jwt, hub});
  37.     if(!hub) return;
  38.     if(!jwt && connection.current){
  39.       connection.current?.stop();
  40.       connection.current = undefined;
  41.       return;
  42.     }
  43.     if(!jwt)return;
  45.     connection.current = new signalR.HubConnectionBuilder()
  46.       .withUrl(hub, {
  47.         accessTokenFactory: () => jwt,
  48.         withCredentials: false
  49.       })
  50.       .configureLogging(debug === "true" ? signalR.LogLevel.Debug : signalR.LogLevel.None)
  51.       .withAutomaticReconnect()
  52.       .build();
  53.     connection.current.onreconnected(onReconnected);
  54.     start()
  55.       .then(()=>{
  56.         setState("start");
  57.       })
  58.       .catch(e => {
  59.         booleanString(debug) && console.log("SignalR", e);
  60.       });    
  62.   }, [jwt, hub]);
  65.   const onResponse = useCallback((message)=>{
  66.       booleanString(debug) && console.log("SignalR", {event: "response", message, subscriptions: subscriptions.current});
  67.       if(message.monitor && subscriptions.current[message.monitor]){
  68.         try{
  69.           subscriptions.current[message.monitor]?.callback();
  70.         }catch(e){}
  71.       } 
  72.       /*
  73.       if(data.mensaje === "stop"){
  74.         connection.current.stop().then(()=>{
  75.           console.log("se desconecto")
  76.         });
  77.       }
  78.       connection.current.on("close", function (data) {    });
  79.       */
  80.   }, []);
  82.   const onReconnected = useCallback(()=>{
  83.     booleanString(debug) && console.log("SignalR", {subscriptions: subscriptions.current})
  84.     procesarHooks();
  85.     Object.values(subscriptions.current).forEach(subscription => {
  86.       subscription.reconnectCallback()
  87.     });
  88.   }, []);
  90.   useEffect(()=>{
  91.     if(state === "start"){
  92.       connection.current?.on("response", onResponse);
  93.     }
  94.     return ()=>{
  95.       connection.current?.off("response");
  96.     }
  97.   }, [state, onResponse])
  99.   const start = async () => {
  100.     await connection.current.start();
  101.   }
  103.   const subscribe = useCallback(({monitor, callback, reconnectCallback}) => {
  104.     connection.current.invoke("Subscribe", monitor)
  105.       .then(()=>{
  106.         subscriptions.current[monitor] = {callback, reconnectCallback};
  107.         booleanString(debug) && console.log("SignalR", {event: "subscribe", subscriptions: subscriptions.current});
  108.       })
  109.       .catch(e => booleanString(debug) && console.log(e));
  110.   }, [debug]);
  112.   const unsubscribe = useCallback(({monitor}) => {
  113.     connection.current.invoke("Unsubscribe", monitor).catch(e => booleanString(debug) && console.log(e));
  114.     delete subscriptions.current[monitor];
  115.     booleanString(debug) && console.log("SignalR", {event: "unsubscribe", monitor,subscriptions: subscriptions.current})
  116.   }, [])
  120.   return (
  121.     <SignalRContext.Provider value={{subscribe, unsubscribe}}> 
  122.       {children}
  123.     </SignalRContext.Provider>
  124.   );
  125. }
  127. export default SignalROqt;