快捷導(dǎo)航

Nginx中配置WebSocket代理的詳細(xì)步驟

更新時(shí)間：2025年02月10日 09:54:45 作者：用心去追夢(mèng)

Nginx 可以配置為 WebSocket 代理,將 WebSocket 連接從客戶端轉(zhuǎn)發(fā)到后端服務(wù)器,以下是如何在 Nginx 中配置 WebSocket 代理的詳細(xì)步驟和示例配置,需要的朋友可以參考下

1. 安裝 Nginx

確保你已經(jīng)安裝了 Nginx。如果沒(méi)有安裝，可以使用以下命令進(jìn)行安裝：

sudo apt-get update
sudo apt-get install nginx

2. 配置 WebSocket 代理

編輯 Nginx 配置文件，通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default。以下是一個(gè)示例配置，展示了如何配置 WebSocket 代理。

示例配置：

http {
    # 定義 upstream 塊，指定后端 WebSocket 服務(wù)器
    upstream websocket_backend {
        server backend1.example.com:8080;
        server backend2.example.com:8080;
    }

    server {
        listen 80;
        server_name example.com;

        # 配置 WebSocket 代理
        location /ws {
            proxy_pass http://websocket_backend;
            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-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            # 可選：設(shè)置超時(shí)時(shí)間
            proxy_read_timeout 86400s;
        }

        # 配置靜態(tài)文件或其他路徑
        location / {
            root /var/www/html;
            index index.html index.htm;
        }
    }
}

3. 參數(shù)解釋

proxy_pass：指定后端 WebSocket 服務(wù)器的地址。
proxy_http_version 1.1：設(shè)置 HTTP 版本為 1.1，WebSocket 協(xié)議需要 HTTP/1.1。
proxy_set_header Upgrade $http_upgrade：傳遞客戶端的 Upgrade 頭部。
proxy_set_header Connection "upgrade"：傳遞客戶端的 Connection 頭部，指示這是一個(gè) WebSocket 升級(jí)請(qǐng)求。
proxy_set_header Host $host：傳遞客戶端的 Host 頭部。
proxy_set_header X-Real-IP $remote_addr：傳遞客戶端的真實(shí) IP 地址。
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for：傳遞客戶端的 X-Forwarded-For 頭部。
proxy_set_header X-Forwarded-Proto $scheme：傳遞客戶端的協(xié)議（HTTP 或 HTTPS）。
proxy_read_timeout 86400s：設(shè)置讀取超時(shí)時(shí)間，WebSocket 連接通常是長(zhǎng)連接，因此需要設(shè)置較長(zhǎng)的超時(shí)時(shí)間。

4. 測(cè)試配置

在重新加載 Nginx 之前，先測(cè)試配置文件是否有語(yǔ)法錯(cuò)誤。

sudo nginx -t

6. 驗(yàn)證配置

確保 WebSocket 連接可以正常建立和通信?？梢栽谇岸耸褂?WebSocket 客戶端進(jìn)行測(cè)試。

示例前端代碼：

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Test</title>
</head>
<body>
    <script>
        var socket = new WebSocket('ws://example.com/ws');

        socket.onopen = function() {
            console.log('WebSocket connection opened');
            socket.send('Hello, WebSocket!');
        };

        socket.onmessage = function(event) {
            console.log('Message from server:', event.data);
        };

        socket.onclose = function() {
            console.log('WebSocket connection closed');
        };

        socket.onerror = function(error) {
            console.error('WebSocket error:', error);
        };
    </script>
</body>
</html>