I'm attempting to use the JsSIP library to build a softphone with LWC. I've created the CSP records for my websocket server, but I still can't connect for some reason.
Every time it attempts to connect I get the following error:
jssip-3.3.11.js:25371 WebSocket connection to 'wss://xxx.xxx.com:5050/' failed: WebSocket opening handshake timed out
Is there additional configuration I need to do in order to get WebSockets and LWC working together? Has anyone come across this error before in LWC?
Here is the code I have for the LWC component:
//================================================================================
// Libraries
//================================================================================
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript } from 'lightning/platformResourceLoader';
import JSSIP from '@salesforce/resourceUrl/jssip';
//================================================================================
// Private Properties
//================================================================================
const SIPEvent = {
UA: {
CONNECTING: 'connecting',
CONNECTED: 'connected',
DISCONNECTED: 'disconnected',
REGISTERED: 'registered',
UNREGISTERED: 'unregistered',
REGISTRATION_FAILED: 'registrationFailed',
REGISTRATION_EXPIRING: 'registrationExpiring',
NEW_SESSION: 'newRTCSession',
NEW_MESSAGE: 'newMessage',
SIP_EVENT: 'sipEvent'
},
SESSION_PROGRESS: "progress",
SESSION_FAILED: "failed",
SESSION_ENDED: "ended",
SESSION_ACCEPTED: "accepted",
SESSION_CONFIRMED: "confirmed",
SESSION_INCOMING: "incoming"
};
const remoteAudio = new window.Audio();
remoteAudio.autoplay = true;
const callOptions = {
mediaConstraints: { audio: true, video: false },
rtcOfferConstraints: { offerToReceiveAudio: true, offerToReceiveVideo: false }
};
//================================================================================
// Component Class
//================================================================================
export default class DemoSoftphone extends LightningElement {
jsSipInitialized = false;
session = null;
phone = null;
addStreamListener = null;
renderedCallback() {
if(this.jsSipInitialized) {
return;
}
// initialize jssip
this.jsSipInitialized = true;
Promise.all([
loadScript(this, JSSIP + '/jssip-3.3.11.js')
])
.then(() => {
this.initializeJsSip();
})
.catch(error => {
console.log(error);
});
}
initializeJsSip() {
const socket = new JsSIP.WebSocketInterface('wss://xxx.xxx.com:5050');
const config = {
sockets: [ socket ],
uri: 'sip:user@domain',
password: 'password'
};
this.phone = new JsSIP.UA(config);
this.phone.on(SIPEvent.UA.CONNECTING, (event)=> console.log('connecting:', event));
this.phone.on(SIPEvent.UA.CONNECTED, (event)=> console.log('connected:', event));
this.phone.on(SIPEvent.UA.DISCONNECTED, (event)=> console.log('disconnected:', event));
this.phone.on(SIPEvent.UA.REGISTERED, (event)=> console.log('registered:', event));
this.phone.on(SIPEvent.UA.UNREGISTERED, (event)=> console.log('unregistered:', event));
this.phone.on(SIPEvent.UA.NEW_MESSAGE, (event)=> console.log('newMessage:', event));
this.phone.on(SIPEvent.UA.SIP_EVENT, (event)=> console.log('sipEvent:', event));
this.phone.on(SIPEvent.UA.REGISTRATION_FAILED, this.onRegistrationFailed);
this.phone.on(SIPEvent.UA.NEW_SESSION, this.onNewSession);
this.phone.start();
}
onRegistrationFailed = (event) => {
alert('Registering on SIP server failed with error:', event.cause);
console.log('Registering on SIP server failed with error:', event.cause);
};
onNewSession = (event) => {
console.log('NEW RTC SESSION!');
};
}
wss://xxx.xxx.com:5050
was the correct uri? – jami0821 Feb 12 '20 at 14:05