最近使用 node.js 搭建 WebSocket 服務(wù)，在本地測(cè)試 connection 都是正常，于是部署到 Linux 服務(wù)上，需要用 Nginx 來(lái)反向代理 WebSocket 服務(wù)。瀏覽器控制臺(tái)報(bào)錯(cuò)：WebSocket connection to 'wss://tiven.cn/ws/xxx' failed:，經(jīng)過(guò)一番折騰，終于解決了這個(gè)報(bào)錯(cuò)。
介紹
WebSocket 協(xié)議與 HTTP 協(xié)議不同，但 WebSocket 握手與 HTTP 兼容，使用 HTTP 升級(jí)工具將連接從 HTTP 升級(jí)到 WebSocket。這允許 WebSocket 應(yīng)用程序更容易地適應(yīng)現(xiàn)有的基礎(chǔ)架構(gòu)。例如，WebSocket 應(yīng)用程序可以使用標(biāo)準(zhǔn) HTTP 端口80和443，從而允許使用現(xiàn)有的防火墻規(guī)則。
WebSocket 應(yīng)用程序可以在客戶端和服務(wù)器之間保持長(zhǎng)時(shí)間運(yùn)行的連接，從而有助于開(kāi)發(fā)實(shí)時(shí)應(yīng)用程序。 Nginx 反向代理用于將連接從 HTTP 升級(jí)到 WebSocket 的 HTTP 升級(jí)機(jī)制使用 Upgrade 和 Connection 頭 。反向代理服務(wù)器在支持 WebSocket 時(shí)面臨一些挑戰(zhàn)。一個(gè)是 WebSocket 是一個(gè)逐跳協(xié)議，因此當(dāng)代理服務(wù)器攔截客戶端的升級(jí)請(qǐng)求時(shí)，需要向后端服務(wù)器發(fā)送自己的升級(jí)請(qǐng)求，包括相應(yīng)的頭文件。此外，由于 WebSocket 連接長(zhǎng)期存在，與 HTTP 使用的典型短期連接相反，反向代理需要允許這些連接保持打開(kāi)狀態(tài)，而不是關(guān)閉它們，因?yàn)樗鼈兯坪跆幱诳臻e狀態(tài)。
允許在客戶機(jī)和后端服務(wù)器之間建立隧道，Nginx 支持 WebSocket。對(duì)于 Nginx 將升級(jí)請(qǐng)求從客戶端發(fā)送到后臺(tái)服務(wù)器，必須明確設(shè)置 Upgrade 和 Connection 標(biāo)題。
總的來(lái)說(shuō)，就是使用 Nginx 反向代理 WebSocket 服務(wù)時(shí)需要設(shè)置 Upgrade 和 Connection 的 header。
nginx 配置
- 出現(xiàn)報(bào)錯(cuò)時(shí)的配置
location /ws {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://127.0.0.1:9000/ws;
}
- 反向代理成功的配置
location /ws {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://127.0.0.1:9000/ws;
# 關(guān)鍵配置 start
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# 關(guān)鍵配置 end
}
完美解決報(bào)錯(cuò)問(wèn)題（WebSocket connection to "xxx/xxx" failed）。
Nginx 相關(guān)推薦
- Nginx學(xué)習(xí)與實(shí)戰(zhàn) · 配置HTTP2
- Nginx學(xué)習(xí)與實(shí)戰(zhàn) · 解決SPA單頁(yè)面應(yīng)用CDN緩存問(wèn)題
- Nginx學(xué)習(xí)與實(shí)戰(zhàn) · 解決net::ERR_CONTENT_LENGTH_MISMATCH 206問(wèn)題
- Nginx warn：conflicting server name '127.0.0.1' on 0.0.0.0:8010, ignored
- Nginx反向代理WebSocket服務(wù)連接報(bào)錯(cuò)：WebSocket connection to 'wss://xxx/xxx' failed
歡迎訪問(wèn)：天問(wèn)博客
