HTML5など勉強会 Vol. 8WebSocket 入門編2012/2/9 @ 某社System Management HeadquatersGeorge Harada
提 供勉強会スタッフ(ボランティア)システム統括本部
Agenda1. DEMO 12. WebSocket ?3. DEMO 2
Agenda1. DEMO 12. WebSocket ?3. DEMO 2
DEMO 1
DEMO 1から抜粋
DEMO 1から抜粋
DEMO 1から抜粋
DEMO 1から抜粋
DEMO 1から抜粋
DEMO 1から抜粋
DEMO 1から抜粋
DEMO 1から抜粋
Agenda1. DEMO 12. WebSocket ?3. DEMO 2
リアルタイム双方向通信実現するための通信技術WebSocketとは
HTTPリクエストHTTPレスポンスWebサーバクライアント(ブラウザ)HTTP・リクエストとレスポンスは必ずセット・リクエストは常にクライアントから
WebSocketサーバクライアント(ブラウザ)WebSocketUpgradeWebSocket接続確立後はどちらからでもデータの送信が可能HTTPリクエストHTTPレスポンス
リアルタイム双方向通信実現するための通信技術HTTPでは不可能なHTTPより効率的なWebSocketとは
そのまま使えるブラウザChrome(4.0 以降) ※for Android Beta は ICS 以降Safari(5.0 以降) ※iOS 4.2 以降ベンダープレフィックスが必要なブラウザFirefox(6.0 以降) ※for Mobi...
// WebSocketサーバに接続 (暗号化通信は wss:// を利用)var ws = new WebSocket(ws://www.w3.org:443/echo);// メッセージを送信ws.send(送信データ);// メッセージを...
// WebSocketサーバに接続var ws = new WebSocket(ws://www.w3.org:443/echo);URL を要求: ws://www.w3.org:443/echoリクエストメソッド: GETステータスコード...
・メジャーな開発言語には、便利なWebSocketライブラリが大体用意されており、 比較的容易に環境を構築できる・最近の流行は Node.js + α の構成(サーバサイドJavaScript)・ライブラリが対応するWebSocketの規格(バ...
と、いうわけでざっくりまとめ
リアルタイム双方向通信実現するための通信技術HTTPでは不可能なHTTPより効率的なWebSocket (1)
// WebSocketサーバに接続 (暗号化通信は wss:// を利用)var ws = new WebSocket(ws://www.w3.org:443/echo);// メッセージを送信ws.send(送信データ);// メッセージを...
そのまま使えるブラウザChrome(4.0 以降) ※for Android Beta は ICS 以降Safari(5.0 以降) ※iOS 4.2 以降ベンダープレフィックスが必要なブラウザFirefox(6.0 以降) ※for Mobi...
Agenda1. DEMO 12. WebSocket ?3. DEMO 2
DEMO 2
sample-- 社内URL --    ※Chrome または Safari でリンクを開いて下さい。    ※WebSocketサーバはメンテナンス等のため予告無く停止する場合があります。動画に含まれる、その他のデモをご覧になりたい方はst...
如何でしたか?
Future?No, Tomorrow!
新しいサービスをイロイロと考えてみてください!!
勉強会スタッフ絶賛募集中です
また次回お会いしましょう
tthhaannkkss  !!
Special Thanks toAssistantOperationOperationOperationSupportSupportSupportSupport順不同 敬称略
参考文献等HTML5- http://html5.jp/- http://www.amazon.co.jp/徹底解説HTML5マークアップガイドブック-羽田野太巳/dp/4798025291- http://www.amazon.co.jp/徹...
Upcoming SlideShare
Loading in …5
×

HTML5など社内勉強会 Vol.8 - WebSocket

753 views
660 views

Published on

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
753
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5など社内勉強会 Vol.8 - WebSocket

  1. 1. HTML5など勉強会 Vol. 8WebSocket 入門編2012/2/9 @ 某社System Management HeadquatersGeorge Harada
  2. 2. 提 供勉強会スタッフ(ボランティア)システム統括本部
  3. 3. Agenda1. DEMO 12. WebSocket ?3. DEMO 2
  4. 4. Agenda1. DEMO 12. WebSocket ?3. DEMO 2
  5. 5. DEMO 1
  6. 6. DEMO 1から抜粋
  7. 7. DEMO 1から抜粋
  8. 8. DEMO 1から抜粋
  9. 9. DEMO 1から抜粋
  10. 10. DEMO 1から抜粋
  11. 11. DEMO 1から抜粋
  12. 12. DEMO 1から抜粋
  13. 13. DEMO 1から抜粋
  14. 14. Agenda1. DEMO 12. WebSocket ?3. DEMO 2
  15. 15. リアルタイム双方向通信実現するための通信技術WebSocketとは
  16. 16. HTTPリクエストHTTPレスポンスWebサーバクライアント(ブラウザ)HTTP・リクエストとレスポンスは必ずセット・リクエストは常にクライアントから
  17. 17. WebSocketサーバクライアント(ブラウザ)WebSocketUpgradeWebSocket接続確立後はどちらからでもデータの送信が可能HTTPリクエストHTTPレスポンス
  18. 18. リアルタイム双方向通信実現するための通信技術HTTPでは不可能なHTTPより効率的なWebSocketとは
  19. 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. 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)onopenoncloseonerrorreadyState他によく使うWebSocket プロパティ
  21. 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.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: WebSocketHandshakeの流れ(1) ブラウザから、接続確立のための HTTPリクエストをWSサーバに送信(2) WSサーバは、リクエストの内容を 確認して接続許可のHTTPレスポンスを ブラウザに送信(3) ブラウザは、接続をWebSocketに アップグレードこの一連の流れを Handshake と呼ぶ
  22. 22. ・メジャーな開発言語には、便利なWebSocketライブラリが大体用意されており、 比較的容易に環境を構築できる・最近の流行は Node.js + α の構成(サーバサイドJavaScript)・ライブラリが対応するWebSocketの規格(バージョン)には注意が必要・社内Proxy等による、通信ポートの制約には注意が必要続きはまた、別の お は な し WebSocketサーバ実装
  23. 23. と、いうわけでざっくりまとめ
  24. 24. リアルタイム双方向通信実現するための通信技術HTTPでは不可能なHTTPより効率的なWebSocket (1)
  25. 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();onopenoncloseonerrorreadyState他によく使うWebSocket プロパティWebSocket (2)使い方はカンタン
  26. 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)対応ブラウザに気をつけよう
  27. 27. Agenda1. DEMO 12. WebSocket ?3. DEMO 2
  28. 28. DEMO 2
  29. 29. sample-- 社内URL --    ※Chrome または Safari でリンクを開いて下さい。    ※WebSocketサーバはメンテナンス等のため予告無く停止する場合があります。動画に含まれる、その他のデモをご覧になりたい方はstudy_staff@ までご連絡くださいm(_ _)m
  30. 30. 如何でしたか?
  31. 31. Future?No, Tomorrow!
  32. 32. 新しいサービスをイロイロと考えてみてください!!
  33. 33. 勉強会スタッフ絶賛募集中です
  34. 34. また次回お会いしましょう
  35. 35. tthhaannkkss !!
  36. 36. Special Thanks toAssistantOperationOperationOperationSupportSupportSupportSupport順不同 敬称略
  37. 37. 参考文献等HTML5- http://html5.jp/- http://www.amazon.co.jp/徹底解説HTML5マークアップガイドブック-羽田野太巳/dp/4798025291- http://www.amazon.co.jp/徹底解説-HTML5-APIガイドブック-ビジュアル系API編-羽田野/dp/4798028541JavaScript- http://www.amazon.co.jp/パーフェクトJavaScript-PERFECT-4-井上-誠一郎/dp/477414813X

×