[Webアプリ]nginxを使ってWebSocketのリバースプロキシを設定する。

nginxのWebSocketのリバースプロキシはversion 1.3.13から対応。
nginx本体にWebSocketのリバースプロキシが対応したみたいなので、SSL接続まで使ってみました。

nginx.org – WebSocket proxying
http://nginx.org/en/docs/http/websocket.html

バージョンは1.3.13から対応しているようです。stable版ではないので、ソースからコンパイルします。

テストとして、nginxのリバースプロキシ機能を使用して、(http)80,(https)443でlibwebsocketsのテストサーバーに接続してみます。

パッケージダウンロードと展開(2013/03/22時点での最新)

$wget http://nginx.org/download/nginx-1.3.14.tar.gz
$tar -zxvf nginx-1.3.14.tar.gz

SSLを有効にしてコンパイル & インストール

$./configure --with-http_ssl_module
$make
$sudo make install

リバースプロキシを設定してlibwebsocketsのWebSocketサーバーに接続してみる。
ここを参考にして、WebSocketのリバースプロキシを設定します。
※ちなみに、この設定はnginx1.3.13以前のバージョンでも有効な設定であり、WebSocketをクライアントが繋ぎにいこうとするとhttpハンドシェイクがWebSocketサーバー側に伝わります。しかし、この場合はサーバーのみクライアントの接続を認識しますが、クライアント側に応答が返らない状態になります。

◇Port:80 http libwebsocketsのリバースプロキシの設定例。
設定ファイルパス(default):/usr/local/nginx/conf/nginx.conf
libwebsocketsはtest-server/libwebsockets-test-server(同PC内で起動 Port:7681で待受)を使用します。

