序言

在現(xiàn)代 web 應(yīng)用中，WebSocket 作為一種全雙工通信協(xié)議，為實(shí)時(shí)數(shù)據(jù)傳輸提供了強(qiáng)大的支持。若要確保 WebSocket 在生產(chǎn)環(huán)境中的穩(wěn)定性和性能，使用 Nginx 作為反向代理服務(wù)器是一個(gè)明智的選擇。本篇文章將帶你了解如何在 Nginx 中配置 WebSocket，并驗(yàn)證其是否正常工作。

1. Nginx 中的 WebSocket 配置

1.1 安裝 Nginx

在進(jìn)行配置之前，確保你的系統(tǒng)上已安裝 Nginx。你可以使用以下命令來(lái)安裝：

Ubuntu/Debian:

sudo apt update
sudo apt install nginx

CentOS/RHEL:

sudo yum install nginx

1.2 基本 Nginx 配置

打開(kāi) Nginx 配置文件（通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default）并添加以下內(nèi)容，以支持 WebSocket 連接。

server {
    listen 80;
    server_name yourdomain.com;  # 替換為你的域名
    location /ws {  # WebSocket 路徑
        proxy_pass http://localhost:8080;  # 你的 WebSocket 服務(wù)器地址
        proxy_http_version 1.1;  # 確保使用 HTTP/1.1
        proxy_set_header Upgrade $http_upgrade;  # 必須的配置
        proxy_set_header Connection "Upgrade";  # 必須的配置
        proxy_set_header Host $host;  # 保留主機(jī)頭部
        proxy_set_header X-Real-IP $remote_addr;  # 客戶端真實(shí) IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 轉(zhuǎn)發(fā) IP
        proxy_set_header X-Forwarded-Proto $scheme;  # 轉(zhuǎn)發(fā)協(xié)議
    }
    location / {  # 其他請(qǐng)求
        proxy_pass http://localhost:8080;  # 可以根據(jù)實(shí)際情況修改
    }
}

1.3 重啟 Nginx

配置完成后，需要重啟 Nginx 以應(yīng)用更改：

sudo systemctl restart nginx
或者
nginx - s reload

2. 驗(yàn)證 WebSocket 配置的正確性

確保 WebSocket 正常工作的方式有很多，以下是幾種簡(jiǎn)單有效的方法：

2.1 使用瀏覽器的開(kāi)發(fā)者工具

• 打開(kāi)你的網(wǎng)頁(yè)應(yīng)用并使用瀏覽器的開(kāi)發(fā)者工具（通常按 F12）。
• 切換到 Network 標(biāo)簽。
• 刷新頁(yè)面，并查看 WebSocket 連接。
• 查找以 ws:// 或 wss:// 開(kāi)頭的請(qǐng)求，確認(rèn)其狀態(tài)為 101 Switching Protocols。這表示 WebSocket 連接已成功建立。

2.2 使用 wscat 測(cè)試工具

wscat 是一個(gè)非常實(shí)用的命令行工具，可以幫助你測(cè)試 WebSocket 連接。你可以通過(guò) npm 安裝：

npm install -g wscat

然后使用以下命令連接到 WebSocket 服務(wù)器：

wscat -c ws://yourdomain.com/ws

輸入一些消息并確認(rèn)能正常發(fā)送和接收。如果一切正常，說(shuō)明 WebSocket 配置成功。

2.3 編寫簡(jiǎn)單的客戶端代碼

你可以使用以下 JavaScript 代碼在客戶端驗(yàn)證 WebSocket 是否正常工作：

const ws = new WebSocket('ws://yourdomain.com/ws');
ws.onopen = () => {
    console.log('Connected to the WebSocket server!');
    ws.send('Hello, server!');  // 發(fā)送測(cè)試消息
};
ws.onmessage = (event) => {
    console.log('Received message from server:', event.data);
};
ws.onclose = () => {
    console.log('Disconnected from WebSocket server.');
};
ws.onerror = (error) => {
    console.error('WebSocket error:', error);
};

3. 常見(jiàn)問(wèn)題及解決方法

3.1 WebSocket 連接狀態(tài)為 404 或 403

