Download as PDF, PPTX
Uploaded byKensaku Komatsu
WebSocketでリアルタイム通信
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.
More Related Content
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
- 29.
- 30. 11 8 28
- 31. FAX e-mail twitter 11 8 28
- 32. 11 8 28
- 33.
- 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
- 54.
- 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 usecase 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
- 68.
- 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