Twilio呼叫阻塞由多个设备实例不尊重Twilio.Device.destroy（）

Question

我工作的一个Twilio的应用程序，其中用户将在公共终端在他们面前号码列表。有些SIP是传统的。最终用户可能会按一个按钮来呼叫名单上的一个人，进行对话，然后走开 - 然后另一个用户会走上前去呼叫另一个人。
我遇到了在那里Twilio.Device.destroy不消除游戏的所有设备的问题，并在例如第二用户将最终调用的第一个用户的目标。
首先代码，那么日志：
按钮钩：

$('.twilio-voice').click(function() { 
    var toNum = this.value; 
    console.log('To num in jq'); 
    console.log(toNum); 
    makeVoiceCall(toNum); 
}); 

makeVoiceCall功能：

var makeVoiceCall = function(toNum) { 
    console.log('To Num Is:'); 
    console.log(toNum); 
    if(localStorage.token == undefined) { 
     console.log("In If"); 
     getVoiceToken(toNum); 
    } else { 
     console.log("In Else"); 
     console.log(localStorage.token); 
     Twilio.Device.setup(localStorage.token, {debug: true}); 
     Twilio.Device.ready(function(device){ 
      console.log('IN READY TO NUM IS'); 
      console.log(toNum); 
      Twilio.Device.connect({"To": toNum}); 
     }); 
     Twilio.Device.error(function(error) { 
      console.log(error.message); 
      if(error.message == 'JWT Token Expired') { 
       getVoiceToken(toNum); 
      }; 
     }); 
    } 
}; 

有一个事件监听器启动上Twilio.Device.connect一个模式这将创建一个模式，按钮按下，当断开事件监听器都调用了同一个挂起功能：

function hangup() { 
    Twilio.Device.disconnectAll(); 
    Twilio.Device.destroy(); 
}; 

我已经尝试添加Twilio.Device.destroy（）;在makeVoiceCall的开头，Twilio.Device.ready（）;并在else语句的顶部，它们似乎没有任何作用。以下是日志的样子，如果我点击传统号码，然后是SIP号码。传统的号码被称为两次。如果首先呼叫SIP号码，则在以后尝试传统号码时将被呼叫。在这个例子中，当页面加载时，localStorage中已经有一个令牌。

