WebSocketでリアルタイム通信
20 likes4,916 views
The document discusses the WebSocket protocol, which facilitates two-way communication between clients and servers in web applications without the need for multiple HTTP connections. It outlines the protocol's structure, including a handshake and message framing, while emphasizing its security model based on origins commonly used in web browsers. The document also compares WebSocket to other technologies like Comet and presents various resources for further exploration.
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
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n