failed: Error during WebSocket handshake: Unexpected response code: 404

使用Nginx做WebSockets代理教程

這篇文章主要介紹了使用Nginx做WebSockets代理教程,本文給出了代理配置,和一個完整的node.js實現的WebSockets實例,需要的朋友可以參考下

WebSocket 協議提供了一種創建支持客戶端和服務端實時雙向通信Web應用程序的方法。作為HTML5規范的一部分，WebSockets簡化了開發Web實時通信程序的難度。目前主流的瀏覽器都支持WebSockets，包括火狐、IE、Chrome、Safari以及Opera等，而且，越來越多的服務器應用框架也開始支持WebSockets。

要在企業產品中使用WebSockets，為滿足高性能和高可用性，需要多個WebSocket服務器。負載均衡層需要支持WebSocket協議。Nginx從1.3版起就開始支持WebSocket協議，而且可以擔當WebSocket應用程序的反向代理以及實現負載均衡。

WebSocket協議和HTTP協議不同，但是WebSocket協議的握手和HTTP是兼容的，它使用HTTP的Upgrade協議頭將連接從HTTP連接升級到WebSocket連接。這個特性使得WebSocket應用程序可以很容易地應用到現有的基礎設施。例如，WebSocket應用可以使用標准的80和443 HTTP端口，因此可以通過現有的防火牆設施。

WebSockets應用程序會在客戶端和服務器之間建立一個長連接，使得開發實時應用很容易。HTTP的Upgrade協議頭機制用於將連接從HTTP連接升級到WebSocket連接，Upgrade機制使用了Upgrade協議頭和Connection協議頭。反向代理服務器在支持WebSocket協議方面面臨着一些挑戰。挑戰之一是WebSocket是一個逐段轉發（hop-by-hop）協議，因此當代理服務器攔截到來自客戶端的Upgrade請求時，代理服務器需要將自己的Upgrade請求發送給后端服務器，包括適合的請求頭。而且，由於WebSocket連接是長連接，與傳統的HTTP端連接截然不同，故反向代理服務器還需要允許這些連接處於打開（Open）狀態，而不能因為其空閑就關閉了連接。

Nginx通過在客戶端和后端服務器之間建立隧道來支持WebSockets通信。為了讓Nginx可以將來自客戶端的Upgrade請求發送到后端服務器，Upgrade和Connection的頭信息必須被顯式的設置。如下所示：

復制代碼代碼如下:

location /wsapp/ {
    proxy_pass http://wsbackend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

一旦我們完成以上設置，Nginx就可以處理WebSocket連接了。

 

Nginx WebSockets 實例

下面的例子講述了Nginx是如何為WebSocket做代理的。此例將使用ws模塊，它是基於node.js構建的WebSocket實現。Nginx將擔當反向代理服務器，后端服務器是一個使用了ws和Node.js的簡單WebSockets應用。例子使用的命令在Ubuntu 13.10和CentOS 6.5上測試通過，但對於其他操作系統或許需要稍作修改。就這個例子來說，WebSocket服務器的IP地址是192.168.100.10，Nginx服務器的IP地址是192.168.100.20。如果你還沒有安裝node.js和npm，你可以通過以下命令安裝：

對 Debian/Ubuntu 來說：

復制代碼代碼如下:

sudo apt-get install nodejs npm

對 RHEL/CentOS 來說：

復制代碼代碼如下:

sudo yum install nodejs npm

在Ubuntu上，node.js會被安裝為"nodejs"，但在CentOS中被會安裝為"node"。我們在例子中統一使用"node"，所以，我們會在Ubuntu上創建一個符號連接來允許我們使用“node”：

復制代碼代碼如下:

ln -s /usr/bin/nodejs /usr/local/bin/node

然后安裝 ws:

復制代碼代碼如下:

sudo npm install ws

注意：如果你得到了一個錯誤：“Error: failed to fetch from registry: ws” ，那么運行下面的命令應該能解決這個問題：

復制代碼代碼如下:

sudo npm config set registry http://registry.npmjs.org/

接下來，你可以再次運行 sudo npm install ws

 

ws模塊來自/root/node_modules/ws/bin/wscat，我們會為客戶端使用它，但是我們需要創建一個程序來作為我們的服務器。將下面的代碼保存到一個server.js文件中：

復制代碼代碼如下:

console.log("Server started");
var Msg = '';
var WebSocketServer = require('ws').Server
    , wss = new WebSocketServer({port: 8010});
    wss.on('connection', function(ws) {
        ws.on('message', function(message) {
        console.log('Received from client: %s', message);
        ws.send('Server received from client: ' + message);
    });
 });

這個程序可以通過下面的命令執行：

復制代碼代碼如下:

node server.js

該程序會輸出一條初始化消息“Server started”，之后監聽8010端口，等待客戶端的連接。它會處理收到的所有請求，並且將接收到的消息輸出在控制台，之后向客戶端返回一條包含該消息的消息。我們希望Nginx去代理客戶端的請求，可以通過下面的配置實現：

復制代碼代碼如下:
 

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}
upstream websocket {
    server 192.168.100.10:8010;
}
server {
    listen 8020;
    location / {
        proxy_pass http://websocket;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
}

上面的配置會使Nginx監聽8020端口，並把任何接收到的請求轉發給后端的WebSocket服務器，讓后端服務器更好地處理WebSocket協議。我們可以使用wscat作為客戶端來測試一下：

復制代碼代碼如下:

/root/node_modules/ws/bin/wscat –connect ws://192.168.100.20:8020

上面的命令會通過Nginx反向代理服務器和后端WebSocket服務器建立連接，你可以向服務器發送任意消息，然后服務器會返回一條消息。每當你在客戶端發送一條消息，在后端服務器上能看到該消息的輸出，之后在客戶端會顯示一條來自服務端的消息。
這是一個交互示例：

 

 

Server:	Client:
$ node server.js
Server started
	wscat –connect ws://192.168.100.20:8020
	Connected (press CTRL+C to quit)
	> Hello
Received from client: Hello
	< Server received from client: Hello

 

由此我們可以看到客戶端與服務器能通過Nginx反向代理建立WebSockets通信，而且消息可以持續地進行雙向傳輸，直至客戶端或服務器斷開連接。為了讓Nginx能正確處理WebSocket連接，只需正確地設置消息頭來處理從HTTP連接升級到WebSocket連接的Upgrade請求。