こんばんは!@kakeyangです。
僕達の部では、月に2回程度勉強会を開催しています。
- 知識やノウハウの共有
- 先行技術の調査
今回は、その勉強会の内容をちょっとだけ紹介します。
今更感はあるのですが、今回はWebSocketに関して軽く調べてみましたので、
簡単にまとめてみたいと思います。
まずは、「WebSocket」の盛り上がりっぷりから。
はてなブックマークで月毎にWebSocket関連記事(3user以上)を検索してみると・・・
2010年01月・・・11件
2010年02月・・・0件
2010年03月・・・0件
2010年04月・・・9件
2010年05月・・・17件
2010年06月・・・26件
2010年07月・・・30件
2010年08月・・・20件
2010年09月・・・15件
2010年10月・・・8件
2010年11月・・・0件
2010年12月・・・0件
あれー!?夏場を峠に盛り下がってる!?
・・・ということは気にせずに進めます。。。
そもそもWebSocketって何?
これにより、手軽にハイパフォーマンスでリアルタイムなWebサービスを実現することが可能となります。
対応ブラウザ
まだ仕様策定中のため、対応ブラウザは少ないです(本記事エントリ時点)。仕様は2011年5月完成目標とのことです。
仕様バージョン75以前・・・safari/Chrome4、5
仕様バージョン76・・・Firefox4/Chrome6
WebSocketってどんな技術?
通信方式に関する技術なので、従来のHTTP通信と比較して説明します。HTTP同期通信
- 画面遷移する。
- 表示の切り替えはページ単位。
- 通信が全て完了しないと次に行けないので、重いページを開こうとしてしまった時ウザイ。
ajaxによる非同期通信
- 画面遷移しない。
- 表示の切り替えはデータ単位。
- サーバからのメッセージをほぼリアルタイムに反映。
- 結構PCのリソースを食う。
- サーバ側からプッシュできない。ブラウザからポーリングすれば似た様なことはできる。
WebSocketによる通信
- 画面遷移しない。
- 表示の切り替えはデータ単位。
- 通信毎に新しいコネクションを貼る必要がない上に、通信量が少ない。
- 仕様策定中で、頻繁に仕様が変更される。
サンプルコード
WebSocketを実現するには、ブラウザ側とサーバ側でプログラムを書く必要があります。ここでは、サーバ側のサンプルをちょっとだけ書いてみました。
サーバ側のプログラムには、node.jsを使用しました。
node.jsとは
- 動作が速いこと
- 大量のアクセスをさばけること
サーバにnode.jsをインストール
$ wget http://nodejs.org/dist/node-v0.2.6.tar.gz $ tar xvzf ./node-v0.2.6.tar.gz $ cd node-v0.2.6 $ ./configure $ make 'build' finished successfully (2m11.139s) $ make install 'install' finished successfully (0.122s)
とりあえずnode.js本家サイトのサンプルで試してみる
以下のソースコードを適当なディレクトリに配置。// test.js var sys = require('sys'), http = require('http'); var count = 0; http.createServer(function (request, response) { count ++; sys.log(count); response.writeHead(200, {'Content-Type': 'text/plain'}); response.end('Hello\n'); }).listen(8124); sys.log('Server running at http://127.0.0.1:8124/');
node.jsを起動
$ node ./test.js & $ 13 Jan 16:11:19 - Server running at http://127.0.0.1:8124/ $ netstat –an | grep 8124 $ tcp 0 0 0.0.0.0:8124 0.0.0.0:* LISTEN
おぉ!ちゃんとListenしてる!
WebSocketの利用シーン
仕様策定中とはいえ、既にWebSocketを利用したWEBサービスが公開されています。面白かったものを幾つかピックアップしましたので、紹介させていただきます。
APIとのマッシュアップ
GroupDashponhttp://groudashpon.heroku.com/
オンラインゲーム
ピンボールhttp://syspri.org/test/websocket_pingpong/pingpong.htm
ボンバーマン
http://syspri.org/test/websocket_tile_nosocketio/src/tile.htm
- オンラインのユーザ対戦をjavascript+HTMLで実現可能。
- 作成者いわく、サーバサイドのプログラミングの敷居がすごく下がる(らしい)。
ファイルアップロード
Transloadithttp://transloadit.com/
- 専用プロトコルを使用しているので、パフォーマンスを落とさずに大きなファイルをアップロードできる。
- ほぼ正確な進行状況を把握できる。
サーバリソース状況やWEBサイトのモニタリング
Hummingbirdhttp://mnutt.github.com/hummingbird/
- リアルタイムアクセスカウンター。
- TV放映によるリスティングの効果や、「続きはWEBで」の効果をリアルに感じることができそう。
- 同じ仕組みでサーバリソースのリアルタイム監視も可能(いらないか・・)。
アドテクノロジーに応用すると?
リアルタイム性が必要なアドテクって何が考えられますか?とりあえずアドテク用語に「リアルタイム」を付けてみましたwww
- リアルタイム広告配信
- リアルタイムアクセス解析(さっきでましたが)
- リアルタイム効果計測
- リアルタイムLPO
- リアルタイムSEO
- リアルタイムDSP
- リアルタイムソーシャルメディアモニタリング
- リアルタイムソーシャルアプリランキング
- リアルタイムネットオークション
- リアルタイムロケーションサービス
リアルタイム/ロケーショナル/パーソナルな広告配信とか面白そうですね。
参考Webサイト
Biz-RIA Lab 「node.jsとWebSocketの利用シーン」http://bizria.jp/technical/nodejs-webssocket.html
@IT 「WebSocketでめざせ“リアルタイムWeb”!」
http://www.atmarkit.co.jp/fcoding/articles/websocket/01/websocket01a.html
Gihyo.jp 「Jettyで始めるWebSocket超入門」
http://bizria.jp/technical/nodejs-webssocket.html
node.js本家サイト
http://nodejs.jp/nodejs.org_ja/
node.jsマニュアル
http://nodejs.jp/nodejs.org_ja/api/index.html
ダウンロードたけし(寅年)の日記「噂のnode.websocket.jsでサーバサイドJSとHTML5 WebSocketを体験してみたの巻」
http://d.hatena.ne.jp/download_takeshi/20091215/1260903057
Asial blog「サーバサイドJavaScriptの「node.js」を試してみまた」
http://blog.asial.co.jp/668
Gigazine「リアルタイムアクセス可視化ツール「Hummingbird」を使ってみた」
http://gigazine.net/news/20100710_hummingbird/
ありがとうございました〜