How to fix WebSocket connection error in Static web app

Chengxuan He 5 Reputation points
2024-06-26T13:29:05.42+00:00

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!

Azure Static Web Apps
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
837 questions
0 comments No comments
{count} votes