'SignalR with Angular front-end works on localhost, but doesn't work remotely

I have two Azure Web App Services: front-end (written on Angular) and back-end (written in C# with SignalR). Either of them is placed on its own server, and I am trying to make front-end connect to back-end. Previously everything worked locally when I ran it on localhost, with http, but when I try to do the exact same thing on Azure (I replaced localhost with azure website domains), I get this error in Chrome:

enter image description here

I see that https is replaced by 'wss', which I guess is not fine for SignalR (because it's supposed to fall back to https/https if wss/ws is unavailable, as one of the commenters stated). So apparently my front-end can't see my backend.

What I've tried so far:

  • Changing protocols to http, the way it was with localhost
  • Setting backend to listening to 0.0.0.0:5000
  • Turning on Web Sockets in Azure settings (on both client and server)

What is my problem, and how do I connect my client side to the server side? Thanks.

angularjsazurewebsocketserversignalr


Solution 1:[1]

You should not use port 5000 on App Service. Configure your app so that it only uses the default ports when deployed (effectively port 80 and 443). WSS/SignalR works fine over these default ports.

You can also see the list of exposed ports.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions