websocket shanon
TRANSCRIPT
WebSocketなど2011/08/15 池田尚史@社内勉強会
11年8月15日月曜日
前段：従来の Push/Push Like
11年8月15日月曜日
従来の Push/Push Like
XMLHttpRequest (Ajax: ただの非同期通信)
Comet (Long Polling による擬似 Push)
Flash (Action Script でゴニョゴニョ)
iframeで。。。 (なんか昔あった技法）
11年8月15日月曜日
WebSocketとは
11年8月15日月曜日
WebSocketとはW3CとIETFで規定される双方向通信の規格
XMLHttpRequestの欠点の解消、Cometの代替
TCP上で動作
元々はHTML5の仕様の一部だったが、別規格になった
API
http://dev.w3.org/html5/websockets/
11年8月15日月曜日
WebSocketとは
「WebのためのTCP」
ハンドシェイクはHTTP上で行う
コネクション確立後はTCP上に張りっぱなし
URIスキームはHTTPと別に定義されている
“ws://”と”wss://”の二種
11年8月15日月曜日
Ajax, Comet
都度コネクションを張る
基本的には Polling
http://prog.re-d.net/demo/slide/20110528/11年8月15日月曜日
WebSocket
一度張ったコネクションは張りっぱなし
通信ロスが減る
http://prog.re-d.net/demo/slide/20110528/11年8月15日月曜日
HTTPとの違いプロトコルとしてみた場合の相違点
ステートフル
リクエスト／レスポンスモデルではない
一度確立したコネクションは張りっぱなし
11年8月15日月曜日
Ajax, Comet との違い
データ転送量が圧倒的に少ない
-> つまり速い
クロスドメイン制約がない！！
-> マジでー！！
11年8月15日月曜日
Client API
11年8月15日月曜日
var ws = new WebSocket("ws://example.com/service");
ws.onopen = function() { // Web Socket is connected. You can send data by send() method. ws.send("message to send"); ....};
ws.onmessage = function (evt) { var received_msg = evt.data; ... };
ws.onclose = function() { // websocket is closed. };
APIは意外と単純
http://dev.w3.org/html5/websockets/
11年8月15日月曜日
Server との Handshake
11年8月15日月曜日
クライアント -> サーバGET /demo HTTP/1.1Host: example.comConnection: UpgradeSec-WebSocket-Key2: 12998 5 Y3 1 .P00Sec-WebSocket-Protocol: sampleUpgrade: WebSocketSec-WebSocket-Key1: 4 @1 46546xW%0l 1 5Origin: http://example.com
^n:ds[4U
サーバ -> クライアントHTTP/1.1 101 WebSocket Protocol HandshakeUpgrade: WebSocketConnection: UpgradeSec-WebSocket-Origin: http://example.comSec-WebSocket-Location: ws://example.com/demoSec-WebSocket-Protocol: sample
8jKS'y:G*Co,Wxa-
ハンドシェイク時のやりとり※ハンドシェイクはHTTP上で行う
チャレンジ＆レスポンス方式の認証要求（チャレンジ）
Key1, Key2, チャレンジからMD5
値取得、レスポンスを返す
11年8月15日月曜日
チャレンジ&レスポンス方式読み方：チャレンジアンドレスポンスほうしき 【英】Challenge & Responseチャレンジ&レスポンス方式とは、パスワードの認証に用いられる方式のひとつで、サーバーから送られてくる暗号鍵（チャレンジ）を受け取り、それに演算処理を組み合わせたデータ（レスポンス）を返すことによって暗証を行う方式のことである。主にワンタイムパスワードの手法として用いられる。
チャレンジ&レスポンス方式においては、はじめにサーバーがクライアントに対して「チャレンジ」と呼ばれる値を送る。チャレンジを受け取ったクライアントは、チャレンジの値にそれぞれ保有しているパスワードを掛け合わせて演算処理を行い、その結果として生成されたハッシュ値を「レスポンス」として返す。サーバーは、クライアントから返ってきた値をサーバーが自ら生成したレスポンスと照合し、ふたつのレスポンスの値が一致していれば認証を通す。
チャレンジとして送られてくる値は毎回ランダムな値で変更される。そのため、生成されるレスポンスの値も毎回異なる。そのため、チャレンジ&レスポンス方式にはチャレンジやレスポンスが盗聴されたとしても認証上の致命的な問題が生じないという利点がある。
http://www.sophia-it.com/content/%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8%26%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B9%E6%96%B9%E5%BC%8F
11年8月15日月曜日
下記のように、送信したいデータの前後に1バイトずつ付けるだけ
0x00[Data]0xFF
データ量が圧倒的に少ない！
※ここの部分が現在仕様変更の対象らしい
コネクション確立後はデータフレーミング
11年8月15日月曜日
Googleが本気
Ian Hickson（editor of HTML5 specification）
Reducing kilobytes of data to 2 bytes…and reducing latency from 150ms to 50ms is far more than marginal. In fact, these two factors alone are enough to make WebSocket seriously interesting to Google.
「数キロバイトのデータ転送量を（最低）2バイトへ、150msの遅延を50msにできるとしたら、それはわずかな向上といったような生やさしいものではない。実際この2つの事実だけをもっても、WebSocketをGoogleにとって本気にさせるには十分なものだ」
11年8月15日月曜日
WebSocket対応状況
11年8月15日月曜日
ブラウザ実装状況PC
Chrome4～/Safari5～ はOK
Opera,FirefoxはデフォルトOff
IEは未対応
モバイル
iOS 4.2.1～ Safari はOK
android 未対応？(webkitなら動くかも。。。)
11年8月15日月曜日
サーバ実装状況node.js
socket.io
WebSocket、Flash、Jsonpロングポーリング、XHRポーリングを組み合わせたライブラリ（後述）
Java
Play!
Jetty
Grizzly
ほか
11年8月15日月曜日
サーバ実装状況Perl
Mojolicious
Catalyst作者の新FW
Ruby
em-websocket
Python
pywebsocket
C
mod_websocket
lighttpd のモジュール
11年8月15日月曜日
サーバ実装状況（商用）
Kaazing
ゲートウェイサーバとJavaとか.NETのクライアントを提供してるっぽい
Pusher
REST APIを使ってリクエストを投げると、WebSocketを使ってpushでレスポンスが返ってくる感じっぽい
11年8月15日月曜日
懸念事項
11年8月15日月曜日
１．対応ブラウザ前述したとおり、少ない
未対応ブラウザではどうするか
11年8月15日月曜日
２．仕様が揺れているhttp://dev.w3.org/html5/websockets/
セキュリティ見直しのため、今年7月に仕様変更
今W3Cで審議中
今までのWebSocketとは互換性なしらしい（えっ
11年8月15日月曜日
２．仕様が揺れているhttp://dev.w3.org/html5/websockets/
セキュリティ見直しのため、今年7月に仕様変更
今W3Cで審議中
今までのWebSocketとは互換性なしらしい（えっ
Σ(ﾟДﾟ；ｴｰｯ!11年8月15日月曜日
WebSocketもか。。。
11年8月15日月曜日
ブラウザごと、バージョンごとの差異で悩むのか。。
11年8月15日月曜日
解決策
11年8月15日月曜日
解決策として有望そうなもの
11年8月15日月曜日
Socket.io
11年8月15日月曜日
Socket.io
11年8月15日月曜日
Socket.io
WebSocket+αで解決しようというライブラリ
実装はnode.js（他言語サポートもあり）
Push機能実現に関する現時点での現実解
ページ： http://socket.io/
コード： https://github.com/LearnBoost/socket.io
仕様： https://github.com/LearnBoost/socket.io-spec
11年8月15日月曜日
サポートする通信方法WebSocket
Flash
Ajax long polling
Ajax multipart polling
Forever iframe
JSONP polling
11年8月15日月曜日
サポートするブラウザIE5.5～
Safari3～
Chrome3～
Firefox3～
Opera10.61～
iPhone Safari
iPad Safari
Android Webkit
WebOS Webkit
11年8月15日月曜日
サポートするブラウザIE5.5～
Safari3～
Chrome3～
Firefox3～
Opera10.61～
iPhone Safari
iPad Safari
Android Webkit
WebOS Webkit
ここ！
11年8月15日月曜日
WebSocketの仕様変更にも対応出来そう！！！対応させればいい！！
11年8月15日月曜日
ちなみに node.js
サーバサイドJavascript
GoogleのV8エンジンの上で動作
ノンブロッキングI/Oに特徴
後はググってハニー
11年8月15日月曜日
デモ
11年8月15日月曜日
デモで使ったサンプルコードは僕のブログに書いてあるので、参考にしてください。
http://d.hatena.ne.jp/ikeike443/20110808
11年8月15日月曜日
用途を絞れば充分使えるはず！
11年8月15日月曜日
というわけで倍Push！
11年8月15日月曜日
いじょ
11年8月15日月曜日