Share via

Multiple services using pm2 with Websockets on Azure Linux Web App, which ports?

mg12345 1 Reputation point
2022-02-16T15:21:57.253+00:00

I'm working on creating a WebApp using React and Websockets building it of from this example here: https://learn.microsoft.com/en-us/azure/iot-hub/iot-hub-live-data-visualization-in-web-apps

Locally everything is working fine. I have the React frontend code in a separate folder as well as the websocketserver code.

I'm trying to both into a single Azure Linux Web App (Basic tier not free) and starting it up with pm2 and this ecosystem.config.js:

   module.exports = {  
     apps : [  
         {  
           name : "frontend",  
           script : "serve",  
           env: {  
             PM2_SERVE_PATH: './frontend/build',  
             PM2_SERVE_SPA: 'true',  
           }  
         },  
         {  
           name   : "websocketserver",  
           script : "./websocketserver/server.js",  
         }  
     ]  
   }  

Both services are starting up correctly but the websocket connection is unable to connect.

The server in server.js looks like this:

   const server = http.createServer();  
   const wss = new WebSocket.Server({ server });  
     
   wss.broadcast = (data) => {  
     if (wss.clients.size === 0) {  
       console.log(`No clients connected. Broadcasting over port ${server.address().port}`);  
       // console.log(`No clients connected. Broadcasting over port ${wss.options.port}`);  
     
     } else {  
       wss.clients.forEach((client) => {  
         if (client.readyState === WebSocket.OPEN) {  
           try {  
             console.log(`Broadcasting data ${data}`);  
             client.send(data);  
           } catch (e) {  
             console.error(e);  
           }  
         }  
       })  
     }  
   };  
     
   server.listen('8081', () => {  
     console.log('Listening on %d.', server.address().port);  
   });  

If I use process.env.PORT || '3000' in server.listen(), then I get an EAINUSE error as it conflicts with the frontend 8080 port, so I handpicked 8081.

I have not found any useful article about this. Can anybody help and advice what to try?

Thanks!

Azure App Service
Azure App Service

Azure App Service is a service used to create and deploy scalable, mission-critical web apps.

0 comments No comments

1 answer

Sort by: Most helpful
  1. Grmacjon-MSFT 19,511 Reputation points Moderator
    2022-02-18T06:17:38.03+00:00

    Hello @mg12345 ,

    Thanks for the detailed question. All http/https traffic for non container apps uses ONLY ports 80 and 443. You can learn more here:
    https://learn.microsoft.com/en-us/azure/app-service/networking-features#app-service-ports

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

    Best,
    Grace

    175683-app-service-ports.png

    Was this answer helpful?

    0 comments No comments

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.