8/21開催 Chrome+HTML5 Conference@Goolgeの講演資料です。 A presentation for "Chrome+HTML5 Conference" on 2011/8/21 at Google Japna Office.

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. http://www.flickr.com/photos/wold/2392054931/
11 8 28

30. 11 8 28

31. FAX
e-mail
twitter
11 8 28

32. 11 8 28

33. http://www.flickr.com/photos/adforce1/5154126561/
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

54. http://chromium.googlecode.com/svn/trunk/samples/audio/o3d-webgl-samples/pool.html
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

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/html5j
11 8 28