I am having a problem when initializing the Twilio.Device in the client js which I'm unable to track down involving the websocket of a device continuously disconnecting whilst setting up the device.
I have stripped my code to it's barebones, just getting an Access token and creating the device on a button click. I've ruled out browser problems and network, and am unable to pin-point the problem in my own code. I've tried multiple versions of twilio.js down to 1.4, with the same problem appearing in all versions. I'm currently using 1.7 from the twilio CDN. I am unable to use npm currently.
The javascript code that i have reduced to whilst still having this problem is:
$(document).ready(function(){
$('#readyButton').click(function(e){
$.get("/token", {forPage: window.location.pathname}, function(data){
console.log("testing");
var token = data.token;
}).then(function(token){
token = token.token;
Device = new Twilio.Device(token, {debug: true});
})
});
})
and the python flask code to get the token is:
@app.route('/token', methods=['POST', 'GET'])
def get_token():
token = AccessToken(app.config['ACCOUNT_SID'],
app.config['API_SID'],
app.config['API_KEY']
)
voice_grant = VoiceGrant(
outgoing_application_sid=app.config['TWIML_APP_ID'],
incoming_allow=True
)
token.add_grant(voice_grant)
token = token.to_jwt()
return jsonify({'token': token.decode("utf-8")})
When clicking the ready key in the html everything is called as expected, having tested the token in jwt debugger it looks correct
However in all browsers when I have debug set to true in the options I get:
Setting up VSP
WSTransport.open() called...
Attempting to connect...
Closing and cleaning up WebSocket...
No WebSocket to clean up.
WebSocket opened successfully.
[PStream] Setting token and publishing listen
Closing and cleaning up WebSocket...
Will attempt to reconnect WebSocket in 127ms
Steam is offline.
This continues indefinetly.
I have attempted to debug this in the twilio js without success as when I had a breakpoint in the socket suddenly stays connected on firefox, and chrome/edge continue having the same issue. I have added multiple console.logs, along with some sleep statements to ensure it isn't just an async timing issue, with no success.
I am using https with a self-signed certificate on an Azure Virtual Machine with a static IP Address.
This is my stream object immediately prior to a disconnect
{
"options": {
"debug": true,
"logPrefix": "[PStream]"
},
"token": "ommitted",
"status": "connected",
"uri": "wss://chunderw-vpc-gll.twilio.com/signal",
"gateway": "ec2-52-215-127-237.eu-west-1.compute.amazonaws.com",
"region": "EU_IRELAND",
"_messageQueue": [],
"_events": {
"error": [
null,
null
],
"ready": [
null,
null
],
"offline": [
null,
null
],
"close": [
null,
null
]
},
"_eventsCount": 6,
"transport": {
"_events": {},
"_eventsCount": 4,
"state": "open",
"_backoff": {
"_events": {},
"_eventsCount": 2,
"backoffStrategy_": {
"initialDelay_": 100,
"maxDelay_": 20000,
"randomisationFactor_": 0.4,
"backoffDelay_": 1600,
"nextBackoffDelay_": 3200,
"factor_": 2
},
"maxNumberOfRetry_": -1,
"backoffNumber_": 5,
"backoffDelay_": 1710,
"timeoutID_": -1,
"handlers": {}
},
"_log": {
"_logLevel": "debug",
"_console": {
"IS_NATIVE_CONSOLE": true
}
},
"_uri": "wss://chunderw-vpc-gll.twilio.com/signal",
"_connectTimeout": 33,
"_heartbeatTimeout": 34,
"_socket": {},
"_timeOpened": 1565713445219
}
}
and the websocket when in _closeSocket
{
"_events": {},
"_eventsCount": 4,
"state": "open",
"_backoff": {
"_events": {},
"_eventsCount": 2,
"backoffStrategy_": {
"initialDelay_": 100,
"maxDelay_": 20000,
"randomisationFactor_": 0.4,
"backoffDelay_": 1600,
"nextBackoffDelay_": 3200,
"factor_": 2
},
"maxNumberOfRetry_": -1,
"backoffNumber_": 5,
"backoffDelay_": 1710,
"timeoutID_": -1,
"handlers": {}
},
"_log": {
"_logLevel": "debug",
"_console": {
"IS_NATIVE_CONSOLE": true
}
},
"_uri": "wss://chunderw-vpc-gll.twilio.com/signal",
"_connectTimeout": 33,
"_heartbeatTimeout": 34,
"_socket": {},
"_timeOpened": 1565713445219
}
Stack trace when in _closeSocket(IP_Address ommitted)
console.trace() twilio.js:6913:17
_closeSocket https://xxx.xxx.xxx.xxx:5443/static/js/twilio.js:6913
_onSocketClose https://xxx.xxx.xxx.xxx:5443/static/js/twilio.js:6786
All objects are identical before, and after the breakpoint, but for some reason the websocket stays connected after the breakpoint has hit on Firefox.
Any help would be greatly appreciated as I feel like I've now hit a brickwall at this point
-------EDIT-------
I've now ruled out Flask problems by creating an absolute basic static html page, that runs a test js script. The only other libraries are twilio.js and jquery.js
I'm testing with a static token rather than generated, that I have given a ttl of 24 hours(ommitted)
$(document).ready(function(){
token = 'xxx'
Twilio.Device.setup(token, {debug: true});
})
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery.js"></script>
<title>TEST</title>
<script src="twilio.js"></script>
<script src="test.js"></script>
</head>
<body>
Testing
</body>
</html>
-----EDIT-----
Decided that this is not anything to do with my code and so have opened an issue with Twilio.
