110828recruit agent ws

3,539 views

Published on

A presentation slide for recruit agent's seminar on Aug 28, 2011.
This slide describing What's WebSocket? Difference w/ Comet? How to use ? What is appreciate coding pattern :)

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,539
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
29
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

110828recruit agent ws

  1. 1. 2011/8/28 http://slidesha.re/110828kom11 8 28
  2. 2. NTT Twitter http://twitter.com/komasshu Blog http://blog.livedoor.jp/kotesaki/ HTML5 Google API Expert(HTML5) Microsoft Most Valuable Professional(IE)11 8 28
  3. 3. 11 8 28
  4. 4. Today’s Main Idea WebSocket11 8 28
  5. 5. Agenda WebSocket Comet Deep Inside Socket.io Coding pattern http://www.flickr.com/photos/27048731@N03/4004513994/11 8 28
  6. 6. Agenda WebSocket Comet Deep Inside Socket.io Coding pattern http://www.flickr.com/photos/johnlinford/3754434641/11 8 28
  7. 7. 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
  8. 8. (´ ω )11 8 28
  9. 9. 11 8 28
  10. 10. !!11 8 28
  11. 11. !! var socket = new WebSocket(ws://example.com’); socket.send(‘hello’); socket.onmessage(function(evt){ alert(evt.data); }11 8 28
  12. 12. ( ∀ )11 8 28
  13. 13. RealTime Web!!11 8 28
  14. 14. Agenda WebSocket Comet Deep Inside Socket.io Coding pattern http://www.flickr.com/photos/algenon_iii/5397440505/11 8 28
  15. 15. 11 8 28
  16. 16. Chat11 8 28
  17. 17. Chat on GMail http://mail.google.com/mail/help/chat.html11 8 28
  18. 18. Comet11 8 28
  19. 19. Comet!! http://ascii.jp/elem/000/000/355/355253/11 8 28
  20. 20. Comet!! http://ascii.jp/elem/000/000/355/355253/11 8 28
  21. 21. Comet!! http://ascii.jp/elem/000/000/355/355253/11 8 28
  22. 22. Comet = HTTP11 8 28
  23. 23. WebSocket11 8 28
  24. 24. http://www.flickr.com/photos/wold/2392054931/11 8 28
  25. 25. 11 8 28
  26. 26. FAX e-mail twitter11 8 28
  27. 27. 11 8 28
  28. 28. http://www.flickr.com/photos/adforce1/5154126561/11 8 28
  29. 29. Comet11 8 28
  30. 30. !!11 8 28
  31. 31. Comet H E L L O !11 8 28
  32. 32. WebSocket WebSocket11 8 28
  33. 33. WebSocket OK!! ! O L L E H11 8 28
  34. 34. 11 8 28
  35. 35. CPU / CPU traffic WebSocket 1.3% 90kbps Comet 2.7% 330kbps 111 8 28
  36. 36. 11 8 28
  37. 37. WebSocket =11 8 28
  38. 38. Agenda WebSocket Comet Deep Inside Socket.io Coding pattern http://www.flickr.com/photos/11086497@N00/277491010/11 8 28
  39. 39. Comet notification Push11 8 28
  40. 40. WebSocket11 8 28
  41. 41. Comet WebSocket ◯� ◯� ◯� ◯� ◯� ◯� △ ◯� ☓ ◯� ☓ ◯� ☓ ◯�11 8 28
  42. 42. Agenda WebSocket Comet Deep Inside Socket.io Coding pattern http://www.flickr.com/photos/paolomargari/2848065273/11 8 28
  43. 43. Last Call version:10 Cache Poisoning Attack Keep-alive packet( ping, pong ) etc.11 8 28
  44. 44. http://caniuse.com/ http://html5labs.interoperabilitybridges.com/ 09/1011 8 28
  45. 45. IE (Add-on OK) Firefox 10 Chrome 13 14 Safari5.1 00 Opera Off11 8 28
  46. 46. Automatic Fallback WebSocket Comet11 8 28
  47. 47. Agenda WebSocket Comet Deep Inside Socket.io Coding pattern11 8 28
  48. 48. http://socket.io/11 8 28
  49. 49. Ver 0.7 WebSocket Comet Fallback IE6/7 keep-alive, custom event, name space, storing data, ........ apache wave11 8 28
  50. 50. Keep Alive11 8 28
  51. 51. How to Use11 8 28
  52. 52. # npm install socket.io11 8 28
  53. 53. Point 1 Event11 8 28
  54. 54. sample ( server ) var app = require(express).createServer()   , io = require(socket.io).listen(app); app.listen(80); app.get(/, function (req, res) {   res.sendfile(__dirname + /index.html); }); io.sockets.on(connection, function (socket) {   socket.emit(msg, { hello: world });   socket.on(control, function (data) {     console.log(data);   }); });11 8 28
  55. 55. sample ( client ) <script src="/socket.io/socket.io.js"></script> <script>   var socket = io.connect(http://localhost);   socket.on(msg, function (data) {     console.log(data);     socket.emit(control, { my: data });   }); </script>11 8 28
  56. 56. Point 2 namespace11 8 28
  57. 57. Server var io = require(socket.io).listen(80); var chat = io   .of(/chat)   .on(connection, function (socket) { // ---------------   }); var news = io   .of(/news)   .on(connection, function (socket) { // ---------------   }); Client   var chat = io.connect(http://localhost/chat)   chat.on(connect, function () {     chat.emit(hi!);   });11 8 28
  58. 58. Point 3 storing data (server side)11 8 28
  59. 59. var io = require(socket.io).listen(80); io.sockets.on(connection, function (socket) {   socket.on(set nickname, function (name) {     socket.set(nickname, name, function () {       socket.emit(ready);     });   });   socket.on(msg, function () {     socket.get(nickname, function (err, name) {       console.log(Chat message by , name);     });   }); });11 8 28
  60. 60. Point 4 broadcast11 8 28
  61. 61. emit() emit() broadcast.emit()11 8 28
  62. 62. Point 5 transports11 8 28
  63. 63. var options = {transports: [‘websocket’, ‘xhr-polling’]}; var socket = io.connect(url, options);11 8 28
  64. 64. Agenda a2c WebSocket camera (teacher) Comet Deep Inside Socket.io by @os0x Coding pattern my son penguin11 8 28
  65. 65. UI independent coding11 8 28
  66. 66. I don’t like this ;-( $("#input").change(function(e){ socket.emit(‘mesg’, $(this).val()); }); socket.on(‘mesg’ function(data){ $(“#out”).text(data); });11 8 28
  67. 67. I like // UI part // ------------------ var render = function(msg){ this } $("#out").text(msg); // output Style ;-) $("#input").change(function(e){ var mesg_ = $(this).val(); // input render(mesg_, "me"); $(this).trigger("changed", [mesg_]); // custom event }); // socket.io part // ------------------ socket.on(connect, function(e){ render("connected"); socket.on(message, function(data){ render(data, "someone"); }); $("#input").bind("changed", function(e, msg){ socket.emit("message", msg); }); });11 8 28
  68. 68. why? unit test11 8 28
  69. 69. keyword : multi device11 8 28
  70. 70. WebSocket !! PC Web WebSocket11 8 28
  71. 71. Demo : favorite app. + bookmarklet w/ socket.io http://chromium.googlecode.com/svn/trunk/samples/audio/o3d-webgl-samples/pool.html α11 8 28
  72. 72. Bookmarklet !! (function(){ var script = document.createElement(script); script.src="http://localhost:40001/socket.io/socket.io.js"; document.body.appendChild(script); var timer = setInterval(function(){ if(io){ start(); clearInterval(timer);} },100); // Main function function start(){ var socket = io.connect("http://localhost:40001/pool", {transports:["xhr-polling"]}); socket.on("connect", function(){ socket.on("move", function(obj){ // pool }); socket.on("startShoot", function(){ // }); socket.on("shoot", function(){ finishShooting(); // }); }); } })();11 8 28
  73. 73. $.bind() js render() HTML/ CSS11 8 28
  74. 74. $.bind() js render() HTML/ CSS11 8 28
  75. 75. $.bind() js render() HTML/ CSS Socket.io11 8 28
  76. 76. $.bind() js render() HTML/ CSS $.trigger() Socket.io socket.emit() socket.on()11 8 28
  77. 77. Web Web11 8 28
  78. 78. WebSocket → RealTime Web Comet socket.io Web RealTime Web11 8 28
  79. 79. Appendix : Nice blog http://d.hatena.ne.jp/Jxck/20110730/131204260311 8 28
  80. 80. Appendix : Magic Words process.on(uncaughtException, function(err) { console.log(err); });11 8 28
  81. 81. http://www.flickr.com/photos/jenosaur/4051305996/11 8 28

×