How to check if Twilio.Device handlers already exist

Question

I'm using Twilio in an Angular app. I'm initializing the Twilio device whenever the user visits a certain page (let's call it the customer page) so that the user can call a specific customer. This initialize function is called in the customer controller:

function _initializeDevice(token, connectHandler, disconnectHandler) {
    console.log('CALLED INITIALIZE DEVICE');
    var device = Twilio.Device;
    device.setup(token, {debug: true});
    console.log(device);

    device.connect(connectHandler);
    device.disconnect(disconnectHandler);

    device.offline(function() {
        _getToken().then(function(result) {
            device.setup(result.data.token, {debug: true});
        });
    });

    device.error(_handleTwilioError);
}

And this is the disconnect handler that gets passed in above:

function onDisconnect() {
    console.log('SAVING CALL');
    // code to save call
}

The problem is, whenever the user navigates away from the customer page and back (without refreshing the page), the customer controller runs again, causing _initializeDevice function to also run again. Multiple connect/disconnect/etc. handlers end up getting registered to the same device, which causes things that should only be run once to run multiple times.

Here's a sample of my console logs to illustrate the issue...

So here's what happens when I first go to the customer page and call _initializeDevice the first time:

CALLED INITIALIZE DEVICE
[Device] Setting up PStream
[WSTransport] Opening socket
[WSTransport] attempting to connect
[WSTransport] Socket opened
[PStream] Setting token and publishing listen
[Device] Stream is ready
[Device] Found existing Device; using new token but ignoring options
[PStream] Setting token and publishing listen
[Twilio.PeerConnection] signalingState is "have-local-offer"
[Twilio.PeerConnection] signalingState is "stable"
[Twilio.PeerConnection] iceConnectionState is "checking"
[Twilio.PeerConnection] iceConnectionState is "connected"
[Twilio.PeerConnection] iceConnectionState is "completed"
[Connection] Disconnecting...
[Twilio.PeerConnection] iceConnectionState is "closed"
[Twilio.PeerConnection] signalingState is "closed"
SAVING CALL

Then I navigate away from the customer page and back again, without refreshing, so the controller runs the initialize code again and duplicates the handlers:

CALLED INITIALIZE DEVICE
[Device] Found existing Device; using new token but ignoring options
[PStream] Setting token and publishing listen
CALLED INITIALIZE DEVICE
[Device] Found existing Device; using new token but ignoring options
[PStream] Setting token and publishing listen
[Device] Found existing Device; using new token but ignoring options
[PStream] Setting token and publishing listen
[Twilio.PeerConnection] signalingState is "have-local-offer"
[Twilio.PeerConnection] signalingState is "stable"
[Twilio.PeerConnection] iceConnectionState is "checking"
[Twilio.PeerConnection] iceConnectionState is "connected"
[Twilio.PeerConnection] iceConnectionState is "completed"
[Connection] Received HANGUP from gateway
[Connection] Disconnecting...
[Twilio.PeerConnection] iceConnectionState is "closed"
[Twilio.PeerConnection] signalingState is "closed"
SAVING CALL
SAVING CALL
SAVING CALL

I tried usingTwilio.Device.destroy(), but the handlers are still there.

How can I check if handlers have already been attached to the Twilio device? Or, am I supposed to be attaching the event handlers somewhere else in my Angular app?

Edit: for reference, here's how I'm disconnecting calls (attached to a button):

function hangUp() {
    Twilio.Device.disconnectAll();
}

Answer 1

Twilio.Device currently does not support un-registering listeners. Seems like this was due to its singleton behavior. This may change in the future, but for now you can remove the listeners directly using the following for each event you've bound:

Twilio.Device.instance.removeListener('eventName', handlerFn);

Take care not to removeAllListeners as the Device instance is listening for some of its own events.