Mais conteúdo relacionado
Semelhante a HTML5など社内勉強会 Vol.8 - WebSocket (20)
Mais de George Harada (12)
HTML5など社内勉強会 Vol.8 - WebSocket
- 19. そのまま使えるブラウザ
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標準ブラウザは非対応
- 20. // 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)
onopen
onclose
onerror
readyState
他によく使う
WebSocket プロパティ
- 21. // 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.org
Sec-WebSocket-Key1: fg182#9$ 11 9a y: 10+
Connection: Upgrade
Host: www.w3.org:443
Sec-WebSocket-Key2: 35 ?6w4785 8 1 6
Upgrade: WebSocket
レスポンスヘッダ
Sec-WebSocket-Location: ws://www.w3.org:443/echo
Sec-WebSocket-Origin: http://www.w3.org
Connection: Upgrade
Upgrade: WebSocket
Handshakeの流れ
(1) ブラウザから、接続確立のための
HTTPリクエストをWSサーバに送信
(2) WSサーバは、リクエストの内容を
確認して接続許可のHTTPレスポンスを
ブラウザに送信
(3) ブラウザは、接続をWebSocketに
アップグレード
この一連の流れを Handshake と呼ぶ
- 25. // WebSocketサーバに接続 (暗号化通信は 'wss://' を利用)
var ws = new WebSocket('ws://www.w3.org:443/echo');
// メッセージを送信
ws.send('送信データ');
// メッセージを受信(イベントハンドラ)
ws.onmessage = function(event) {
// 受信データを取り出す
var message = event.data;
};
// 接続を切断(あまり使わないはず)
ws.close();
onopen
onclose
onerror
readyState
他によく使う
WebSocket プロパティ
WebSocket (2)
使い方は
カンタン
- 26. そのまま使えるブラウザ
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)
対応ブラウザに
気をつけよう
- 29. sample
-- 社内URL --
※Chrome または Safari でリンクを開いて下さい。
※WebSocketサーバはメンテナンス等のため予告無く停止する場合があります。
動画に含まれる、その他のデモをご覧になりたい方は
study_staff@ までご連絡ください
m(_ _)m