1. WebSocket + Node.js 2011/8/28 2 kadoppe 1

2. ! kadoppe ! Twitter twitter.com/kadoppe ! Blog www.kadoppe.net! iOS, Web, etc.! HTML5-West.jp ! about.me/kadoppe2 3. WebSocket 3 4. ! WebSocket! WebSocket! WebSocket! ! WebSocket + Node.js4 5. ! WebSocket! WebSocket! WebSocket! ! WebSocket + Node.js5 6. WebSocket! Web ! HTML5 ! 6 7. ! 7 8. ! TCPnot HTTP ! TCP! 80 or 443! UTF-8 or ! Web8 9. ! WebSocket! WebSocket! WebSocket! ! WebSocket + Node.js9 10. Web! ! Web ! ! ! ! ! 10 11. WebSocket = Web 11 12. 12 13. Web13 14. ! WebSocket! WebSocket! WebSocket! ! WebSocket + Node.js14 15. ! ! XMLHttpRequestPolling ! CometLong Polling HTTPWeb15 16. HTTP vs. WebSocket 16 17. HTTP! HTTPHTTP17 18. HTTP! HTTP ! ! 18 19. WebSocket! TCP TCP19 20. WebSocket! ! ! 20 21. Demo! WebSocket Comparison with http | Ericsson Labs http://www.youtube.com/watch?v=Z897fkPn7Rw 21 22. ! WebSocket! WebSocket! WebSocket! ! WebSocket + Node.js22 23. WebSocket! The WebSocket Protocol! ! IETF2011/7/11 Last Call! The WebSocket API! JavaScript API! W3C23 24. (PC)IE FirefoxChrome Safari Opera hixie-75 45.0.0hixie-76, 4()65.0.111()hybi-006 hybi-07 (Prex) HTML5 hybi-09Labs hybi-10 7 14(Last Call) (Prex)24 25. ()iOSAndroidBrackBerry hixie-76, 4.2 Firefox 7 OS7hybi-00 Opera mobile 25 26. ! Node.js! Socket.io! Node Websocket Server (hybi-00)! WebSocket-Node (hybi-07, hybi-09, hybi-10)! Java! Jetty (hixie-75, hybi-00, hybi-07)! CometD! PHP! phpwebsocket! Python! pywebsocket (hixie-75, hybi-00, hybi-10)! 26 27. ! WebSocket! WebSocket! WebSocket! ! WebSocket + Node.js27 28. + Live Coding28 29. ! ! ! Send! 29 30. ! ! Google Chrome 13 ! jQuery 1.6.1! ! Node.js v0.4.10 ! Express Web30 31. Node.js! JavaScript! GoogleJavaScriptV8 ! ! ! ! I/O31 32. ! ! chat.html ! chat.js! ! app.js 32 33. ! A! Node WebSocket Server ! WebSocket API! B! Socket.IO ! Web! C! Pusher ! WebSocketWebSocketWeb33 34. ! ! ! ! GitHub https://github.com/kadoppe/html5nado-websocket34 35. A! Node WebSocket Server ! WebSocket ! Node.js http://static.brandedcode.com/nws-docs/35 36. WebSocket WebSocket Node API WebSocket Server 36 37. ! // !var ws = require(websocket-server); !!var server = ws.createServer();!server.listen(80); // 80!! server.addListener("connection", function(connection){ !!connection.addListener("message", function(msg){ !! !// ! !!! !server.broadcast(msg);!!}); !});!37 38. (WebSocket API)! WebSocketvar ws = new WebSocket(ws://example.com/chat/);!! ws.onopen = function() {};!ws.onclose = function() {};!ws.onmessage = function() {};!ws.onerror = function() {};!! ws.send(message);!ws.close();!38 39. A 39 40. A 40 41. ! ! IE! onmessage (WebSocket API) ! 41 42. B! Socket.IO! Node.js! ! IE5.5 ! http://socket.io/ 42 43. WebSocketSocket.IOSocket.IO 43 44. ! var io = require(socket.io).listen(80)!!!! io.sockets.on(connection, function (socket) {!socket.on(message, function(message) {!! !// !! !io.sockets.send(message);!!});});!!44 45. ! !!! Socket.IOvar socket = io.connect(ws://example.com);!! socket.on(message, function (data) {!!// ...!socket.send(message);!});!45 46. B 46 47. B 47 48. ! ! ! ! WebSocket ! Heroku48 49. C! Pusher! WebSocket ! 2010 ! WebSocket Flash Socket ! PUSHWebSocket http://pusher.com/49 50. WebSocket Pusher HTTP POSTREST APINode.jspusher 50 51. ! Pushervar Pusher = require(pusher);!var pusher = new Pusher({!!appId: YOUR_APP_ID, // Pusher!!appKey: YOUR_APP_KEY,!!secret: YOUR_APP_SECRET!});!var channel = pusher.channel(chat); // !!! Pusherchannel.trigger(message, data);!! https://github.com/fabrik42/pusher51 52. ! !!! Pushervar pusher = new Pusher(YOUR_APP_KEY);!var channel = pusher.subscribe(chat);!! channel.bind(message, function(data) {!!//!});!52 53. C 53 54. C 54 55. ! ! ! 55 56. ! WebSocket! Web ! ! Node.js + Web! Lets try!! 56 57. ! The WebSocket protocol http://tools.ietf.org/html/draft-ietf-hybi- thewebsocketprotocol-10! The WebSocket API http://dev.w3.org/html5/websockets/ 57 58. 58