Your SlideShare is downloading. ×
0
MAKE WEB REAL
RealTime Socket.io
Caesar Chi
http://about.me/clonn
Saturday, April 19, 14
Caesar Chi
clonncd
Saturday, April 19, 14
http://www.flickr.com/photos/kent-chen/6612953485/sizes/l/in/photostream/
Saturday, April 19, 14
REAL TIME?
Saturday, April 19, 14
Saturday, April 19, 14
考慮?
Saturday, April 19, 14
http://www.flickr.com/photos/goldentime/4089413847/sizes/z/in/photostream/
Saturday, April 19, 14
效能
Saturday, April 19, 14
Saturday, April 19, 14
開發成本
Saturday, April 19, 14
Saturday, April 19, 14
http://socket.io/
Saturday, April 19, 14
socket.ioinstall
Saturday, April 19, 14
•Socket.io
•Socket.io
-client
Saturday, April 19, 14
Saturday, April 19, 14
•Chrome
•FireFox
•IE
•Mobile
Saturday, April 19, 14
• WebSocket
• Adobe® Flash® Socket
• AJAX long polling
• AJAX multipart streaming
• Forever Iframe
• JSONP Polling
Saturda...
Simple Code
https://gist.github.com/4049817
Saturday, April 19, 14
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: '...
var	
  app	
  =	
  require('http').createServer(handler)
	
  	
  ,	
  io	
  =	
  require('socket.io').listen(app)
	
  	
  ...
反饋式修改
Saturday, April 19, 14
with Express
Saturday, April 19, 14
server	
  =	
  http.createServer(app);
