WebSocketでリアルタイム通信
•
20 likes•4,910 views
8/21開催 Chrome+HTML5 Conference@Goolgeの講演資料です。 A presentation for "Chrome+HTML5 Conference" on 2011/8/21 at Google Japna Office.
Recommended
More Related Content
Viewers also liked
Similar to WebSocketでリアルタイム通信
Similar to WebSocketでリアルタイム通信 (20)
More from Kensaku Komatsu
More from Kensaku Komatsu (20)
Recently uploaded
Recently uploaded (20)
WebSocketでリアルタイム通信
- 1. WebSocket Chrome+HTML5 Conference 2011/8/21 http://slidesha.re/p18o4P 11 8 28
- 2. • ◦ http://bit.ly/toka20 ◦ Chrome Web Store ◦ http://bit.ly/toka20-B1 ◦ Chrome DevTools ◦ http://bit.ly/toka20-B2 • WebSocket ◦ http://bit.ly/toka20-B3 • Twitter ◦ #html5j • Facebook ◦ http://www.facebook.com/html5j 11 8 28
- 3. Twitter http://twitter.com/komasshu Blog http://blog.livedoor.jp/kotesaki/ Chrome+HTML5 Conference HTML5 Google API Expert(HTML5) Microsoft Most Valuable Professional(IE) 11 8 28
- 4. 11 8 28
- 5. Today’s Main Idea WebSocket 11 8 28
- 6. WebSocket ( ∀ ) 11 8 28
- 7. WebSocket ( ∀ ) 11 8 28
- 8. WebSocket 11 8 28
- 9. 11 8 28
- 10. 11 8 28
- 11. Agenda WebSocket Comet Getting Started!! http://www.flickr.com/photos/27048731@N03/4004513994/ 11 8 28
- 12. Agenda WebSocket Comet Getting Started!! http://www.flickr.com/photos/johnlinford/3754434641/ 11 8 28
- 13. WebSocket The WebSocket protocol draft-ietf-hybi-thewebsocketprotocol-10 Abstract The WebSocket protocol enables two-way communication between a client running untrusted code running in a controlled environment to a remote host that has opted-in to communications from that code. The security model used for this is the Origin-based security model commonly used by Web browsers. The protocol consists of an opening handshake followed by basic message framing, layered over TCP. The goal of this technology is to provide a mechanism for browser-based applications that need two-way communication with servers that does not rely on opening multiple HTTP connections (e.g. using XMLHttpRequest or <iframe>s and long polling). ref) http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-10 11 8 28
- 14. (´ ω ) 11 8 28
- 15. 11 8 28
- 16. !! 11 8 28
- 17. !! var socket = new WebSocket('ws://example.com’); socket.send(‘hello’); socket.onmessage(function(evt){ alert(evt.data); } 11 8 28
- 18. ( ∀ ) 11 8 28
- 19. Agenda WebSocket Comet Getting Started!! http://www.flickr.com/photos/algenon_iii/5397440505/ 11 8 28
- 20. 11 8 28
- 21. Chat 11 8 28
- 22. Chat on GMail http://mail.google.com/mail/help/chat.html 11 8 28
- 23. Comet 11 8 28
- 24. Comet!! http://ascii.jp/elem/000/000/355/355253/ 11 8 28
- 25. Comet!! http://ascii.jp/elem/000/000/355/355253/ 11 8 28
- 26. Comet!! http://ascii.jp/elem/000/000/355/355253/ 11 8 28
- 27. Comet = HTTP 11 8 28
- 28. WebSocket 11 8 28
- 30. 11 8 28
- 31. FAX e-mail twitter 11 8 28
- 32. 11 8 28
- 34. Comet 11 8 28
- 35. !! 11 8 28
- 36. Comet H E L L O ! 11 8 28
- 37. WebSocket WebSocket 11 8 28
- 38. WebSocket OK!! ! O L L E H 11 8 28
- 39. 11 8 28
- 40. CPU / CPU traffic WebSocket 1.3% 90kbps Comet 2.7% 330kbps 1 11 8 28
- 41. 11 8 28
- 42. WebSocket 11 8 28
- 43. Agenda WebSocket Comet Getting Started!! http://www.flickr.com/photos/11086497@N00/277491010/ 11 8 28
- 44. Comet notification Push 11 8 28
- 45. WebSocket 11 8 28
- 46. Comet WebSocket ◯� ◯� ◯� ◯� ◯� ◯� △ ◯� ☓ ◯� ☓ ◯� ☓ ◯� 11 8 28
- 47. Agenda a2c camera (teacher) WebSocket Comet Getting Started!! by @os0x my son penguin 11 8 28
- 48. 11 8 28
- 49. Chat 11 8 28
- 50. 11 8 28
- 51. (´ ω ) 11 8 28
- 52. ――( ∀ )――!! 11 8 28
- 53. WebSocket !! PC Web WebSocket 11 8 28
- 55. The WebSocket protocol draft-ietf-hybi-thewebsocketprotocol-10 Abstract The WebSocket protocol enables two-way communication between a client running untrusted code running in a controlled environment to a remote host that has opted-in to communications from that code. The security model used for this is the Origin-based security model commonly used by Web browsers. The protocol consists of an opening handshake followed by basic message framing, layered over TCP. The goal of this technology is to provide a mechanism for browser-based applications that need two-way communication with servers that does not rely on opening multiple HTTP connections (e.g. using XMLHttpRequest or <iframe>s and long polling). ref) http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-10 11 8 28
- 56. Yet another use case 11 8 28
- 57. WebSocket DEMO Chrome 14 http://komasshu.com/ws/mecab/pipelinetest.html 11 8 28
- 58. CSS 11 8 28
- 59. know more about http://www.flickr.com/photos/26500034@N04/4732968982/ 11 8 28
- 60. Browser API Protocol http://www.w3.org/TR/websockets/ http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-10 11 8 28
- 61. ... http://www.atmarkit.co.jp/fcoding/articles/ http://gihyo.jp/dev/feature/01/websocket websocket/01/websocket01a.html 11 8 28
- 62. Chrome ver 00 ( ≦13 ), ver 10 ( ≧14 ) Firefox ver 00 ( ≦ 6 w/ about:config), ver 10 (7/8) Safari ver 00 Opera ver 00 ( w/ opera:config ) IE ver 09 ( ≧ 9 w/ Add-on available at “HTML5Labs” (http://html5labs.interoperabilitybridges.com/) 09/10 11 8 28
- 63. ? socket.io (http://socket.io/) WebSocket Comet Fallback apache wave (8/28) http://www.r-agent.co.jp/info/rss/event/websocket/ 11 8 28
- 64. Comet Fallback pollyfill socket.io Chrome14 β WebSocket 11 8 28
- 65. WebSocket socket.io Comet Best Practice Comet 11 8 28
- 66. HTML5 Comet => Server-Sent Events IE Android ready http://www.w3.org/TR/eventsource/ 11 8 28
- 67. HTML5 API API 2010 11 8 28
- 69. • ◦ http://bit.ly/toka20 • WebSocket ◦ http://bit.ly/toka20-B3 • Twitter ◦ #html5j • Facebook ◦ http://www.facebook.com/html5j 11 8 28
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n