401 error when reloading page and trying to re-join session

Issues developing apps
1

Hi again. I’m continuing to work on getting OpenVidu setup in my local dev environment to see if I can use it in my project in place of OpenTok.

The problem I’m having now is that I am unable to re-join a session when reloading the browser page.

For example, I have a session with 2 users, and when one of them reloads the page and attempts to rejoin the session, I get…

ERROR:Unable to join room. The user is not authorized. Code: 401 in Request: method:joinRoom params:{"token":"wss://localhost:4443?sessionId=3smu7dhmnswhcny0&token=tjwhst8kjh2xbocb&role=PUBLISHER&version=2.11.0","session":"3smu7dhmnswhcny0","platform":"Firefox 72.0 on OS X 10.13","metadata":"","secret":"","recorder":false} request:undefined

I’m using the same code for the initial join and rejoin, and I can see that the session still exists and contains the other publisher, but I am unable to rejoin.

Any ideas?

Thanks.

2

Looks like a token can’t be reused. So I have resolved this by using a customSessionId and recreating the token when the page is reloaded.

3

Yeap, that’s the way to go

4

Thanks Pablo. Follow-up question/issue. When I reload the page, I’m able to re-join the session and start streaming. But after a few seconds, the session->streamDestroyed event fires for my current user. This happens consistently, every time I reload the page, after about 3-5 seconds.

Do you know why that’s happening?

Thanks again.

5

Hello @Adam,

This could happen because of you are subscribed to the session events and when you reload the page the streamDestroyed event will fire after a few seconds.

You can listen the DOM reload event (in your case) to reset your session. For example, in ours Angular apps, we use an HostListener to do that. You can see this here

6

Thanks @CSantosM. That should work. Can you explain why the streamDestroyed event is delayed a few seconds? On OpenTok I think this happens immediately.

Edit: actually, I am immediately re-joining the session when the page is reloaded. So this is not working.

The issue is that the streamDestroyed event is firing even though I am back in the session. And my app does some cleanup when a user leaves, but because the event is delayed and the user is now back in the session, the cleanup is wrong.

So…

  • User joins session and starts streaming
  • Browser page is reloaded
  • User automatically re-joins session and starts streaming
  • streamDestroyed event fires indicating the user is not streaming even though they are

Any ideas?

Thanks again.

7

Can you explain why the streamDestroyed event is delayed a few seconds? On OpenTok I think this happens immediately.

This is because in the reload process, the user is not desconnect to the session implicitly so OpenVidu Server wait a few seconds to desconnect that participant.

  • User joins session and starts streaming
  • Browser page is reloaded
  • User automatically re-joins session and starts streaming

Have you tested with:

  • User joins session and starts streaming
  • Reload browser
  • Do the said above, I mean, Catch the reload browser event and disconnect the session with:
if (this.session) { this.session.disconnect(); };

    // Empty all properties...
    this.subscribers = [];
    delete this.publisher;
    delete this.session;
    delete this.OV;
  • Browser page is reloaded
  • User automatically re-joins session and starts streaming

This is not working?

8

Sorry I misunderstood before. Yes, that is working. Thanks again!