无法上反向代理 nginx socket.io答案

【问题标题】：Cannot get on reverse proxy nginx socket.io无法上反向代理 nginx socket.io
【发布时间】：2021-12-01 14:13:05
【问题描述】：

我知道有一个与我要问的问题 here 类似的问题，但提出的解决方案不适用于这种情况。

我收到404 GET http://localhost/socket.io/socket.io.js

在 socket.io 文档中也推荐了来自不同帖子的几个答案：https://socket.io/docs/v4/reverse-proxy/#nginx 但仍然无法正常工作

这是我的代码： 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);
});

我的 nginx 配置

    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;
}

我的 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>

【问题讨论】：

嗨！您会在proxy_pass 路径的末尾尝试使用/，看看它是否有所不同？另外，我建议您将它们作为location 定义的第一行。请告诉我们:)
嗨@Philippe 我这样添加：proxy_pass localhost:5000;和 proxy_pass localhost:5000/socket.io"; 但不起作用
您推荐的位置顺序是什么？ /socket, / 图片最后

标签： node.js sockets nginx

【解决方案1】：

我认为我们必须通过nginx配置文件一步一步操作:)

#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;
}

如果说明不够清楚，请告诉我。

【讨论】：

就localhost:5000/socket.io;失败，nginx：[emerg] 未知指令“localhost:5000/socket.io”在 /etc/nginx/sites-enabled/default:86 nginx：配置文件 /etc/nginx/nginx.conf 测试失败
哦，对不起，我忘了proxy_pass之前 :(我已经更新了我的帖子。我去睡觉了，我们明天继续^^
嗨@Diego！如果测试仍然有用，这个系列是否有用？我希望不是 ;) 请告诉我们。