我在 Angular 应用程序中使用 Twilio。每当用户访问某个页面(我们称之为客户页面)时,我都会初始化 Twilio 设备,以便用户可以呼叫特定客户。在客户控制器中调用此初始化函数:
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);
}
这是上面传入的断开处理程序:
function onDisconnect() {
console.log('SAVING CALL');
// code to save call
}
问题是,每当用户离开客户页面并返回(不刷新页面)时,客户控制器就会再次运行,导致_initializeDevice
函数也再次运行。多个连接/断开/等。处理程序最终被注册到同一个设备,这导致应该只运行一次的东西运行多次。
这是我的控制台日志示例来说明问题...
所以当我第一次去客户页面并_initializeDevice
第一次打电话时,会发生以下情况:
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
然后我离开客户页面并再次返回,没有刷新,因此控制器再次运行初始化代码并复制处理程序:
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
我尝试使用Twilio.Device.destroy()
,但处理程序仍然存在。
如何检查处理程序是否已连接到 Twilio 设备?或者,我应该将事件处理程序附加到我的 Angular 应用程序的其他地方吗?
编辑:作为参考,这是我断开呼叫的方式(附加到按钮):
function hangUp() {
Twilio.Device.disconnectAll();
}