To num in jq 
ts:1214 +15555555555 
ts:1178 To Num Is: 
ts:1179 +15555555555 
ts:1190 In Else 
ts:1191 
[STACKOVERFLOW EDIT: console logged token removed] 
twilio.min.js:71 Device.sounds is deprecated and will be removed in the next 
breaking release. Please use the new functionality available on 
Device.audio. 
m.defaultWarnHandler @ twilio.min.js:71 
m.deprecated @ twilio.min.js:71 
(anonymous) @ twilio.min.js:72 
l @ twilio.min.js:71 
a @ twilio.min.js:39 
setup @ twilio.min.js:59 
makeVoiceCall @ ts:1192 
(anonymous) @ ts:1215 
dispatch @ jquery-2.1.3.min.js:3 
r.handle @ jquery-2.1.3.min.js:3 
twilio.min.js:70 [Device] Setting up PStream 
twilio.min.js:70 [WSTransport] Opening socket 
twilio.min.js:70 [WSTransport] attempting to connect 
twilio.min.js:70 [WSTransport] Socket opened 
twilio.min.js:70 [PStream] Setting token and publishing listen 
twilio.min.js:70 [Device] Stream is ready 
ts:1194 IN READY TO NUM IS 
ts:1195 +15555555555 
twilio.min.js:70 [Twilio.PeerConnection] signalingState is "have-local-offer" 
twilio.min.js:70 [Twilio.PeerConnection] signalingState is "stable" 
twilio.min.js:70 [Twilio.PeerConnection] iceConnectionState is "checking" 
xb @ jquery-2.1.3.min.js:3 
get @ jquery-2.1.3.min.js:3 
css @ jquery-2.1.3.min.js:3 
get @ jquery-2.1.3.min.js:3 
cur @ jquery-2.1.3.min.js:3 
init @ jquery-2.1.3.min.js:3 
Kb @ jquery-2.1.3.min.js:3 
createTween @ jquery-2.1.3.min.js:3 
Rb.* @ jquery-2.1.3.min.js:3 
Ub @ jquery-2.1.3.min.js:3 
Vb @ jquery-2.1.3.min.js:3 
Xb @ jquery-2.1.3.min.js:3 
g @ jquery-2.1.3.min.js:3 
dequeue @ jquery-2.1.3.min.js:3 
(anonymous) @ jquery-2.1.3.min.js:3 
each @ jquery-2.1.3.min.js:2 
each @ jquery-2.1.3.min.js:2 
queue @ jquery-2.1.3.min.js:3 
animate @ jquery-2.1.3.min.js:3 
n.fn.(anonymous function) @ jquery-2.1.3.min.js:3 
addModal @ ts:974 
(anonymous) @ ts:1024 
a.emit @ twilio.min.js:162 
(anonymous) @ twilio.min.js:48 
c @ twilio.min.js:165 
a.emit @ twilio.min.js:163 
mediaStream.onopen @ twilio.min.js:21 
a.version.pc.onsignalingstatechange @ twilio.min.js:119 
twilio.min.js:70 [Twilio.PeerConnection] iceConnectionState is "completed" 
twilio.min.js:70 [Connection] Disconnecting... 
twilio.min.js:70 [PStream] Closing PStream 
twilio.min.js:70 [WSTransport] Closing socket 
twilio.min.js:70 [Twilio.PeerConnection] iceConnectionState is "closed" 
twilio.min.js:70 [Twilio.PeerConnection] signalingState is "closed" 
twilio.min.js:158 WebSocket connection to 'wss://chunderw-vpc-gll.twilio.com/signal' failed: Close received after close 
l._connect @ twilio.min.js:158 
l.open @ twilio.min.js:157 
a @ twilio.min.js:78 
a @ twilio.min.js:75 
a._setupStream @ twilio.min.js:54 
a.register @ twilio.min.js:50 
a @ twilio.min.js:46 
setup @ twilio.min.js:59 
makeVoiceCall @ ts:1192 
(anonymous) @ ts:1215 
dispatch @ jquery-2.1.3.min.js:3 
r.handle @ jquery-2.1.3.min.js:3 
twilio.min.js:70 [WSTransport] Socket received error: undefined 
twilio.min.js:70 [WSTransport] Socket closed 
twilio.min.js:70 [Device] Stream is offline 
ts:1213 To num in jq 
ts:1214 sip:test@sipexample.info 
ts:1178 To Num Is: 
ts:1179 sip:test@sipexample.info 
ts:1190 In Else 
ts:1191 [STACKOVERFLOW EDIT: token console.logged] 
twilio.min.js:70 [Device] Found existing Device; using new token but ignoring options 
twilio.min.js:70 [Device] Setting up PStream 
twilio.min.js:70 [WSTransport] Opening socket 
twilio.min.js:70 [WSTransport] attempting to connect 
twilio.min.js:70 [WSTransport] Socket opened 
twilio.min.js:70 [PStream] Setting token and publishing listen 
twilio.min.js:70 [Device] Stream is ready 
[STACKOVERFLOW EDIT: HERE IS WHERE TWO DEVICES ARE CALLED BY ONE Twilio.Device.setup()] 
ts:1194 IN READY TO NUM IS 
ts:1195 +15555555555 
ts:1194 IN READY TO NUM IS 
ts:1195 sip:test@sipexample.info 
twilio.min.js:51 Uncaught Error: A Connection is already active 
    at a.connect (twilio.min.js:51) 
    at Function.connect (twilio.min.js:60) 
    at a.<anonymous> (ts:1196) 
    at a.emit (twilio.min.js:163) 
    at a.<anonymous> (twilio.min.js:55) 
    at a.emit (twilio.min.js:163) 
    at l.transport.onmessage (twilio.min.js:78) 
    at WebSocket.c.onmessage (twilio.min.js:160) 
