WebSockets not working in Azure Static Web App -> Azure App Service

Question

I am having issues getting websockets to work in Azure with the following setup:

• Frontend in React, hosted in an Azure Static Web App
• Backend in Node.js (v20 LTS) running in a linux Azure App Service
• The API requests go to the frontend URL under /api, which is automatically proxied to the backend app service (this is all handled through the static web app configuration)

I am using socket.io on both the frontend and backend. The websocket works when the transport is set to polling, so I am confident the URL is correct. However, when the transport is set to websocket, the frontend is unable to establish a connection. The backend has no log of the request, and the frontend shows the following in the console:

index-Y7P4MTLR.js:545 WebSocket connection to 'wss://<redacted>.com/api/socket.io/?EIO=4&transport=websocket' failed:

This is the frontend code:

  const socket = io(socketHost, {
    path: "/api/socket.io",
    withCredentials: true,
    transports: ["websocket"],
  });

The network tab shows the websocket requests with a status of Finished and no response body or any useful information.

I am using socket.io version 4.7.5 on both the frontend and the backend.

Any help is greatly appreciated. Thank you!

Answer 1

I ended up finding out the solution. Per the official docs: Only HTTP requests are supported for APIs. WebSocket, for example, is not supported

Answer 2

@Seth Riedel Glad that you were able to resolve your issue and I appreciate your effort in sharing the solution. Your contribution will undoubtedly assist others facing similar challenges.

As the Microsoft Q&A community follows a policy where the question author cannot accept their own answer- https://learn.microsoft.com/en-us/answers/support/accept-answer

I've reposted your solution.  Feel free to consider "Accepting" the answer if you find it suitable.

Update- Issue resolved-

As Per the official docs: Only HTTP requests are supported for APIs. WebSocket, for example, is not supported

Check- https://learn.microsoft.com/en-us/azure/static-web-apps/apis-overview#constraints