SignalR cannot establish a connection if it is on HTTPS

So apparently I have 4 environment , 3 environments runs on HTTP and one in HTTPS. Which are all deployed on azure. I am using react-redux as my front end and Asp.net MVC5 as my backend. I tried deploying and testing the signalR to the 3 environments that is running on HTTP and it works like a charm , but when I deployed it on HTTPS. It doesn't work. I have properly configured everything. Since the SignalR is used by me as a chat System and the others where running like REST Apis (endpoints etc. ) My question here is , is the problem in the SSL Certificate of the signalR? I have tried various searches but no luck. Here is my Client Side code since I think the problem is here.

    connectToSignalR(){
    const con = $.connection;
    let hubConnection = con.activeViewersHub;
    const { prop1,  match: { prop2}, actions: {getViewingUsers} } = this.props;


    hubConnection.client.getMessage= (response) =>{
        getMessages(response);
    };

    con.hub.url = `${URL}/signalr`;
    con.hub.start({withCredentials:true,transport: 'longPolling' })
    .done(()=>{
        hubConnection.server.addMessage(prop1,prop2);
    });     
}

my point is that SSL is properly configured in azure. Since the system is running and everything is working fine, only in signalR that it doesn't work. Been spending a week already in this scenario. Any thoughts about this?