Disconnection / reconnection

[Pierre MARS]

Hello,

I've seen a quite similar subject in the forum, nevertheless, i'm not sure that it's the same.

I'm using easyrtc 0.9.0

i've just made "connection" and "disconnection" in the instant messenging demo as we can see in the send/recieve screen demos.

the problem is when a customer is disconnected, he's not able to reconnect.

i think that he goes into the "connect()" function but nothing more happens.

If you need more informations to help, just let me know to give you the details you're expecting...

[Eric Davies]

Hi Pierre,

Disconnecting and then reconnecting is a use-case we haven't explored before last week. However, another Easyrtc user asked me the same question so I looked into it. Reconnecting when you are using socket.io (what Easyrtc uses underneath) is a bit non-intuitive. However, by adding the following
html to the simple audio video demo, I was able to disconnect and reconnect, and establish video connections after the reconnection.

                    <button onclick="easyRTC.disconnect()">Disconnect from signaling server</button>
                    <button onclick="easyRTC.webSocket.socket.connect();">Reconnect to signaling server</button>

There is a post-it note on my monitor reminding me to add logic to the alpha branch to explicitly support reconnection so you won't need to access our internal data structures.

Eric.

[Pierre MARS]

Good evening,

as i'm not sure you've recieve my past message, i post again, but to ask another question :

First, thanks for the fast, and i'm glad to know about the reminder ;) 

Should i understand that i should replace the "connect()" function with the second line you've posted instead of the usual call of "connect()" into the js file? Or is it just another function to use (smthg like a direct call to the server)?

 

                    <button onclick="easyRTC.webSocket.socket.connect();">Reconnect to signaling server</button>

Anyway, I'll try this now!

 

[Pierre MARS]

Well,

it seems to work fine for reconnection, but it does not end the first connection.

