amazon web services - Web-sockets on AWS Elastic Beanstalk not working for my angular app but does work when serving app via localhost?

Question

I followed a guide to implement web-sockets in my test/learning Angular MEAN stack app. The web-sockets implementation worked out fine when running the app locally, but as soon as I upload it to AWS Elastic Beanstalk, I get a "502 Bas Gateway" error when navigating to the environment/app's URL.

I'm using node package "socket.io" (for the backend) and "ngx-socket-io" (for frontend), then added the sockets like this in backend (server.js file):

const http = require('http');
const debug = require('debug')('node-angular');
const app = require('./app');
var socketIO = require('socket.io');

var os = require("os");


//To ensure the provided port is a valid number
const normalizePort = val => {
    var port = parseInt(val,10);
    if (isNaN(port)) {
        //named pipe
        return val;
    }
    if (port >= 0) {
        return port;
    }
    return false;
};

//To handle errors of different types and exit the server-listening process if one is detected.
const onError = error => {
    if (error.syscall !== "listen") {
        throw error;
    }
    const bind = typeof addr === "string" ? "pipe " + addr : "port " + port;
    switch (error.code) {
        case EACCES:
            console.log(bind + " requires elevated privilages");
            process.exit(1);
            break;
        case EADDRINUSE:
            console.log(bind + " is already in use");
            process.exit(1);
            break;
        default:
            throw error;
    }
};

//console logs that we are now listening to incoming requests
const onListening = () => {
    const addr = server.address();
    const bind = typeof addr === "string" ? "pipe " + addr : "port " + port;
    debug("Listening on " + bind);
};

const port = normalizePort(process.env.PORT || "3000");
app.set(port);

const server = http.createServer(app);

/////////////////////////////////////////////////////////////////////////////////
//for web sockets
var socketIOServer = socketIO.listen(server);

socketIOServer.sockets.on('connection', (socket) => {
  console.log('Socket connected');

  socket.on('createPost', (post) => {
    socketIOServer.emit('createPost', post);
    console.log('Create Post socket emitted');
  });

  socket.on('updatePost', (post) => {
    socketIOServer.emit('updatePost', post);
    console.log('Update Post socket emitted');
  });

  socket.on('deletePost', (post) => {
    socketIOServer.emit('deletePost', post);
    console.log('Delete Post socket emitted');
  });
});
/////////////////////////////////////////////////////////////////////////////////


server.on("error", onError);
server.on("listening", onListening);
server.listen(port,()=>{
  console.log("Server started at: "+os.hostname()+":"+port);
});

There's more code relating to the frontend of course but I'm pretty sure it's not relevant, as I've isolated the problem down to the inclusion of the code under 'for web sockets' comment.

I'm guessing it's something to do with port forwarding, and if so I wouldn't know how to change them on AWS or if doing so is even possible.

I'm using AWS Elastic Beanstalk free tier just for learning, and I don't know much of anything about AWS or how servers work except for a basic understanding. I really just want my working app (locally) to be deployable and work the same way once on the actual web. Any help/suggestions are greatly appreciated.

question from:https://stackoverflow.com/questions/66050432/web-sockets-on-aws-elastic-beanstalk-not-working-for-my-angular-app-but-does-wor

Answer 1

Waitting for answers