http{
// 略
       server {
                listen 80;
                server_name localhost;

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

libwebsokcets-test-serverの起動

$ ./libwebsockets-test-server
lwsts[46535]: libwebsockets test server - (C) Copyright 2010-2013 Andy Green <andy@warmcat.com> - licensed under LGPL2.1
lwsts[46535]: Initial logging level 7
lwsts[46535]: Library version: 1.2
lwsts[46535]:  Started with daemon pid 0
lwsts[46535]:  static allocation: 5512 + (16 x 1024 fds) = 21896 bytes
lwsts[46535]:  canonical_hostname = ubuntuserver
lwsts[46535]:  Compiled with OpenSSL support
lwsts[46535]:  Using non-SSL mode
lwsts[46535]:  per-conn mem: 248 + 1328 headers + protocol rx buf
lwsts[46535]:  Listening on port 7681

nginxの起動

$sudo /usr/local/nginx/sbin/nginx -s stop  // 停止
$sudo /usr/local/nginx/sbin/nginx          // 起動

ブラウザでアクセスしてみる。
httpで接続!正常に動作します。
Img20130322145850
libwebsocketsはエイリアスに”/”のみでアクセスし、WebSocketのサブプロトコルが”/”,”dumb-increment-protocol”,”lws-mirror-protocol”で動作が変わります。(nginx.confに”root”パスを書かなくてよいのはlibwebsocketsにhttpサーバーの機能があるからです)。nginxの設定だけでサブプロトコルも引き継ぎられているようです。

アクセスがないソケットはnginxによって閉じられてしまう。
どうやら動きのないソケットはnginxによって閉じられてしまうようです。
Img20130322150035
“dumb-increment-protocol”はサーバーから一方的にデータ(カウンター値)を受信しているのに対し、”lws-mirror-protocol”は任意のタイミングで送受信が発生するので何もしないと約110秒くらいでソケットが閉じられてしまいます。今のところこのtimeoutの設定はわかりません。

◇Port:443 SSL libwebsocketsのリバースプロキシの設定例。
設定ファイルパス(default):/usr/local/nginx/conf/nginx.conf
libwebsocketsはtest-server/libwebsockets-test-server(同PC内で起動 Port:7681で待受)を使用します。

http{
// 略
        server {
                listen 443;
                server_name localhost;

                ssl on;
                ssl_certificate /home/user/work/libwebsockets/libwebsockets-1.22-chrome26-firefox18/test-server/libwebsockets-test-server.pem; // テストサーバーの証明書
                ssl_certificate_key /home/user/work/libwebsockets/libwebsockets-1.22-chrome26-firefox18/test-server/libwebsockets-test-server.key.pem; // テストサーバーの秘密鍵

                location /{
                        proxy_pass https://localhost:7681/;
                        proxy_http_version 1.1;
                        proxy_set_header Upgrade $http_upgrade;
                        proxy_set_header Connection "upgarede";
                }
        }
}

libwebsokcets-test-serverのSSL起動
※configure時に”–enable-openssl”オプションが必要。

$ ./libwebsockets-test-server -ssl
lwsts[46628]: libwebsockets test server - (C) Copyright 2010-2013 Andy Green <andy@warmcat.com> - licensed under LGPL2.1
lwsts[46628]: Initial logging level 7
lwsts[46628]: Library version: 1.2
lwsts[46628]:  Started with daemon pid 0
lwsts[46628]:  static allocation: 5512 + (16 x 1024 fds) = 21896 bytes
lwsts[46628]:  canonical_hostname = ubuntuserver
lwsts[46628]:  Compiled with OpenSSL support
lwsts[46628]:  Using SSL mode
lwsts[46628]:  per-conn mem: 248 + 1328 headers + protocol rx buf
lwsts[46628]:  Listening on port 7681

nginxの起動

$sudo /usr/local/nginx/sbin/nginx -s stop  // 停止
$sudo /usr/local/nginx/sbin/nginx          // 起動

ブラウザでアクセスしてみる。
httpsで接続!!正常に動作します。
Img20130322151711
ちなみに、動きの無いソケットが閉じられるのはhttpと同じ現象。

[Webアプリ]WebSocketとGoogleMapsでリアルタイム監視マップを作る。その3。

リアルタイム監視マップ作成続き。ブラウザで操作編。

やりたいこと。
・全国の拠点(工場や事務所)で発生したイベント(警報、警告など)をWebSocketとGoogleMapsを使ってリアルタイム監視したい。
・重大な警告が発生したら発生場所を示すマーカーを点滅表示させたい。
・重大な警告が発生したら警告音を鳴らしたい。尚、警告状態が収束したら警告音を止めること。
・デバッグ用にブラウザからイベントを送信できるようにしたい。←NEW

ブラウザからイベントを発生させる。
JavaScriptでJSON文字列を作成し、監視マップに反映させてみます。

実行画面(音出ます)

今回作成したソースはこちら

[Webアプリ]WebSocketとGoogleMapsでリアルタイム監視マップを作る。その2。

WebSocketを使用してのWebアプリ作成続き。
JavaScriptをあまりやったことがないので、四苦八苦しながら。。

やりたいこと。
・全国の拠点(工場や事務所)で発生したイベント(警報、警告など)をWebSocketとGoogleMapsを使ってリアルタイム監視したい。
・重大な警告が発生したら発生場所を示すマーカーを点滅表示させたい。←NEW
・重大な警告が発生したら警告音を鳴らしたい。尚、警告状態が収束したら警告音を止めること。←NEW

イベントの発生場所の点滅と警告音を鳴らしてみる。
重大な警告レベルのイベントが発生したらマップ上のマーカーを点滅させるのと、警告音を鳴らし続ける機能を追加してみる。
重大なイベントがない場合は警告音を止める。

サウンドはこちらのサイトの方のを使わせていただいた。
音楽素材/魔王魂
http://maoudamashii.jokersounds.com/

実行画面(音出ます)

今回作成したソースはこちら

[Webアプリ]WebSocketとGoogleMapsでリアルタイム監視マップを作る。その1。

結構簡単に出来る。
全国に複数ある工場の異常をリアルタイムに監視できるマップをWebSocketとGoogleMapsを使って作ってみたいと思います。

やりたいこと。
・全国の拠点(工場や事務所)で発生したイベント(警報、警告など)をWebSocketとGoogleMapsを使ってリアルタイム監視したい。

イメージ
Img20130315001252

実行画面

JSONとWebSocketのおかげ。
動作の仕組みとしてはモニター対象の各クライアントが送信したJSON文字列をサーバーが接続中のWebSocketクライアントにブロードキャストしています。
WebSocketなので、サーバーはモニター対象のクライアントをポーリングする必要はなく、クライアントはイベントが発生したタイミングでサーバーに情報を送信することができます。また、ブラウザもWebSocketセッションを張りっぱなしなので、ブラウザリロードなどの必要はありません。まぁ、セッションが切れないという保証はないと思いますので、その辺の考慮は必要ですが。。。

GoogleMapsAPIの使用方法については、下記のサイト様を参考にしました。このサイト作った人ほんとすごいですよねー。

ドットインストール – Google Maps API入門
http://dotinstall.com/lessons/basic_google_maps