CODEWITHSUNDEEP
node.jsreactjssocket.ioamazon-elastic-beanstalk
A13X
A13X

Reputation: 436

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

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/"

Upvotes: 2

Views: 2919

Answers (2)

A13X
A13X

Reputation: 436

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!

Upvotes: 2

jeeves
jeeves

Reputation: 2031

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.

Upvotes: 1

Related Questions