読者です 読者をやめる 読者になる 読者になる

Septeni Engineer's Blog

セプテーニエンジニアが綴る技術ブログ

WebSocket概論

JavaScript

こんばんは!@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って何?


WebSocketは、クライアントとサーバー間で双方向通信を実現するための仕組みです。
もともとHTML5の一機能として仕様の策定が進められていました。
これにより、手軽にハイパフォーマンスでリアルタイムな
Webサービスを実現することが可能となります。


対応ブラウザ

まだ仕様策定中のため、対応ブラウザは少ないです(本記事エントリ時点)。
仕様は2011年5月完成目標とのことです。


仕様バージョン75以前・・・safari/Chrome4、5
仕様バージョン76・・・Firefox4/Chrome6


WebSocketってどんな技術?

通信方式に関する技術なので、従来のHTTP通信と比較して説明します。


HTTP同期通信

f:id:k_chindamaikul:20150722182510j:plain

  • 画面遷移する。
  • 表示の切り替えはページ単位。
  • 通信が全て完了しないと次に行けないので、重いページを開こうとしてしまった時ウザイ。

ajaxによる非同期通信

f:id:k_chindamaikul:20150722182544j:plain

  • 画面遷移しない。
  • 表示の切り替えはデータ単位。
  • サーバからのメッセージをほぼリアルタイムに反映。
  • 結構PCのリソースを食う。
  • サーバ側からプッシュできない。ブラウザからポーリングすれば似た様なことはできる。

WebSocketによる通信

f:id:k_chindamaikul:20150722182609j:plain

  • 画面遷移しない。
  • 表示の切り替えはデータ単位。
  • 通信毎に新しいコネクションを貼る必要がない上に、通信量が少ない。
  • 仕様策定中で、頻繁に仕様が変更される。

サンプルコード

WebSocketを実現するには、ブラウザ側とサーバ側でプログラムを書く必要があります。

ここでは、サーバ側のサンプルをちょっとだけ書いてみました。
サーバ側のプログラムには、node.jsを使用しました。


node.jsとは


node.jsとはスタンドアロンJavaScriptプログラム上でイベント駆動I/Oを実現する
フレームワークJavaScriptエンジンにはGoogle V8エンジンを採用しています。
  • 動作が速いこと
  • 大量のアクセスをさばけること
という設計思想で構築されている(っぽい)。



サーバにnode.jsをインストール


以下のURLより最新版のソースコードをダウンロード、makeします。

$ 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とのマッシュアップ

GroupDashpon
http://groudashpon.heroku.com/
f:id:k_chindamaikul:20150722182645p:plain
  • グルーポンAPIから定期的に得たクーポン購入情報をストリーム形式で流している。
    単純に近辺のクーポンを探せて面白い。
  • ブラウザがわからいちいち情報をプルする必要無し!

オンラインゲーム

ピンボール
http://syspri.org/test/websocket_pingpong/pingpong.htm

f:id:k_chindamaikul:20150722182726p:plain

ボンバーマン
http://syspri.org/test/websocket_tile_nosocketio/src/tile.htm

f:id:k_chindamaikul:20150722182744p:plain

  • オンラインのユーザ対戦をjavascript+HTMLで実現可能。
  • 作成者いわく、サーバサイドのプログラミングの敷居がすごく下がる(らしい)。

ファイルアップロード

Transloadit
http://transloadit.com/

f:id:k_chindamaikul:20150722182813p:plain

  • 専用プロトコルを使用しているので、パフォーマンスを落とさずに大きなファイルをアップロードできる。
  • ほぼ正確な進行状況を把握できる。

サーバリソース状況やWEBサイトのモニタリング

Hummingbird
http://mnutt.github.com/hummingbird/

f:id:k_chindamaikul:20150722182839p:plain

  • リアルタイムアクセスカウンター。
  • 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/


ありがとうございました〜