Your SlideShare is downloading. ×
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

969

Published on

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

No Downloads
Views
Total Views
969
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

×