WebSocketでリアルタイム通信

WebSocketでリアルタイム通信 - Presentation Transcript

1. WebSocket Chrome+HTML5 Conference 2011/8/21 http://slidesha.re/p18o4P11 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/html5j11 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 WebSocket11 8 28
6. WebSocket ( ∀ )11 8 28
7. WebSocket ( ∀ )11 8 28
8. WebSocket11 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-1011 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. Chat11 8 28
22. Chat on GMail http://mail.google.com/mail/help/chat.html11 8 28
23. Comet11 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 = HTTP11 8 28
28. WebSocket11 8 28
29. http://www.flickr.com/photos/wold/2392054931/11 8 28
30. 11 8 28
31. FAX e-mail twitter11 8 28
32. 11 8 28
33. http://www.flickr.com/photos/adforce1/5154126561/11 8 28
34. Comet11 8 28
35. !!11 8 28
36. Comet H E L L O !11 8 28
37. WebSocket WebSocket11 8 28
38. WebSocket OK!! ! O L L E H11 8 28
39. 11 8 28
40. CPU / CPU traffic WebSocket 1.3% 90kbps Comet 2.7% 330kbps 111 8 28
41. 11 8 28
42. WebSocket11 8 28
43. Agenda WebSocket Comet Getting Started!! http://www.flickr.com/photos/11086497@N00/277491010/11 8 28
44. Comet notification Push11 8 28
45. WebSocket11 8 28
46. Comet WebSocket ◯� ◯� ◯� ◯� ◯� ◯� △ ◯� ☓ ◯� ☓ ◯� ☓ ◯�11 8 28
47. Agenda a2c camera (teacher) WebSocket Comet Getting Started!! by @os0x my son penguin11 8 28
48. 11 8 28
49. Chat11 8 28
50. 11 8 28
51. (´ ω )11 8 28
52. ――( ∀ )――!!11 8 28
53. WebSocket !! PC Web WebSocket11 8 28
54. http://chromium.googlecode.com/svn/trunk/samples/audio/o3d-webgl-samples/pool.html11 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-1011 8 28
56. Yet another use case11 8 28
57. WebSocket DEMO Chrome 14 http://komasshu.com/ws/mecab/pipelinetest.html11 8 28
58. CSS11 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-1011 8 28
61. ... http://www.atmarkit.co.jp/fcoding/articles/ http://gihyo.jp/dev/feature/01/websocket websocket/01/websocket01a.html11 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/1011 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 β WebSocket11 8 28
65. WebSocket socket.io Comet Best Practice Comet11 8 28
66. HTML5 Comet => Server-Sent Events IE Android ready http://www.w3.org/TR/eventsource/11 8 28
67. HTML5 API API 201011 8 28
68. http://www.flickr.com/photos/jenosaur/4051305996/11 8 28
69. • ◦ http://bit.ly/toka20 • WebSocket ◦ http://bit.ly/toka20-B3 • Twitter ◦ #html5j • Facebook ◦ http://www.facebook.com/html5j11 8 28