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.

Can you confirm that this is working in the current downloadable version?
1.0.2 in version.txt / 1.0.0 package.json

If so, can you provide a very basic vanilla javascript example?

So far I have not found any working way to call Client.join() twice without fully reloading the page, no matter how many times ZoomInstant.destroyClient is called and re-initalized.

The idea is to connect to one session, disconnect from it and connect to a different session.

Hey @martinkruusement,

Sorry for the bad experience with Video SDK, we will release a hotfix version(1.0.3) to solve this issue in the next few days.

Thanks
Vic

1 Like

Sounds like they are already aware of this issue. I can confirm that I see it as well. Even with destroyClient, I can’t recreate a connection with createClient. The only way I’ve found to reset a connection is a full window.location.reload(), and that’s obviously not ideal :slight_smile:

Correct @bekit , we are working to fix this in version 1.0.3 :slight_smile:

Thanks,
Tommy

Good to know! Is there any ETA for the new update?

Hey @bekit , @martinkruusement , @diginikkari , @Tony1905 ,

This was fixed in the latest 1.0.3 release. Details here:

Please download the latest version from the marketplace to get the updates. :slight_smile:

Thanks,
Tommy

1 Like

FWIW, I’m still running into issues with this. After doing a leave call, I’m finding that I have to completely tear down my canvas and build a new one before joining or else I run into issues when rendering to it. I’m also having issues with getting my local camera to re-render if any other user is already rendered after leaving & re-joining. It seems to be some sort of a timing issue - if I delay starting to render my local camera by a couple of seconds, it will work fine.

This may still be issues with my code, but I wanted to mention my experience in case any one else is trying this and running into the same problems.

Hey @bekit
Thanks for sharing your experience with Video SDK.

The first issue:

After doing a leave call, I’m finding that I have to completely tear down my canvas and build a new one before joining or else I run into issues when rendering to it.

Yes. In Video SDK, the canvas will be transferred to OffscreenCanvas if the platform supports this feature, thus you will lose control of canvas in the main thread, and the canvas can not be transferred twice. During the session, Video SDK will track the state of canvas, but once leave the session, all the state will be cleared to avoid state conflicts with the next session. So we advise when rejoining the session, you can add a loading page to replace the current module before the session is connected, and then rendering DOM Element.

The second one:

I’m also having issues with getting my local camera to re-render if any other user is already rendered after leaving & re-joining. It seems to be some sort of a timing issue - if I delay starting to render my local camera by a couple of seconds, it will work fine.

Could you please provide a detailed scenario? Or sample code to help us troubleshoot this issue?

Hello @tommy, how can I upgrade to 1.0.3 version?
if I have an account I can download it ?

Many thanks!!

Hey @hellonobug9 ,

Yes, you can download the latest version from your Video SDK app. :slight_smile:

Thanks,
Tommy

1 Like