How to reset connection?

Description
I’m using react to create a component which integrate with zoom sdk.
It works ok if every time I refresh my browser but if I use react-router-dom to go to another component and go back to this component, it throw an error when joining
Error
reason: “duplicated operation”
type: “INVALID_OPERATION”

Which version?
Latest version Fully customisable sdk

To Reproduce(If applicable)
Steps to reproduce the behavior:

  1. From my app container go to the component where calling zoom sdk join, it works fine for the first time.
  2. Go to another screen (using react-router-dom)
  3. Go back to screen where is using zoom sdk, it throw an error when calling client.join
    Screenshots

Device (please complete the following information):
Chrome

Additional context
Add any other context about the problem here.

Hey @Tony1905 ,

Thanks for reporting this, I have shared this with our SDK Engineers. (CS-2829) I will get back to you with how to fix it, or if we need to fix something on our end. :slight_smile:

-Tommy

1 Like

Hey @tommy,

was there any solution for this? I have the same issue. After leaving session with client.leave() I’m not able to join again. First I get following error when after.calling client.leave():
index.esm.js:formatted:1 WebSocket is already in CLOSING or CLOSED state.

Then when trying to join. I get duplicated operation error from react.

-Timo-

Hey @diginikkari ,

Sorry to hear you are facing this issue. I should have an update for you soon on a solution. :slight_smile:

Thanks,
Tommy

Hey @diginikkari ,

We recommend you return a clickable button or similar, that would call client.leave if the user client has actually successfully joined/initialized. You can ensure you only call client.leave by using react’s built-in state functionality and a boolean following Zoom client connection/disconnection. Besides that, you could make the call event-based instead of component-based like this. At minimum, if you want to keep it as-is, you should track/maintain the zoom client’s connection state on you own end to make sure duplicate calls aren’t made.

Let me know if that helps! :slight_smile:

Thanks,
Tommy

Hi Tommy,

infact that is what I’m currently doing. I have state with my topic setup and I have useEffect where I’m checking it:

const session = client?.getSessionInfo();    
if (!roomSetup && session?.isInMeeting) {
      client.leave()
        .then(() => console.log('Leaved session succesfully'))
        .catch((e) => console.error('leave session errored', e));
}

I’m still getting 4 error messages:
WebSocket is already in CLOSING or CLOSED state.

This promise is resolved successfully but there is no ‘connection-change’ event received.

When I’m trying to join new meeting by calling client.join(). This promise is rejected with ‘duplicated operation’ error. So it seems like connection is not closed correctly and is left in some error state. This could be related to Calling client.leave() to end session is not triggering the client connection-change event. Is there something else that I should do after client.leave() before I’m joining again?

Thanks for confirming @diginikkari .

We are looking into the 4 errors you are getting and will follow up if we need more details or once we find the root cause.

-Tommy

Hey @diginikkari ,

Update, please see @vic.yang , answer here:

After speaking with our engineers, we suggest the following:

~~First, you can poll client.getSessionInfo() with at a regular interval (not recommended); second, you can use a state variable: ~~

[isInMeetingSession, setIsInMeetingSession] = useState(false)

When client.leave() resolves, call setIsInMeetingSession(false) and have a useEffect for isInMeetingSession that checks for its value changing to false. You can and should enable the client.join() logic inside this effect. This creates a “callback” effect that you can listen and respond to, and alleviates the need for a connection-change event

Thanks,
Tommy

Due to the client instance created by ZoomInstant.createClient() is a singleton, if you want to reset the connection, you should invoke ZoomInstant.destroyClient() and ZoomInstant.createClient() methods to recreate an instance. Hope this will help you.