a.connect @ twilio.min.js:51 
connect @ twilio.min.js:60 
(anonymous) @ ts:1196 
a.emit @ twilio.min.js:163 
(anonymous) @ twilio.min.js:55 
a.emit @ twilio.min.js:163 
transport.onmessage @ twilio.min.js:78 
c.onmessage @ twilio.min.js:160 
twilio.min.js:70 [Twilio.PeerConnection] signalingState is "have-local-offer" 
twilio.min.js:70 [Twilio.PeerConnection] signalingState is "stable" 
twilio.min.js:70 [Twilio.PeerConnection] iceConnectionState is "checking" 
twilio.min.js:70 [Twilio.PeerConnection] iceConnectionState is "completed" 
twilio.min.js:70 [Connection] Disconnecting... 
twilio.min.js:70 [PStream] Closing PStream 
twilio.min.js:70 [WSTransport] Closing socket 
twilio.min.js:70 [Twilio.PeerConnection] iceConnectionState is "closed" 
twilio.min.js:70 [Twilio.PeerConnection] signalingState is "closed" 
twilio.min.js:158 WebSocket connection to 'wss://chunderw-vpc-gll.twilio.com/signal' failed: Close received after close 
l._connect @ twilio.min.js:158 
l.open @ twilio.min.js:157 
a @ twilio.min.js:78 
a @ twilio.min.js:75 
a._setupStream @ twilio.min.js:54 
a.register @ twilio.min.js:50 
setup @ twilio.min.js:59 
makeVoiceCall @ ts:1192 
(anonymous) @ ts:1215 
dispatch @ jquery-2.1.3.min.js:3 
r.handle @ jquery-2.1.3.min.js:3 
twilio.min.js:70 [WSTransport] Socket received error: undefined 
twilio.min.js:70 [WSTransport] Socket closed 
twilio.min.js:70 [Device] Stream is offline 

正如你可以在日志的底部看到季 - 由我除了标明：[STACKOVERFLOW EDIT: HERE IS WHERE TWO DEVICES ARE CALLED BY ONE Twilio.Device.setup()]，SIP和传统的单数Twilio.Device.setup通话过程中调用，即使设备通过hangup函数被破坏（我尝试了其他方法来放置Twilio.Device.destroy）。正因为如此，第二次尝试时只有实际连接的原始号码。
目前，我能想到的唯一解决方法就是为列表上的每个人创建单独的功能（这是DRY的对立面，并增加了大量工作来维护或扩展此代码）或重新加载完成通话后（我的雇主不喜欢）的页面。
如果一旦通话完成，我可以简单地释放/销毁Twilio设备，这将对我有很大的帮助。我已经尝试将Twilio.Device.disconnect(function() { Twilio.Device.disconnectAll(); Twilio.Device.destroy();});放在准备好的Twilio.Device.connect调用下，结果相同。任何帮助销毁这些多个设备（或重新使用第一个设备）将是非常宝贵的。

Answer 1

Twilio开发者传道这里。

您不必在每次通话后破坏Twilio.Device。这里实际发生的是，当Device变为ready时，您正在注册多个处理程序。

我建议稍微重新设计一下。加载页面时，请设置Twilio设备。然后监听离线事件，以便知道何时重新生成令牌并重新连接到服务。喜欢的东西：

function makeVoiceCall(toNum) { 
    Twilio.Device.connect({"To": toNum}); 
} 

function setupDevice(token) { 
    Twilio.Device.setup(token, { debug: true }); 
} 

function getVoiceToken(callback) { 
    $.post('/token', function(data) { 
    localStorage.token = data.token; 
    callback(token); 
    }) 
} 

function init() { 
    if(localStorage.token == undefined) { 
    getVoiceToken(function(token){ 
     setupDevice(token) 
    }); 
    } else { 
    setupDevice(localstorage.token) 
    } 

    // Ready will setup click handlers. 
    Twilio.Device.ready(function() { 
    $('.twilio-voice').click(function() { 
     var toNum = this.value; 
     makeVoiceCall(toNum); 
    }); 
    }); 

    // offline will remove click handlers, get a new token and setup the device again 
    Twilio.Device.offline(function() { 
    // unregister click handlers for now 
    $('.twilio-voice').off('click'); 
    getVoiceToken(function(token) { 
     setupDevice(token); 
    }) 
    }) 
} 

window.addEventListener('load', init); 

我做了的getVoiceToken一个新版本在这里，以便它返回一个回调的道理，我想使事情变得更加容易阅读。

让我知道这是否有帮助。