Socket.io無法通過Cloudflare / Nginx斷開連接

Question

我有一個隨Express.js一起提供的小型Web應用程序，並通過Socket.io連接到后端。 為了公開，我使用Nginx作為反向代理，然后在最前面使用Cloudflare。 該應用程序在關閉或重新加載時依賴於disconnect事件觸發，以跟蹤在線用戶等。 通過Nginx和Cloudflare時，斷開事件永遠不會在后端觸發。 在本地開發時會這樣做。

這是我的Nginx配置文件：

server {
    listen 80;
    server_name colab.gq;
    server_name www.colab.gq;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header X-Forwarded-For $remote_addr;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/colab.gq/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/colab.gq/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

這是我的服務器端代碼的一個片段：

io.on('connection', (socket) => {
  // Stuff here

  socket.on('disconnect', () => {
    console.log('disconnected!')
    // Stuff that relies on the disconnect event
  })
})

當用戶關閉選項卡或重新加載頁面時，斷開事件應觸發，但在通過Nginx和Cloudflare傳遞連接時則不會觸發。 在此先感謝您的幫助！

更新：重新加載/關閉斷開事件似乎在幾秒鍾后終於注冊了。

Answer 1

您必須像這樣在nginx配置中將升級標頭添加到您的套接字io路徑，

    location ~* \.io {
      .. your configuration

      proxy_pass http://localhost:3000;
      proxy_redirect off;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }

---

因為您要求擴展答案，所以您可能已經知道的第一件事就是socket.io是一個在后台使用Websockets協議的協議（因此兩者是相同的）。 作為標准，Websockets協議和HTTP協議都在同一端口80或443上偵聽。默認協議是HTTP，如果用戶要使用Websockets協議，則他/她必須將升級請求從HTTP發送到WS協議，並且存在一些密鑰身份驗證和步驟。

這就是為什么需要將它們放入nginx配置中的原因。

如果您需要有關協議升級機制的更多信息，請參考此內容 。

即使在我看來，這並不是該問題的完全重復，但我仍然認為@Paulo有義務提供完美的答案，即使它沒有被接受。

Answer 2

可能正在發生的是兩件事。

1st：Socket.io超時時間很長（因此需要幾秒鍾），並且在聲明已斷開連接之前希望重新連接。 檢查是否存在reconnect_attempt或reconnecting事件（請注意我已經有一段時間沒有使用過socket.io了，所以在時間上我可能是錯誤的）

第二：您沒有告訴socket.io在關閉瀏覽器窗口時斷開連接。

我建議向您的JavaScript添加一個事件偵聽器，該事件偵聽器將告訴您的服務器它在關閉窗口時已斷開連接。

    window.addEventListener('beforeunload', () => {
       socket.disconnect();
    }