may be there is timer in the code which kills sessions (sorry, I've not yet explored everything), but when i connect and reconnect many times, it ends with :

at the peer side : many button with the same userName in the "otherclient" div

at the host side :  the button with the usernames of the peer + the buttons with the own username of the host... 

(i m not sure that clear ;p )

so, i think that there's a sessions kill to set.

Am i wrong, or is it a way you've not explored yet?

regards,

[Eric Davies]

Hi Pierre,

Good morning again (thanks to timezone differences).

Do not replace your "connect()" function, add the reconnection button as an addition button. If you want to be cleaner and only have one button, do something like:

       function new_connect() {

            if( !easyRTC.webSocket ) {

                    use_original_connect_logic();

            }

            else {

                   easyRTC.webSocket.socket.connect();

            }

       }

The reconnect button logic in my previous post only works when you previously had a connection, disconnected, and now want to reconnect.

Socket.io treats reconnection as being very different to the initial connection.

As I said, this is something I'll clean up in the new version.

Cheers,

Eric.

[Pierre MARS]

Hehe, hope it's not too early for you :)

OK, i must admit, that a compulsive behavior to connect/reconnect many times, but you never know what kind of use cases you'll have in real life  ;)

your explaination seems to be clear (as far as i understand).

Before attempting to replace the "connection" button, i've just added the "reconnection" button. And as i said, it worked fine but didn't kill the past sessions (if i might call them this way).

Anyway, don't waste your time to answer me as you already are working on this... Until you'll find the right way for this usecase, I'll try to find a trick (unless our discussion is usefull for you)

Have a good day !

[Pierre MARS]

OK.... i think i'm going crazy, i've made something which seems to work... functionnaly, but i m not sure about technical issues...

I guess that code is ugly, but that is the only thing i was able to do for now!

Something is wrong for you?

I copy / paste the code :

function connect() {

    if( !easyRTC.webSocket ) { /* managing auth & reauth */

    //##############################################" Authenticate + connection " ##################################

        console.log("Initialisation.");

        

        var userName = document.getElementById('userName').value;

        if( !easyRTC.isNameValid(userName)) {

            easyRTC.showError("BAD-USER-NAME", "Bad user name");

            return;

        }

        else {

            easyRTC.setDataListener(addToConversation);

            easyRTC.setLoggedInListener(convertListToButtons);

            easyRTC.connect("im", loginSuccess, loginFailure);

            easyRTC.setUserName(userName);

            if( window.localStorage ) {

                window.localStorage.easyrtcUserName = document.getElementById('userName').value;

            }

        }

    }

    else {

        var UserRecoName=document.getElementById('userName').value;

        easyRTC.setUserName(UserRecoName);

        if( window.localStorage ) {

            window.localStorage.easyrtcUserName = document.getElementById('userName').value;

        }

        if(!easyRTC.isNameValid(UserRecoName)) {

            easyRTC.showError("BAD-USER-NAME", "Bad user name");

            return;

        }

        else {

            easyRTC.webSocket.socket.connect();

            easyRTC.setDataListener(addToConversation);

            easyRTC.setLoggedInListener(convertListToButtons);

        }

    } 

.......................

function disconnect() {

    if (!easyRTC.webSocket) { /*managin disconnection */

        return;

    }

    else {

        document.getElementById("iam").innerHTML = "Disconnected";

        easyRTC.disconnect();

        console.log("Disconnected from server");

        enable("connectButton");

        disable("disconnectButton");

        document.getElementById('userName').value="";

        window.localStorage.easyrtcUserName="";

        easyRTC.webSocket.socket.disconnect();

    }

}

[Pierre MARS]

sure, the last line, is  : easyRTC.disconnect();

[Pierre MARS]

Hi,

This problem is not solved...

When i click on disconnect, i don't see clients connected anymore... BUT, the video stream's still alive.

how to kill stream?

i m trying to catch it on the documentations you provided with easyrtc, but for now, i don t find the way to do it.

thx

[Pierre MARS]

well, it s not enough explicit.

I meant that when i do a call with Audio enabled and video disabled, it's OK. But if i disconnect, then reconnect, I'm not able to open a new video stream.

surely because the previous data channel is still alivE.

[Eric Davies]

I can confirm your observations on Chrome. I haven't tried it on Firefox.

easyRTC.disconnect calls easyRTC.hangupAll which calls easyRTC.hangup on any connections, which in turn invoked the peerConnections close method, and deletes the parent of the peer connection. I've even tried delete the peerConnection object itself after invoking close.

However, if you open up a "chrome:webrtc-internals" frame (just enter that as a url in a fresh tab), you will see that the peer connection is still hanging around.

I believe we've noticed this in the past. I don't see a solution for extinguishing old peerConnection objects.

However, peerConnection objects do have a removeStream method. Try replacing the hangupBody method in your easyrtc.js with the following experimental code:

    function hangupBody(otherUser) {

        if (easyRTC.debugPrinter) {

            easyRTC.debugPrinter("Hanging up on " + otherUser);

        }

        clearQueuedMessages(otherUser);

        if (easyRTC.peerConns[otherUser]) {

            if (easyRTC.peerConns[otherUser].startedAV) {

                try {

                    easyRTC.peerConns[otherUser].pc.close();

                    function streamRemover(streamGetter) {

                        if( streamGetter) {

                            var streams = streamGetter.bind(easyRTC.peerConns[otherUser].pc, []);

                            for(var i = streams.length-1; i >= 0; i--) {

                                easyRTC.peerConns[otherUser].pc.removeStream(streams[i]);

                            }

                        }

                    }

                    streamRemover(easyRTC.peerConns[otherUser].pc.getLocalStreams);                    

                    streamRemover(easyRTC.peerConns[otherUser].pc.getRemoteStreams);

                    delete easyRTC.peerConns[otherUser].pc;

                } catch (ignoredError) {

                    console.log("saw error", ignoredError);

                }

                if (easyRTC.onStreamClosed) {

                    easyRTC.onStreamClosed(otherUser);

                }

            }

            easyRTC.peerConns[otherUser].cancelled = true;

            delete easyRTC.peerConns[otherUser];

            if (easyRTC.webSocketConnected) {

                sendMessage(otherUser, "hangup", {}, function() {

                }, function(msg) {

                    if (easyRTC.debugPrinter) {

                        debugPrinter("hangup failed:" + msg);

                    }

                });

            }

            if (easyRTC.acceptancePending[otherUser]) {

                delete easyRTC.acceptancePending[otherUser];

            }

        }

    }

[Pierre MARS]

Hi Eric, 

Thanks again!

I'll try this.

I managed to totally disconnect someone earlier, but i don't remember how i did that.

Nevertheless, i also think that my code was not THAT good ;)

i'll keep in touch!

++

[Pierre MARS]

Nothing more happened.

I still have the problem.

:( i'm watching that on my side, and I'll give you news if I go further in the understanding...!

[Pierre MARS]

Just for information, i'm trying that on local server for now, i've not tried it yet with another peer connected.

even if i doubt it explains the problem... we never know.

I've got a VM on which I can do some tests. I'll see that also.

[Pierre MARS]

OK... just a question now. I'm sorry with all these message, but I write them whil i'm thinking ^^

these 2 lines appears on when connect() function is called :

easyRTC.enableAudio(document.getElementById('shareAudio').checked);

easyRTC.enableVideo(document.getElementById('shareVideo').checked);

Should't we check that only when the call is performed?

[Pierre MARS]

i'm going crazy...

May be I don't really understand the functionnality of listeners...

well, when i connect 2 people in the same time, if i stop the server and relaunch it, without closing the browsers, both clients can directly see each other without having to reconnect.

I think i'll rewrite the entirely code... 

However, I wonder if this https://github.com/LearnBoost/socket.io-client/issues/251 is still true today, but I think it is very similar

[Eric Davies]

Hi Pierre,

There are two different types of connections going on here, that have no relationship to each other, other than what we impose:

• The connection to the signalling server: each client is connected to the signalling server via a websocket connect. Some people have used instant message or even email messages for this (more to show it can be done than anything serious).
  
• The connection between two clients: aka, the WebRTC PeerConnection.
  

For our purposes, we'd like the connection between two clients to be lost when either loses their connection to the signalling server. Hence, on disconnection from the server, we do everything we can to shut down that PeerConnection but it obviously isn't enough. 

Now, if you are using an Apple, we've noticed that the camera is not properly relinguished when a WebRTC application ends. We don't know if that is an Apple bug or Chrome bug. 

[Pierre MARS]

Hello dear,

Yes, even if i can't really go further in details, I've clearly understood the difference between connection to a peer and the connection to the signaling server.

What I think i understand for now :

1) server is launched (server.js) opening port, setting http, websocket listener...

2) easyrtc.js is a kind of a library of functions like : connecting to the signaling server - openingor closing  websockets, or managing the data channels and listeners (for peer connections...)

3) a "client.js" can be made to use these functions and set up the html page.

I'm trying to make an unified product : on the same page, a client can make an audio call, a video call (with audio, i'll see if i can cut the audio flow after that, or if I'd rather give an option to cut the microphone), a chat, a file sharing (through sharefest for the moment, then i ll do my own), or a video conference.

For now, I'm (or "we are") trying to find a way to close clearly the peer connection and even the local media channels, because even if i close connection to the peer, my own video is still enabled (or may be I just should set the div to display:none;....) then, when it'll be done, i'd like the client could make a new call (video, audio, chat...).

I'm not using any apple device (I just used my iPhone to test the chat, but nothing with getUserMedia)

I'm on a linux client / linux server (local and distant).

I still have a lot of work to do to understand everything clearly. And you can bet i'll bug you again soon!

regards,

Pierre.