WebSocket 프로토콜은 클라이언트와 서버 간의 실시간 양방향 통신을 지원하는 웹 애플리케이션을 만드는 방법을 제공합니다. HTML5의 일부인 WebSocket은 이전에 사용 가능했던 방법보다 이러한 유형의 애플리케이션을 개발하는 것을 훨씬 더 쉽게 만듭니다. Chrome, Firefox, Internet Explorer, Opera, Safari를 포함한 대부분의 최신 브라우저는 WebSocket을 지원하며, 점점 더 많은 서버 애플리케이션 프레임워크도 이제 WebSocket을 지원하고 있습니다.
성능과 고가용성을 위해 여러 개의 WebSocket 서버가 필요한 엔터프라이즈 프로덕션 용도의 경우 WebSocket 프로토콜을 이해하는 로드 밸런싱 계층이 필요하며, NGINX는 버전 1.3부터 WebSocket을 지원했으며 역방향 프록시 역할을 하고 WebSocket 애플리케이션의 로드 밸런싱을 수행할 수 있습니다 . (모든 NGINX Plus 릴리스도 WebSocket을 지원합니다.)
WebSocket 연결의 부하를 분산하기 위한 NGINX의 확장성에 대한 최근 성능 테스트를 확인해 보세요 .
WebSocket 프로토콜은 HTTP 프로토콜과 다르지만 WebSocket 핸드셰이크는 HTTP와 호환되며 HTTP 업그레이드 기능을 사용하여 HTTP에서 WebSocket으로 연결을 업그레이드합니다. 이를 통해 WebSocket 애플리케이션은 기존 인프라에 더 쉽게 맞출 수 있습니다.
예를 들어 WebSocket 애플리케이션은 표준 HTTP 포트 80 및 443을 사용하여 기존 방화벽 규칙을 사용할 수 있습니다.
WebSocket 애플리케이션은 클라이언트와 서버 간에 장기 실행 연결을 열어두어 실시간 애플리케이션 개발을 용이하게 합니다. HTTP에서 WebSocket으로 연결을 업그레이드하는 데 사용되는 HTTP 업그레이드 메커니즘은 Upgrade및 Connection헤더를 사용합니다. 역방향 프록시 서버는 WebSocket을 지원하는 데 몇 가지 과제에 직면합니다. 그 중 하나는 WebSocket이 홉 바이 홉 프로토콜이므로 프록시 서버가 클라이언트의 업그레이드 요청을 가로채면 적절한 헤더를 포함하여 백엔드 서버로 자체 업그레이드 요청을 보내야 한다는 것입니다. 또한 WebSocket 연결은 HTTP에서 사용하는 일반적인 단기간 연결과 달리 장기적으로 지속되므로 역방향 프록시는 연결이 유휴 상태인 것처럼 보이기 때문에 연결을 닫는 대신 연결을 열어두어야 합니다.
NGINX는 클라이언트와 백엔드 서버 사이에 터널을 설정할 수 있도록 하여 WebSocket을 지원합니다. NGINX가 클라이언트에서 백엔드 서버로 업그레이드 요청을 보내려면 이 예와 같이 Upgrade및 헤더를 명시적으로 설정해야 합니다.Connection
location /wsapp/ { proxy_pass http://wsbackend; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "Upgrade"; proxy_set_header Host $host;
}
이 작업이 완료되면 NGINX는 이를 WebSocket 연결로 처리합니다.
NGINX 웹소켓 예제
다음은 NGINX가 WebSocket 프록시로 작동하는 것을 보여주는 라이브 예제입니다. 이 예제에서는 Node.js 에 기반한 WebSocket 구현인 ws를 사용합니다. NGINX는 ws 와 Node.js를 활용하는 간단한 WebSocket 애플리케이션의 역방향 프록시 역할을 합니다. 이러한 지침은 Ubuntu 13.10 및 CentOS 6.5에서 테스트되었지만 다른 OS 및 버전에 맞게 조정해야 할 수도 있습니다. 이 예제에서 WebSocket 서버의 IP 주소는 192.168.100.10이고 NGINX 서버의 IP 주소는 192.168.100.20입니다.
아직 Node.js와 npm이 설치되지 않았다면 다음 명령을 실행하세요.
nodejsNode.js는 Ubuntu와 nodeCentOS에서 와 같이 설치됩니다 . 이 예에서는 를 사용하므로 Ubuntu에서 에서 로 node심볼릭 링크를 만들어야 합니다 .nodejsnode
$ ln -s /usr/bin/nodejs /usr/local/bin/node
ws 를 설치하려면 다음 명령을 실행하세요.
$ sudo npm install ws
참고: "오류: 레지스트리에서 가져오지 못했습니다: 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블록을 추가합니다 .ConnectioncloseUpgrade''
http { 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 $connection_upgrade; proxy_set_header Host $host; } }
}
NGINX는 포트 8020에서 수신하고 백엔드 WebSocket 서버로 요청을 프록시합니다. proxy_set_header지시어를 통해 NGINX는 WebSocket 프로토콜을 적절히 처리할 수 있습니다.
서버를 테스트하기 위해 클라이언트로 wscat을 실행합니다.
$ /root/node_modules/ws/bin/wscat --connect ws://192.168.100.20:8020
wscat은 NGINX 프록시를 통해 WebSocket 서버에 연결합니다. wscat이 서버로 보낼 메시지를 입력하면 서버에서 에코가 표시되고, 그런 다음 서버에서 온 메시지가 클라이언트에 나타납니다. 다음은 샘플 상호작용입니다.
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를 통해 통신할 수 있으며, 클라이언트나 서버가 연결을 끊을 때까지 메시지를 계속 주고받을 수 있습니다. NGINX가 WebSocket을 제대로 처리하도록 하는 데 필요한 것은 HTTP에서 WebSocket으로 연결을 업그레이드하는 업그레이드 요청을 처리하도록 헤더를 올바르게 설정하는 것입니다.
위 내용과 같이 NGINX Plus를 활용하여 Demo 가 필요하시면 하단의 전문가에게 상담받기 버튼을 클릭해주세요
전문가에게 상담받기
WebSocket 프로토콜은 클라이언트와 서버 간의 실시간 양방향 통신을 지원하는 웹 애플리케이션을 만드는 방법을 제공합니다. HTML5의 일부인 WebSocket은 이전에 사용 가능했던 방법보다 이러한 유형의 애플리케이션을 개발하는 것을 훨씬 더 쉽게 만듭니다. Chrome, Firefox, Internet Explorer, Opera, Safari를 포함한 대부분의 최신 브라우저는 WebSocket을 지원하며, 점점 더 많은 서버 애플리케이션 프레임워크도 이제 WebSocket을 지원하고 있습니다.
성능과 고가용성을 위해 여러 개의 WebSocket 서버가 필요한 엔터프라이즈 프로덕션 용도의 경우 WebSocket 프로토콜을 이해하는 로드 밸런싱 계층이 필요하며, NGINX는 버전 1.3부터 WebSocket을 지원했으며 역방향 프록시 역할을 하고 WebSocket 애플리케이션의 로드 밸런싱을 수행할 수 있습니다 . (모든 NGINX Plus 릴리스도 WebSocket을 지원합니다.)
WebSocket 연결의 부하를 분산하기 위한 NGINX의 확장성에 대한 최근 성능 테스트를 확인해 보세요 .
WebSocket 프로토콜은 HTTP 프로토콜과 다르지만 WebSocket 핸드셰이크는 HTTP와 호환되며 HTTP 업그레이드 기능을 사용하여 HTTP에서 WebSocket으로 연결을 업그레이드합니다. 이를 통해 WebSocket 애플리케이션은 기존 인프라에 더 쉽게 맞출 수 있습니다.
예를 들어 WebSocket 애플리케이션은 표준 HTTP 포트 80 및 443을 사용하여 기존 방화벽 규칙을 사용할 수 있습니다.
WebSocket 애플리케이션은 클라이언트와 서버 간에 장기 실행 연결을 열어두어 실시간 애플리케이션 개발을 용이하게 합니다. HTTP에서 WebSocket으로 연결을 업그레이드하는 데 사용되는 HTTP 업그레이드 메커니즘은 Upgrade및 Connection헤더를 사용합니다. 역방향 프록시 서버는 WebSocket을 지원하는 데 몇 가지 과제에 직면합니다. 그 중 하나는 WebSocket이 홉 바이 홉 프로토콜이므로 프록시 서버가 클라이언트의 업그레이드 요청을 가로채면 적절한 헤더를 포함하여 백엔드 서버로 자체 업그레이드 요청을 보내야 한다는 것입니다. 또한 WebSocket 연결은 HTTP에서 사용하는 일반적인 단기간 연결과 달리 장기적으로 지속되므로 역방향 프록시는 연결이 유휴 상태인 것처럼 보이기 때문에 연결을 닫는 대신 연결을 열어두어야 합니다.
NGINX는 클라이언트와 백엔드 서버 사이에 터널을 설정할 수 있도록 하여 WebSocket을 지원합니다. NGINX가 클라이언트에서 백엔드 서버로 업그레이드 요청을 보내려면 이 예와 같이 Upgrade및 헤더를 명시적으로 설정해야 합니다.Connection
이 작업이 완료되면 NGINX는 이를 WebSocket 연결로 처리합니다.
NGINX 웹소켓 예제
다음은 NGINX가 WebSocket 프록시로 작동하는 것을 보여주는 라이브 예제입니다. 이 예제에서는 Node.js 에 기반한 WebSocket 구현인 ws를 사용합니다. NGINX는 ws 와 Node.js를 활용하는 간단한 WebSocket 애플리케이션의 역방향 프록시 역할을 합니다. 이러한 지침은 Ubuntu 13.10 및 CentOS 6.5에서 테스트되었지만 다른 OS 및 버전에 맞게 조정해야 할 수도 있습니다. 이 예제에서 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
nodejsNode.js는 Ubuntu와 nodeCentOS에서 와 같이 설치됩니다 . 이 예에서는 를 사용하므로 Ubuntu에서 에서 로 node심볼릭 링크를 만들어야 합니다 .nodejsnode
$ ln -s /usr/bin/nodejs /usr/local/bin/node
ws 를 설치하려면 다음 명령을 실행하세요.
$ sudo npm install ws
참고: "오류: 레지스트리에서 가져오지 못했습니다: 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블록을 추가합니다 .ConnectioncloseUpgrade''
http { 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 $connection_upgrade; proxy_set_header Host $host; } }
}
NGINX는 포트 8020에서 수신하고 백엔드 WebSocket 서버로 요청을 프록시합니다. proxy_set_header지시어를 통해 NGINX는 WebSocket 프로토콜을 적절히 처리할 수 있습니다.
서버를 테스트하기 위해 클라이언트로 wscat을 실행합니다.
$ /root/node_modules/ws/bin/wscat --connect ws://192.168.100.20:8020
wscat은 NGINX 프록시를 통해 WebSocket 서버에 연결합니다. wscat이 서버로 보낼 메시지를 입력하면 서버에서 에코가 표시되고, 그런 다음 서버에서 온 메시지가 클라이언트에 나타납니다. 다음은 샘플 상호작용입니다.
Server:Client:Server started
Connected (press CTRL+C to quit)
> Hello
여기서 클라이언트와 서버는 프록시 역할을 하는 NGINX를 통해 통신할 수 있으며, 클라이언트나 서버가 연결을 끊을 때까지 메시지를 계속 주고받을 수 있습니다. NGINX가 WebSocket을 제대로 처리하도록 하는 데 필요한 것은 HTTP에서 WebSocket으로 연결을 업그레이드하는 업그레이드 요청을 처리하도록 헤더를 올바르게 설정하는 것입니다.
위 내용과 같이 NGINX Plus를 활용하여 Demo 가 필요하시면 하단의 전문가에게 상담받기 버튼을 클릭해주세요
전문가에게 상담받기