SocketIO : WebSocket is closed before the connection is established

Question

I am using angular 4, Express 4.16.3 and Socket.IO 2.1.1 to create a chat engine for a Support Admin Panel where the support team using the admin panel can chat with customers on the website for which I'm using one server on the admin panel's side and 2 clients where one client is again on the admin panel for the support team and the other is on the website side for the customers.

I have two subdomains (one for panel and one for website) and referring to this answer as I needed a solution for cross-domain connection in socket.io
The Server is on adminpanel.azurewebsites.net
My two clients are deployed on both the subdomains :
Website client on website.azurewebsites.net and
Panel(support) client on adminpanel.azurewebsites.net
And I've also enabled the CORS on adminpanel.azurewebsites.net (Access-Control-Allow-Origin header set to *) and i have enabled websockets on the azure portal. Both my apps are https.

Server side(admin panel) looks like this:

port = process.env.PORT || 1337;
var server = require('http').Server(app);
var io = require('socket.io')(server ,{
  transports: ['websocket']
});

io.on('connection', function(socket) {
   socket.emit('socket connected')
//every time a new customer added on website end, new room is created
   socket.on('new customer added', function(username) {
      socket.broadcast.emit('new room', username)
    })
});
server.listen(port);

Client Side(admin panel) looks like this :

this.socketUrl = 'adminpanel.azurewebsites.net'
this.sockets['main'] = io.connect(this.socketUrl, {
      transports: ['websocket']
    });

this.sockets['main'].on('new room', (room) => {
  this.sockets[room] = io.connect(this.socketUrl+'?token=' + room, {
    transports: ['websocket']
  });
});

On the panel client side, a room is created for every new customer.

Client Side(website) looks like this :

this.socket = io.connect('adminpanel.azurewebsites.net?token=' + this.username, {
      transports: ['websocket']
    });
this.socket.emit('new customer added', this.username);

Now, the problem is that, this works perfectly on localhost but on production, the warning

WebSocket connection to 'wss://adminpanel.azurewebsites.net/socket.io/?token=Test%20Name&EIO=3&transport=websocket' failed: WebSocket is closed before the connection is established.

shows up on both admin panel side and website side and after that the chat stops working.

This warning shows up a few times then the following error is displayed :

enter code hereWebSocket connection to 'wss://adminpanel.azurewebsites.net/socket.io/?token=Test%20Name&EIO=3&transport=websocket' failed: WebSocket opening handshake timed out

After debugging, this is what I got :

engine.io-client:socket socket error {"type":"TransportError","description":{"isTrusted":true}} +4ms
socket.io-client:manager connect_error +8ms
socket.io-client:manager cleanup +4ms
socket.io-client:manager reconnect attempt error +5ms
socket.io-client:manager will wait 2154ms before reconnect attempt +3ms
engine.io-client:socket socket close with reason: "transport error" +19ms
engine.io-client:socket socket closing - telling transport to close +3ms
socket.io-client:manager attempting reconnect +2s
socket.io-client:manager readyState closed +2ms
socket.io-client:manager opening https://adminpanel.azurewebsites.net?token=Test Name +3ms
engine.io-client:socket creating transport "websocket" +2s
engine.io-client:socket setting transport websocket +3ms
socket.io-client:manager connect attempt will timeout after 20000 +10ms
socket.io-client:manager connect attempt timed out after 20000 +20s
engine.io-client:socket socket close with reason: "forced close" +20s

So the apps work fine for sometime, but this warning shows up and the app stops working.

I am not able to figure out what is causing this error and how I can stop it from occurring. Is there a way around this problem?