How to use @ssv/signalr-client - 5 common examples

// directly on the hub, which is managed with normal classes
      // instead of waiting for react-render lifecycles
      if (hub['hubConnection'].state !== ConnectionStatus.connected) {
        /* private field. YOLO */
        return;
      }

      try {
        hub.send('UnsubscribeFrom', subscribeTo);
      } catch (e) {
        console.log(
          'tried to unsubscribe: ',
          subscribeTo,
          isConnected,
          hub['hubConnection'].state,
          ConnectionStatus.connected
        );

        throw e;
      }
    };
  }, [subscribeTo, isConnected, isSubscribed, hub]);

return () => {
      if (subscription.current) {
        subscription.current.unsubscribe();
      }

      if (!isConnected) return;
      // NOTE: isConnected from the context provider doesn't
      // propagate its update quick enough for this particular value
      // of this particular copy of the reference to be correct /
      // the most up to date. So we need to access the state
      // directly on the hub, which is managed with normal classes
      // instead of waiting for react-render lifecycles
      if (hub['hubConnection'].state !== ConnectionStatus.connected) {
        /* private field. YOLO */
        return;
      }

      try {
        hub.send('UnsubscribeFrom', subscribeTo);
      } catch (e) {
        console.log(
          'tried to unsubscribe: ',
          subscribeTo,
          isConnected,
          hub['hubConnection'].state,
          ConnectionStatus.connected
        );

        throw e;

interface ILiveDataContext {
  dataStore: Store;
  socket?: DataSocketClient;
  pushData: (transforms: TransformOrOperations) => Observable<{}>;
  subscriptions: string[];
  isConnected: boolean;
  connectionState: ConnectionStatus;
}

const DataContext = React.createContext({
  dataStore: undefined,
  socket: undefined,
  pushData: undefined,
  subscriptions: [],
  isConnected: false,
  connectionState: ConnectionStatus.disconnected,
});

export function useLiveData(subscribeTo?: string) {
  const dataCtx = useContext(DataContext);
  const { socket, isConnected } = dataCtx;

  const hub: HubConnection = isTesting ? undefined : socket.hub;

  const { isSubscribed } = useSubscribeToResource(hub, subscribeTo, isConnected);

  const pushData = useCallback(
    (transforms: TransformOrOperations) => {
      if (isTesting) {
        console.debug('testing early return: figure out how to test websocket communication');
        return;
      }

(state) => {
          if (this.isDestroying) return;

          this.setState({
            isConnected: state.status === ConnectionStatus.connected,
            connectionState: state,
          });
        }
      );

constructor(props: LiveDataProps) {
    super(props);

    this.hubFactory = new HubConnectionFactory();

    this.startSocket();
  }