• 原因：此錯(cuò)誤通常表明 WebSocket 請(qǐng)求的路徑不正確，或者 Nginx 配置中的 location 塊未能正確匹配 WebSocket 請(qǐng)求。
• 解決方法：
  • 確保 WebSocket 的 URL 與 Nginx 配置中的路徑一致。例如，如果在 Nginx 中配置的是 /ws，確保你的 WebSocket 客戶端也使用 ws://yourdomain.com/ws。
  • 示例：如果客戶端使用 ws://yourdomain.com/socket 而服務(wù)器在 /ws 下監(jiān)聽(tīng)，會(huì)導(dǎo)致 404 錯(cuò)誤。

3.2 瀏覽器控制臺(tái)顯示“Connection Refused”

• 原因：這種情況通常表明 WebSocket 服務(wù)器未在指定的地址和端口上運(yùn)行，或者 Nginx 沒(méi)有正確地將請(qǐng)求轉(zhuǎn)發(fā)到 WebSocket 服務(wù)器。
• 解決方法：

確認(rèn) WebSocket 服務(wù)器是否正在運(yùn)行，使用如下命令檢查端口：

netstat -tuln | grep 8080

確保 Nginx 配置中的 proxy_pass 地址與 WebSocket 服務(wù)器的地址匹配。

3.3 收到的消息為空或格式不正確

• 原因：這可能是由于服務(wù)器未能正確解析發(fā)送的消息，或未能以預(yù)期格式發(fā)送消息。
• 解決方法：

檢查服務(wù)器代碼以確保正確接收和處理消息。例如，在 Node.js 的 WebSocket 服務(wù)器中，可以使用以下代碼確保將消息以字符串格式發(fā)送：

ws.on('message', (message) => {
    const response = JSON.stringify({ message: message });
    clients.forEach(client => client.send(response));
});

在客戶端確認(rèn)處理消息的代碼邏輯是否正確，例如：

ws.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log('Received message:', data.message);
};

3.4 連接經(jīng)常斷開(kāi)

• 原因**：可能是由于服務(wù)器的資源（如 CPU、內(nèi)存）不足，或者 Nginx 的超時(shí)設(shè)置過(guò)低。
• 解決方法：

檢查服務(wù)器的資源使用情況，確保能處理所有 WebSocket 連接。

在 Nginx 配置中增加 proxy_read_timeout 和 proxy_send_timeout 的值，例如：

location /ws {
    proxy_read_timeout 86400;  # 24 小時(shí)
    proxy_send_timeout 86400;
    ...
}

監(jiān)控 WebSocket 連接的狀態(tài)，以發(fā)現(xiàn)是否有客戶端異常斷開(kāi)。

3.5 使用 SSL（wss://）時(shí)出現(xiàn)證書(shū)錯(cuò)誤

• 原因：SSL 證書(shū)未正確配置，或者證書(shū)與請(qǐng)求的域名不匹配。
• 解決方法：

確保在 Nginx 配置中正確加載了 SSL 證書(shū)和私鑰：

server {
    listen 443 ssl;
    server_name yourdomain.com;
    ssl_certificate /path/to/fullchain.pem;
    ssl_certificate_key /path/to/privkey.pem;
    ...
}

使用 Let’s Encrypt 獲取有效的 SSL 證書(shū)并確保證書(shū)與訪問(wèn)的域名一致?？梢允褂?certbot 工具自動(dòng)化這一過(guò)程。

3.6 在負(fù)載均衡環(huán)境中，WebSocket 連接斷開(kāi)

• 原因：如果 Nginx 配置了負(fù)載均衡而沒(méi)有保持會(huì)話（Sticky Sessions），可能導(dǎo)致 WebSocket 連接在請(qǐng)求轉(zhuǎn)發(fā)時(shí)斷開(kāi)。
• 解決方法：

在 Nginx 配置中使用 ip_hash 來(lái)確保同一客戶端總是連接到同一后端服務(wù)器：

upstream websocket {
    ip_hash;
    server backend1:8080;
    server backend2:8080;
}
server {
    location /ws {
        proxy_pass http://websocket;
        ...
    }
}

到此這篇關(guān)于WebSocket 配置與Nginx 的完美結(jié)合(過(guò)程詳解)的文章就介紹到這了,更多相關(guān)WebSocket 配置與Nginx內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！