html5など社内勉強会 vol.8 - websocket

HTML5など 勉強会 Vol. 8 WebSocket 入門編

2012/2/9 @ 某社

System Management HeadquatersGeorge Harada

提 供

勉強会スタッフ（ボランティア）

システム統括本部

Agenda

1. DEMO 1

2. WebSocket ?

3. DEMO 2

Agenda

1. DEMO 1

2. WebSocket ?

3. DEMO 2

DEMO 1

DEMO 1から抜粋

DEMO 1から抜粋

DEMO 1から抜粋

DEMO 1から抜粋

DEMO 1から抜粋

DEMO 1から抜粋

DEMO 1から抜粋

DEMO 1から抜粋

Agenda

1. DEMO 1

2. WebSocket ?

3. DEMO 2

リアルタイム×

双方向通信実現するための通信技術

WebSocketとは

HTTPリクエスト

HTTPレスポンス

Webサーバクライアント（ブラウザ）

HTTP

・リクエストとレスポンスは必ずセット ・リクエストは常にクライアントから

WebSocketサーバクライアント（ブラウザ）

WebSocket

Upgrade

WebSocket

接続確立後はどちらからでも データの送信が可能

HTTPリクエスト

HTTPレスポンス

リアルタイム×

双方向通信実現するための通信技術

HTTPでは 不可能 な

HTTPより 効率的 な

WebSocketとは

そのまま使えるブラウザ

Chrome (4.0 以降) ※for Android Beta は ICS 以降

Safari (5.0 以降) ※iOS 4.2 以降

ベンダープレフィックスが必要なブラウザ

Firefox (6.0 以降) ※for Mobile は 7.0 以降

ユーザによる有効化設定が必要なブラウザ

Opera (11.0 以降)

対応予定Internet Explorer (10.0 以降)

対応ブラウザ (2012/02/08 現在)

Android標準ブラウザは非対応

// WebSocketサーバに接続 (暗号化通信は 'wss://' を利用)

var ws = new WebSocket('ws://www.w3.org:443/echo');

// メッセージを送信ws.send('送信データ');

// メッセージを受信（イベントハンドラ）

ws.onmessage = function(event) {

// 受信データを取り出す var message = event.data;

};

// 接続を切断（あまり使わないはず）

ws.close();

クライアント実装 (JavaScript)

onopenoncloseonerrorreadyState

他によく使うWebSocket プロパティ

// WebSocketサーバに接続var ws = new WebSocket('ws://www.w3.org:443/echo');

URL を要求: ws://www.w3.org:443/echoリクエストメソッド: GETステータスコード: 101 Web Socket Protocol Handshake

リクエストヘッダOrigin: http://www.w3.orgSec-WebSocket-Key1: fg182#9$ 11 9a y: 10+Connection: UpgradeHost: www.w3.org:443Sec-WebSocket-Key2: 35 ?6w4785 8 1 6Upgrade: WebSocket

レスポンスヘッダSec-WebSocket-Location: ws://www.w3.org:443/echoSec-WebSocket-Origin: http://www.w3.orgConnection: UpgradeUpgrade: WebSocket

Handshakeの流れ

(1) ブラウザから、接続確立のための　HTTPリクエストをWSサーバに送信

(2) WSサーバは、リクエストの内容を　確認して接続許可のHTTPレスポンスを　ブラウザに送信

(3) ブラウザは、接続をWebSocketに　アップグレード

この一連の流れを Handshake と呼ぶ

・メジャーな開発言語には、便利なWebSocketライブラリが大体用意されており、　比較的容易に環境を構築できる

・最近の流行は Node.js + α の構成（サーバサイドJavaScript）

・ライブラリが対応するWebSocketの規格（バージョン）には注意が必要

・社内Proxy等による、通信ポートの制約には注意が必要

続きはまた、別の お は な し

WebSocketサーバ実装

と、いうわけでざっくりまとめ

リアルタイム×

双方向通信実現するための通信技術

HTTPでは 不可能 な

HTTPより 効率的 な

WebSocket (1)

// WebSocketサーバに接続 (暗号化通信は 'wss://' を利用)

var ws = new WebSocket('ws://www.w3.org:443/echo');

// メッセージを送信ws.send('送信データ');

// メッセージを受信（イベントハンドラ）

ws.onmessage = function(event) {

// 受信データを取り出す var message = event.data;

};

// 接続を切断（あまり使わないはず）

ws.close();

onopenoncloseonerrorreadyState

他によく使うWebSocket プロパティ

WebSocket (2)

使い方は

カンタン

そのまま使えるブラウザ

Chrome (4.0 以降) ※for Android Beta は ICS 以降

Safari (5.0 以降) ※iOS 4.2 以降

ベンダープレフィックスが必要なブラウザ

Firefox (6.0 以降) ※for Mobile は 7.0 以降

ユーザによる有効化設定が必要なブラウザ

Opera (11.0 以降)

対応予定Internet Explorer (10.0 以降)

WebSocket (3)

対応ブラウザに気をつけよう

Agenda

1. DEMO 1

2. WebSocket ?

3. DEMO 2

DEMO 2

sample-- 社内URL --

　　　　※Chrome または Safari でリンクを開いて下さい。　　　　※WebSocketサーバはメンテナンス等のため予告無く停止する場合があります。

動画に含まれる、その他のデモをご覧になりたい方はstudy_staff@ までご連絡ください

m(_ _)m

如何でしたか？

Future?No, Tomorrow!

新しいサービスをイロイロと考えてみてください！！

勉強会スタッフ絶賛募集中です

また次回お会いしましょう

tthhaannkkss !!

Special Thanks toAssistantOperationOperationOperationSupportSupportSupportSupport

順不同 敬称略

参考文献等HTML5- http://html5.jp/- http://www.amazon.co.jp/徹底解説HTML5マークアップガイドブック-羽田野太巳/dp/4798025291- http://www.amazon.co.jp/徹底解説-HTML5-APIガイドブック-ビジュアル系API編-羽田野/dp/4798028541

JavaScript- http://www.amazon.co.jp/パーフェクトJavaScript-PERFECT-4-井上-誠一郎/dp/477414813X