Why do I keep getting 404 error for Socket.io polling requests?

Question

Getting quite a few of these spawning from my React app: GET http://exampleenvv2-env.eba-yjtafbmz.us-east-1.elasticbeanstalk.com/socket.io/?EIO=3&transport=polling&t=NLE1Pn5

My React sits on port 8080 and Express on 5000, both behind Nginx on AWS Beanstalk. From SSH'ing into the instance, it appears both are running fine, and since I can access the React app in browser fine, it looks like it properly routes to that server.

I was able to get a basic chat app working locally between two browser windows.

I do this in my React page.js:

import socketIOClient from "socket.io-client";
var io = require('socket.io');
var socket = socketIOClient();

Server.js (for Express/Socket.io listening):

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const router = express.Router();

var Immutable = require('immutable');
var SortedSet = require("collections/sorted-set");

var Map = Immutable.Map;
var List = Immutable.List;

var hostname = process.env.IP || 'localhost';
var port = 5000;

var games = Map();
var players = Map();
var availableKeys = SortedSet();
var maxKey = 0;

/.../

http.listen(port, hostname, function () {
console.log("Server is listening on http://" + hostname + ":" + port);
});

Nginx location config portion:

location / {
  proxy_http_version  1.1;
  proxy_pass          http://127.0.0.1:8080/;
  proxy_set_header    Host $host;
  proxy_set_header    X-Real-IP $remote_addr;
  proxy_set_header    Connection $connection_upgrade;
  proxy_set_header    Upgrade $http_upgrade;
  proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
}

location /socket.io {
  proxy_pass                http://127.0.0.1:5000/;
  proxy_set_header          Host $host;
  proxy_set_header          X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header          X-NginX-Proxy true;
  proxy_set_header          X-Real-IP $remote_addr;
  proxy_ssl_session_reuse   off;
  proxy_cache_bypass        $http_upgrade;
}

I've tried using the path option to '/socket.io' for node and react, that didn't seem to help.

Here's an example of the error.log:

2020/10/22 01:36:44 [error] 20352#0: *279 connect() failed (111: Connection refused) while connecting
to upstream, client: 172.31.22.103, server: , request: "GET /socket.io/
EIO=3&transport=polling&t=NLDyuCl HTTP/1.1", upstream: "http://127.0.0.1:5000//? 
EIO=3&transport=polling&t=NLDyuCl", host: "exampleenvv2-env.eba-yjtafbmz.us-east- 
1.elasticbeanstalk.com", referrer: "http://exampleenvv2-env.eba-yjtafbmz.us-east- 
1.elasticbeanstalk.com/"

Since you are using EB you can use the Application Load Balancer which does not need Nginx and it supports stickiness for TCP connections and it handles the upgrade as well. Also looking into Nginx seems your socket server is running on port 5000 is 5000 port open? — Biswa Soren, Oct 28 '20 at 07:21
Confusion: on the marketing lingo, it said the load balancer came with it and it sounded like it was set up automatically? I have enabled whatever the default is for listeners/processes (port 80) and the EC2 instance seems to see an active one. And I've set up 5000 for all traffic in the EB Security Group and netstat sees node running on 5000. — A13X, Oct 30 '20 at 01:12
Also I am funneling everything through port 80 anyway initially, and having Nginx split it to "/" for React and "/socket.io" for the backend nodejs. Kind of hard to debug, not getting anything on eth0 for 5000 or 8080. — A13X, Oct 30 '20 at 01:24
Actually, is it required I add `` to my index.html if I'm using React? The package.json should take care of compiling the module in, and then the require() in the .js should grab that file? — A13X, Oct 30 '20 at 05:10
if you have the module in package.json you don't need to pull the remote script again — Biswa Soren, Oct 30 '20 at 05:19

score 2 · Accepted Answer · answered Oct 30 '20 at 05:37

It turns out the top-ranked answer here with the Nginx configuration was all I needed.

I ended up editing the path but also added a few other lines, but I really think the path was being finicky. Nginx is good about going from specific to general, but whether it needs to be an exact match or closest-related is up to the user.

location ~* \.io {
  proxy_pass                http://127.0.0.1:5000;
  proxy_set_header          Host $http_host;
  proxy_set_header          X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header          X-NginX-Proxy false;
  proxy_set_header          X-Real-IP $remote_addr;
  proxy_ssl_session_reuse   off;
  proxy_set_header          Upgrade $http_upgrade;
  proxy_set_header          Connection "upgrade";
  proxy_redirect            off;
  proxy_http_version        1.1;
}

Thank you to the other answers which are other good steps for troubleshooting this setup!

score 1 · Answer 2 · answered Oct 29 '20 at 14:10

1

I'm no nginx expert, but is it possible that nginx is routing your socket request to your react app? The location path / may be matching all requests and routing all traffic to the react app. Try either getting rid of nginx as @Biswa has already commented, or try making a more specific path for your react app e.g. /ui and see if the the socket requests actually get routed to the correct process.

answered Oct 29 '20 at 14:10

jeeves

1,871
9
25

You can try this as well, serve your ui from a different route or just remove nginx as it already comes with a load balancer – Biswa Soren Oct 30 '20 at 02:59

Why do I keep getting 404 error for Socket.io polling requests?

2 Answers2