How to fix WebSocket connection error in Static web app

Question

I'm trying to connect websocket api.

The frontend is Next.js and it's on Azure static web app

And the backend is Django, it's on Azure app service.

I enabled CORS in the backend, so frontend in localhost has no problem when I connect websocket api of backend (it's on Azure App Service.).

I can't find any reason or message on the browser console why connection is failed.

WebSocket connection to 'wss://assessmate.azurewebsites.net/ws/notify/' failed: 

_app-456513e57728c64c.js:149 WebSocket error: 
Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}
  isTrusted: true
  bubbles: false
  cancelBubble: false
  cancelable: false
  composed: false
  currentTarget: WebSocket {url: 'wss://assessmate.azurewebsites.net/ws/notify/?toke… 
  I6MX0.zgUVAmgIStnz7iIj8OXyIhPIK4QqvFbyvPNsjhal86A', readyState: 3, bufferedAmount: 0, onopen: ƒ, onerror: ƒ, …}
  defaultPrevented: false
  eventPhase: 0
  returnValue: true
  srcElement: WebSocket {url: 'wss://assessmate.azurewebsites.net/ws/notify/?toke… 
  I6MX0.zgUVAmgIStnz7iIj8OXyIhPIK4QqvFbyvPNsjhal86A', readyState: 3, bufferedAmount: 0, onopen: ƒ, onerror: ƒ, …}
  target: WebSocket {url: 'wss://assessmate.azurewebsites.net/ws/notify/?toke…I6MX0.zgUVAmgIStnz7iIj8OXyIhPIK4QqvFbyvPNsjhal86A', 
  readyState: 3, bufferedAmount: 0, onopen: ƒ, onerror: ƒ, …}
  timeStamp: 11759.199999999255
  type: "error"
  [[Prototype]]: Event

Please help us!

Answer 1

Hi @Chengxuan He we are sorry to hear you're facing this issue. Is this a windows or Linux web app?

Here are 3 things you can do to troubleshoot this issue:

• Ensure that WebSockets are enabled in your Azure App Service. If your app is hosted on Linux, WebSockets are always enabled, and thus, you won’t find an option to turn them on or off. However, if its Windows based, you'll find the option present in the App's settings, Configuration tab.
• Look into your CORS settings to ensure they are correctly configured to allow connections from your Azure Static Web App domain. This includes ensuring that the Access-Control-Allow-Origin header is set to allow your frontend domain.
• Lastly,if your application relies on stateful connections, you might need to disable ARR Affinity in the General settings tab of your App Service. ARR Affinity can sometimes interfere with WebSocket connections

Hope that helps. Please let us know if you have further questions.

-Grace