Nginx配置WebSocket代理支持的完整指南

WebSocket協議與Nginx代理的關係

WebSocket是一種基於TCP的雙向通信協議，支持持久連接，廣泛應用於實時通信、在線聊天、直播推送等場景。通常情況下，前端與後端之間需要通過代理服務器中轉數據流，而Nginx作為高性能的反向代理服務器，可以很好地完成WebSocket的請求轉發任務。

安裝並準備Nginx環境

在開始配置之前，需要確保系統中已安裝Nginx。如果尚未安裝，可以根據使用的操作系統，通過包管理器或源碼方式進行安裝。

Nginx配置支持WebSocket

打開Nginx的主配置文件，通常位於/etc/nginx/nginx.conf ，在http塊中加入以下內容：

 map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

upstream backend {
    server 127.0.0.1:8080;
}

map指令用於處理Upgrade頭的信息，使其適配WebSocket的連接要求； upstream配置定義了後端應用服務器的地址。

接下來，在server塊中添加處理WebSocket請求的配置：

 location /websocket {
    proxy_pass http://backend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
}

該配置塊的作用是將來自/websocket路徑的請求轉發給後端服務，同時確保HTTP請求頭中保留必要的WebSocket字段。

重啟Nginx使配置生效

修改配置完成後，需要重新加載或重啟Nginx服務。執行以下命令即可：

 <span class="fun">sudo service nginx restart</span>

確保沒有語法錯誤或端口占用，配置才能成功生效。

前端示例測試WebSocket連接

完成服務器端配置後，可以通過一個簡單的前端示例來測試WebSocket連接是否成功建立。以下是JavaScript代碼示例：

 var ws = new WebSocket("ws://your_domain/websocket");

ws.onopen = function() {
    console.log("Connected to WebSocket");
};

ws.onmessage = function(event) {
    console.log("Received message: " + event.data);
};

ws.onclose = function() {
    console.log("Disconnected from WebSocket");
};

將上述代碼嵌入到HTML文件中，在瀏覽器中打開頁面後，如果控制台輸出“Connected to WebSocket”，則說明連接成功。

總結

通過本文的配置步驟，可以讓Nginx代理服務器支持WebSocket協議，從而實現高效的雙向通信能力。這種架構特別適用於需要實時交互的場景，如在線遊戲、實時數據儀錶盤、聊天系統等。需要注意的是，Nginx只作為中間代理存在，真正的WebSocket服務仍由後端應用處理。