Your SlideShare is downloading. ×
0
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Node realtime part
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Node realtime part

1,003

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,003
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. MAKE WEB REAL RealTime Socket.io Caesar Chi http://about.me/clonn Saturday, April 19, 14
  • 2. Caesar Chi clonncd Saturday, April 19, 14
  • 3. http://www.flickr.com/photos/kent-chen/6612953485/sizes/l/in/photostream/ Saturday, April 19, 14
  • 4. REAL TIME? Saturday, April 19, 14
  • 5. Saturday, April 19, 14
  • 6. 考慮? Saturday, April 19, 14
  • 7. http://www.flickr.com/photos/goldentime/4089413847/sizes/z/in/photostream/ Saturday, April 19, 14
  • 8. 效能 Saturday, April 19, 14
  • 9. Saturday, April 19, 14
  • 10. 開發成本 Saturday, April 19, 14
  • 11. Saturday, April 19, 14
  • 12. http://socket.io/ Saturday, April 19, 14
  • 13. socket.ioinstall Saturday, April 19, 14
  • 14. •Socket.io •Socket.io -client Saturday, April 19, 14
  • 15. Saturday, April 19, 14
  • 16. •Chrome •FireFox •IE •Mobile Saturday, April 19, 14
  • 17. • WebSocket • Adobe® Flash® Socket • AJAX long polling • AJAX multipart streaming • Forever Iframe • JSONP Polling Saturday, April 19, 14
  • 18. Simple Code https://gist.github.com/4049817 Saturday, April 19, 14
  • 19. var io = require('socket.io').listen(80); io.sockets.on('connection', function (socket) {   socket.emit('news', { hello: 'world' });   socket.on('my other event', function (data) {     console.log(data);   }); });  var socket = io.connect();   socket.on('news', function (data) {     console.log(data);     socket.emit('my other event', { my: 'data' });   }); Saturday, April 19, 14
  • 20. var  app  =  require('http').createServer(handler)    ,  io  =  require('socket.io').listen(app)    ,  fs  =  require('fs') var  socketio  =  require('socket.io'),        io; function  handler  (req,  res)  {    fs.readFile(__dirname  +  '/index.html',    function  (err,  data)  {        if  (err)  {            res.writeHead(500);            return  res.end('Error  loading  index.html');        }              res.writeHead(200);        res.end(data);    });   } Saturday, April 19, 14
  • 21. 反饋式修改 Saturday, April 19, 14
  • 22. with Express Saturday, April 19, 14
  • 23. server  =  http.createServer(app); server.listen(app.get('port'),  function(){    console.log("Express  server  listening  on  port  "  +  app.get('port')); }); require('./io.server').io(server); <script  type="text/javascript"  src="/socket.io/socket.io.js"></script> <script  src="/javascripts/io.client.js"></script> Saturday, April 19, 14
  • 24. var  socketio  =  require('socket.io'),        io; exports.io  =  function  (server)  {    io  =  socketio.listen(server);    io.sockets.on('connection',  function  (socket)  {        socket.emit('init',  {            id:  socket.id        });    }); }; Saturday, April 19, 14
  • 25.  var  socket  =  io.connect(),  socket.on('init',  function  (data)  {      concole.log(data);  }); Saturday, April 19, 14
  • 26. 廣播事件 Saturday, April 19, 14
  • 27. io.sockets.on('connection', function (socket) { socket.broadcast.emit('user connected'); }); 廣播事件(沒有自己) Saturday, April 19, 14
  • 28. Saturday, April 19, 14
  • 29. Saturday, April 19, 14
  • 30. io.sockets.on('connection', function (socket) { io.sockets.emit('user connected'); }); 廣播事件(有自己) Saturday, April 19, 14
  • 31. Saturday, April 19, 14
  • 32. Saturday, April 19, 14
  • 33. Saturday, April 19, 14
  • 34. 設定事件 https://github.com/LearnBoost/Socket.IO/wiki/Configuring- Socket.IO Saturday, April 19, 14
  • 35. io.configure('production',  function(){    io.enable('browser  client  etag');    io.set('log  level',  1);    io.set('transports',  [        'websocket'    ,  'flashsocket'    ,  'htmlfile'    ,  'xhr-­‐polling'    ,  'jsonp-­‐polling'    ]); }); io.configure('development',  function(){    io.set('transports',  ['websocket']); }); Saturday, April 19, 14
  • 36. io.configure('production',  function(){    io.enable('browser  client  etag');    io.set('log  level',  1);    io.set('transports',  [        'websocket'    ,  'flashsocket'    ,  'htmlfile'    ,  'xhr-­‐polling'    ,  'jsonp-­‐polling'    ]); }); io.configure('development',  function(){    io.set('transports',  ['websocket']); }); NODE_ENV=production  node  app.js Saturday, April 19, 14
  • 37. io.configure('production',  function(){    io.enable('browser  client  etag');    io.set('log  level',  1);    io.set('transports',  [        'websocket'    ,  'flashsocket'    ,  'htmlfile'    ,  'xhr-­‐polling'    ,  'jsonp-­‐polling'    ]); }); io.configure('development',  function(){    io.set('transports',  ['websocket']); }); NODE_ENV=production  node  app.js NODE_ENV=development  node  app.js Saturday, April 19, 14
  • 38. 例如 Saturday, April 19, 14
  • 39. // assuming io is the Socket.IO server object io.configure(function () { io.set("transports", ["xhr-polling"]); io.set("polling duration", 10); }); Saturday, April 19, 14
  • 40. 授權設定 https://github.com/LearnBoost/socket.io/wiki/Authorizing Saturday, April 19, 14
  • 41. handshake Saturday, April 19, 14
  • 42. Cookie Saturday, April 19, 14
  • 43. {      headers:  req.headers               //  <Object>  the  headers  of  the  request  ,  time:  (new  Date)  +''               //  <String>  date  time  of  the  connection  ,  address:  socket.address()     //  <Object>  remoteAddress  and  remotePort  object  ,  xdomain:  !!headers.origin     //  <Boolean>  was  it  a  cross  domain  request?  ,  secure:  socket.secure             //  <Boolean>  https  connection  ,  issued:  +date                             //  <Number>  EPOCH  of  when  the  handshake  was  created  ,  url:  request.url                     //  <String>  the  entrance  path  of  the  request  ,  query:  data.query                     //  <Object>  the  result  of  url.parse().query  or  a  empty  object } Saturday, April 19, 14
  • 44. 驗證、串接資料 Saturday, April 19, 14
  • 45. var  io  =  require('socket.io').listen(80); io.configure(function  (){    io.set('authorization',  function  (handshakeData,  callback)  {                handshakeData.userData  =  {                        ‘name’:  ‘Caesar’,                        ‘age’:  18                };                callback(null,  true);  //  error  first  callback  style      }); }); 接上 User Connection Saturday, April 19, 14
  • 46. io.sockets.on('connection',  function  (socket)  {         console.log(socket.handshake.userData); }); User Data 取得 Saturday, April 19, 14
  • 47. NODE 到底是什麼? Saturday, April 19, 14
  • 48. Saturday, April 19, 14
  • 49. Saturday, April 19, 14
  • 50. Saturday, April 19, 14
  • 51. Saturday, April 19, 14
  • 52. Saturday, April 19, 14
  • 53. 範例 • https://github.com/clonn/socket-server • https://github.com/clonn/comet-todo-list Saturday, April 19, 14
  • 54. https://gist.github.com/4049817 https://github.com/clonn/socket-server https://github.com/clonn/comet-todo-list Saturday, April 19, 14

×