Cannot get on reverse proxy nginx socket.io

Question

I know there's a similar question to the one I'm asking here, but solutions proposed aren't working with this scenario.

I'm getting 404 GET http://localhost/socket.io/socket.io.js

Have follow several answers from different posts also recommendation in socket.io doc: https://socket.io/docs/v4/reverse-proxy/#nginx but still not working

This is my code: app.js

var express = require("express");
var app = express();
var http = require("http").Server(app);
var io = require("socket.io")(http);

// set static folder
app.use(express.static(__dirname + "/public"));

// homepage
app.get("/", (req, res) => {
    res.sendFile(__dirname + "/index.html");
});

// socket connection
io.on('connection', (socket) => {
    console.log("A user connected!");

    // executes when a user starts typing
    socket.on('userTyping', (username) => {
        socket.broadcast.emit('userTyping', username);
    });

    // executes when a user sends a message
    socket.on('msg', (msg) => {
        console.log("message: ", msg);
        socket.broadcast.emit('msg', msg);
    });

    // executes when a new user joins the chat room
    socket.on('join', (username) => {
        socket.broadcast.emit('join', username);
    });
});

const PORT = process.env.PORT || 5000;

// port to listen
http.listen(PORT, function(){
  console.log('listening on port: ', PORT);
});

My nginx conf

    location ~^/(assets/|images/|img/|javascript/|js/|css/|style/|flash/|media/|static/|robots.txt|humans.txt|favicon.ico){
    root /home/parallels/Chat-App-using-Socket.io/public;
    access_log on;
    error_log on;
    expires 5m;
}


location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
 proxy_set_header X-forwarded-For    $proxy_add_x_forwarded_for;
         proxy_set_header Host $host;
 proxy_pass http://localhost:5000;

         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection 'upgrade';
        try_files $uri $uri/ =404;
}

location /socket.io/ {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
         proxy_set_header X-forwarded-For    $proxy_add_x_forwarded_for;
         proxy_set_header Host $host;
         proxy_pass http://localhost:5000/socket.io;

         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection 'upgrade';
        try_files $uri $uri/ =404;
}

My index.html

<!DOCTYPE html>
<html>
<head>
    <title>Friends Talk</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
    <div>
        <div class="modal fade" id="usernameModal" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-body row">
                <form id="usernameForm">
                    <div class="col-xs-12 col-sm-9">
                        <input class="form-control" type="text" name="something" id="username" placeholder="Enter a Username">    
                    </div>
                    <div class="col-xs-12 col-sm-3">
                        <button type="submit" id="modalControl" type="button" class="btn btn-primary">Start Chatting!</button>
                    </div>
                </form>
              </div>
                <p class="error-msg"></p>    
             
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <h1 class="center">Friends Talk</h1><br><br>
        <div id="chatBox">
            
            
        </div><br><br>
        <form id="messageForm">
                <span id="userTyping"></span>
                <input id="message" type="text" name="message">
        </form>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.js"></script>
    <script type="text/javascript" src="/js/script.js"></script>
</body>
</html>

Hi ! Would you try with / at the end of your proxy_pass paths and see if it makes a difference ? Plus, I'd suggest you to put them as the first line of your location definitions. Please let us know :) — Philippe
– Philippe, Commented Oct 13, 2021 at 6:02
Hi @Philippe I added like this: proxy_pass localhost:5000; and proxy_pass localhost:5000/socket.io"; but doesn't works — Diego
– Diego, Commented Oct 13, 2021 at 11:56
Which is the order you recommend for location? /socket, / and images last — Diego
– Diego, Commented Oct 13, 2021 at 11:57

Philippe · Accepted Answer · 2021-10-13 23:56:56Z

0

I think we must operate step by step with nginx config file :)

#1# Please try without this entire block;
#    location ~^/(assets/|images/|img/|javascript/|js/|css/|style/|flash/|media/|static/|robots.txt|humans.txt|favicon.ico){
#    root /home/parallels/Chat-App-using-Socket.io/public;
#    access_log on;
#    error_log on;
#    expires 5m;
#}

#2# Please try without this entire block;
# location / {
#  proxy_pass http://localhost:5000/;
#  proxy_http_version 1.1;
#  proxy_set_header Upgrade $http_upgrade;
#  proxy_set_header Connection 'upgrade';
#  proxy_set_header Host $host;  
#  proxy_set_header X-forwarded-For $proxy_add_x_forwarded_for;
#
#  # please try without this line // try_files $uri $uri/ =404;
#}

#3# In my opinion, it should do almost all the job, please have a try
location /socket.io/ {
  proxy_pass http://localhost:5000/socket.io/;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';
  proxy_set_header Host $host;  
  proxy_set_header X-forwarded-For $proxy_add_x_forwarded_for;

  # please try without this line // try_files $uri $uri/ =404;
}

Please let me know if the instruction are not as clear as they should be.

edited Oct 13, 2021 at 23:56

answered Oct 13, 2021 at 17:22

Philippe

1,30713 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Diego Over a year ago

Just localhost:5000/socket.io; fails, nginx: [emerg] unknown directive "localhost:5000/socket.io" in /etc/nginx/sites-enabled/default:86 nginx: configuration file /etc/nginx/nginx.conf test failed

Philippe Over a year ago

Oh sorry, I forgot proxy_pass just before :( I've updated my post. I go to sleep, let's continue tomorrow ^^

Philippe Over a year ago

Hi @Diego ! Is this serie if tests still useful ? I hop it is not ;) Please let us know.

Sujith S Manjavana Over a year ago

Hi @Philippe could you please take a look at my question stackoverflow.com/questions/72214133/…

Collectives™ on Stack Overflow

Cannot get on reverse proxy nginx socket.io

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related