No client method with the name found

[barrettg]

Hello -

I'm trying to implement the useSignalREffect hook of this module and I'm having difficulting getting it to fire. Per the example, I've created a provider and I am successfully using the SignalRContext.invoke() method to send messages to my server. However, when messages come back, the hook is not firing and I am seeing the warning "No client method with the name "..." found" in the console window.

I have defined both Message callbacks in my hub definition:
const SignalRContext = createSignalRContext<SMS>();

export interface SMS {
    callbacksName: SMSEventNames;
    callbacks: SMSCallbacks;
   /** Invokes hidden **/
}

// Events from Sever to Client
export enum SMSEventNames {
    message = 'Message', // Get a message
    messageList = 'MessageList', // Get a message list
}
export type SMSCallbacks = {
    [SMSEventNames.message]: (value: string) => void;
    [SMSEventNames.messageList]: (value: string[]) => void;
};

Is there another step I am missing to wire up the hook? Thanks in advance!

[fardad-dev]

Hi, could you show me your useSignalREffect effect

[barrettg]

Quite simple at the moment. I'm just trying to log the incoming message - eventually it would just update a state variable.

const SignalRContext = createSignalRContext<SMS>();
const CandidateMessenger = ({ candidateId }: CandidateMessengerProps) => {
    const [messages, setMessages] = React.useState<CandidateMessage[]>(existingMessages ?? []);

	// Sub/Un-Sub to Candidate Messages
    React.useEffect(() => {
        SignalRContext.invoke(SMSRequestNames.subscribeToCandidate, candidateId);
        return () => {
            SignalRContext.invoke(SMSRequestNames.unsubscribeFromCandidate, candidateId);
        };
    }, [candidateId]);

	// Receive incoming message
    SignalRContext.useSignalREffect(
        SMSEventNames.message,
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        (message) => {
            //   setMessage(JSON.stringify(message));
            console.log(message);
        },
        [],
    );

    SignalRContext.useSignalREffect(
        SMSEventNames.messageList,
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        (messageList) => {
            console.log(messageList);
        },
        [],
    );

    return (
        <>
	...
        </>
    );
};
export default CandidateMessenger;

[barrettg]

Here is my App.tsx where I am setting up the provider:

export const SignalRContext = createSignalRContext<SMS>();
function App() {
    const { user, getUserToken } = useSession();
    return (
		<SignalRContext.Provider
			connectEnabled={true}
			accessTokenFactory={getUserToken}
			url={`${process.env.REACT_APP_BACKEND_URL}/hubs/sms`}
		>
			<Grid>
				<div className="App">
				...
				</div>
			</Grid>
		</SignalRContext.Provider>
    );
}
export default App;

[fardad-dev]

Fixed: v0.1.5

[barrettg]

Hey @HosseinMD I'm still running into this issue. Is there anyway I can debug which client methods are registered to see if I can determine the discrepancy? I've checked dev tools in the browser and the messages are coming cross corrected as message or messageList but on the client side they don't see to be handled right. Any guidance is greatly appreciated!

[fardad-dev]

Could you reproduce an example in code sandbox?

[fukemy]

i have many screen, example

<SignalrContext>
 <ChatListScreen>
   <ChatDetailScreen>

In SignalrContext and ChatListScreen, signalr message show, but in ChatDetailScreen, i got error No client method with the name found,

Can u double check this issue again?

[fardad-dev]

I could not find the issue, please reproduce issue, or give me more info

[fukemy]

I could not find the issue, please reproduce issue, or give me more info

as the screen list below:

<SignalrContext>
 <ChatListScreen>
   <ChatDetailScreen>

If u tried to implement useSignalREffect in only ChatDetailScreen, u will get this error, i tested in my app.
By giving useSignalREffect into SignalrContext, this error gone

[fardad-dev]

Is this error still happened is last version?

[aukgit]

Hey @HosseinMD,

Your component connects but doesn't subscribe properly, and the subscription doesn't get the pings.

I have written a SignalR plugin that works completely fine; then, I got your plugin reference to use so that we can remove our code.

Now, when we connect it to the first step then, it doesn't subscribe properly.

Any ping to the subscription doesn't invoke the event.

  SignalRContext.useSignalREffect(
    eventId,
    (message) => {
      console.log(eventId, message, 'updating - counter', invokedCounter);
      invokedCounter += 1;
      (async () => {
        await refetch?.();
      })();
    },
    [id],
  );

Also, if I try to invoke using your SignalRContext, then it says it's not connected, which means you have not wrapped to after connect, which means connect is happening in a promise, and it was not resolved when I called the SignalRContext.invoke()

const context: Context<T> = {
    connection: null,
    useSignalREffect: null as any, // Assigned after context
    shareConnectionBetweenTab: options?.shareConnectionBetweenTab || false,
    invoke(methodName: string, ...args: any[]): Promise<any> | undefined {
      if (!context.shareConnectionBetweenTab) {
        return context.connection?.invoke(methodName, ...args);
      }

      const SIGNAL_R_RESPONSE = uuid();
      sendWithHermes(
        SIGNAL_R_INVOKE,
        { methodName, args, callbackResponse: SIGNAL_R_RESPONSE },
        context.shareConnectionBetweenTab,
      );
      return new Promise((resolve) => {
        hermes.on(SIGNAL_R_RESPONSE, (data) => {
          resolve(data);
        });
      });
    },

The right way would have been

const listener = this.hubConnection.start();
listener .Then(_ => this.hubConnection.invoke(...));

Probably, it is an older version you are using. Please upgrade your version to the latest one.

Now, this is a severe case. To ping any notification, I must resolve your connection and wait until it is resolved manually. Then, I have to call the invoke every time.

Plus, in your plugin, there needs to be a logger to check which steps are working and what are not, a severe issue regarding enterprise release or production-grade code.

I need to enable the debugging and see what is going, but here, there is no way to know when you are off; you are doing it on unmount, but it is it really called?

[fardad-dev]

Sorry about it, i don't have time. could you make a PR.