server.listen(app.get('port'),	
  function(){
	
  	
  console.log("Express	
  serve...
var	
  socketio	
  =	
  require('socket.io'),
	
  	
  	
  	
  io;
exports.io	
  =	
  function	
  (server)	
  {
	
  	
  io	...
 var	
  socket	
  =	
  io.connect(),
	
  socket.on('init',	
  function	
  (data)	
  {
	
  	
  	
  concole.log(data);
	
  }...
廣播事件
Saturday, April 19, 14
io.sockets.on('connection', function (socket) {
socket.broadcast.emit('user connected');
});
廣播事件(沒有自己)
Saturday, April 19...
Saturday, April 19, 14
Saturday, April 19, 14
io.sockets.on('connection', function (socket) {
io.sockets.emit('user connected');
});
廣播事件(有自己)
Saturday, April 19, 14
Saturday, April 19, 14
Saturday, April 19, 14
Saturday, April 19, 14
設定事件
https://github.com/LearnBoost/Socket.IO/wiki/Configuring-
Socket.IO
Saturday, April 19, 14
io.configure('production',	
  function(){
	
  	
  io.enable('browser	
  client	
  etag');
	
  	
  io.set('log	
  level',	
...
io.configure('production',	
  function(){
	
  	
  io.enable('browser	
  client	
  etag');
	
  	
  io.set('log	
  level',	
...
io.configure('production',	
  function(){
	
  	
  io.enable('browser	
  client	
  etag');
	
  	
  io.set('log	
  level',	
...
例如
Saturday, April 19, 14
// assuming io is the Socket.IO server object
io.configure(function () {
io.set("transports", ["xhr-polling"]);
io.set("po...
授權設定
https://github.com/LearnBoost/socket.io/wiki/Authorizing
Saturday, April 19, 14
handshake
Saturday, April 19, 14
Cookie
Saturday, April 19, 14
{
	
  	
  	
  headers:	
  req.headers	
  	
  	
  	
  	
  	
  	
  
//	
  <Object>	
  the	
  headers	
  of	
  the	
  request...
驗證、串接資料
Saturday, April 19, 14
var	
  io	
  =	
  require('socket.io').listen(80);
io.configure(function	
  (){
	
  	
  io.set('authorization',	
  functio...
io.sockets.on('connection',	
  function	
  (socket)	
  {
	
  	
  	
  	
  
console.log(socket.handshake.userData);
});
User...
NODE 到底是什麼?
Saturday, April 19, 14
Saturday, April 19, 14
Saturday, April 19, 14
Saturday, April 19, 14
Saturday, April 19, 14
Saturday, April 19, 14
範例
• https://github.com/clonn/socket-server
• https://github.com/clonn/comet-todo-list
Saturday, April 19, 14
https://gist.github.com/4049817
https://github.com/clonn/socket-server
https://github.com/clonn/comet-todo-list
Saturday, ...
Upcoming SlideShare
Loading in...5
×

Node realtime part

1,012

Published on

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

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

No notes for slide

Transcript of "Node realtime part"

  1. 1. MAKE WEB REAL RealTime Socket.io Caesar Chi http://about.me/clonn Saturday, April 19, 14
  2. 2. Caesar Chi clonncd Saturday, April 19, 14
  3. 3. http://www.flickr.com/photos/kent-chen/6612953485/sizes/l/in/photostream/ Saturday, April 19, 14
  4. 4. REAL TIME? Saturday, April 19, 14
  5. 5. Saturday, April 19, 14
  6. 6. 考慮? Saturday, April 19, 14
  7. 7. http://www.flickr.com/photos/goldentime/4089413847/sizes/z/in/photostream/ Saturday, April 19, 14
  8. 8. 效能 Saturday, April 19, 14
  9. 9. Saturday, April 19, 14
  10. 10. 開發成本 Saturday, April 19, 14
  11. 11. Saturday, April 19, 14
  12. 12. http://socket.io/ Saturday, April 19, 14
  13. 13. socket.ioinstall Saturday, April 19, 14
  14. 14. •Socket.io •Socket.io -client Saturday, April 19, 14
  15. 15. Saturday, April 19, 14
  16. 16. •Chrome •FireFox •IE •Mobile Saturday, April 19, 14
  17. 17. • WebSocket • Adobe® Flash® Socket • AJAX long polling • AJAX multipart streaming • Forever Iframe • JSONP Polling Saturday, April 19, 14
  18. 18. Simple Code https://gist.github.com/4049817 Saturday, April 19, 14
  19. 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. 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. 21. 反饋式修改 Saturday, April 19, 14
  22. 22. with Express Saturday, April 19, 14
  23. 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. 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. 25.  var  socket  =  io.connect(),  socket.on('init',  function  (data)  {      concole.log(data);  }); Saturday, April 19, 14
  26. 26. 廣播事件 Saturday, April 19, 14
  27. 27. io.sockets.on('connection', function (socket) { socket.broadcast.emit('user connected'); }); 廣播事件(沒有自己) Saturday, April 19, 14
  28. 28. Saturday, April 19, 14
  29. 29. Saturday, April 19, 14
  30. 30. io.sockets.on('connection', function (socket) { io.sockets.emit('user connected'); }); 廣播事件(有自己) Saturday, April 19, 14
  31. 31. Saturday, April 19, 14
  32. 32. Saturday, April 19, 14
  33. 33. Saturday, April 19, 14
  34. 34. 設定事件 https://github.com/LearnBoost/Socket.IO/wiki/Configuring- Socket.IO Saturday, April 19, 14
  35. 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. 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. 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. 38. 例如 Saturday, April 19, 14
  39. 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. 40. 授權設定 https://github.com/LearnBoost/socket.io/wiki/Authorizing Saturday, April 19, 14
  41. 41. handshake Saturday, April 19, 14
  42. 42. Cookie Saturday, April 19, 14
  43. 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. 44. 驗證、串接資料 Saturday, April 19, 14
  45. 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. 46. io.sockets.on('connection',  function  (socket)  {         console.log(socket.handshake.userData); }); User Data 取得 Saturday, April 19, 14
  47. 47. NODE 到底是什麼? Saturday, April 19, 14
  48. 48. Saturday, April 19, 14
  49. 49. Saturday, April 19, 14
  50. 50. Saturday, April 19, 14
  51. 51. Saturday, April 19, 14
  52. 52. Saturday, April 19, 14
  53. 53. 範例 • https://github.com/clonn/socket-server • https://github.com/clonn/comet-todo-list Saturday, April 19, 14
  54. 54. https://gist.github.com/4049817 https://github.com/clonn/socket-server https://github.com/clonn/comet-todo-list Saturday, April 19, 14
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×