MAKE WEB REAL    RealTime Socket.io                  Caesar Chi                  http://about.me/clonn
http://www.flickr.com/photos/kent-chen/6612953485/sizes/l/in/photostream/
REAL TIME?
考慮?
http://www.flickr.com/photos/goldentime/4089413847/sizes/z/in/photostream/
效能
極限
極限
極限
開發成本
中國
組模
組模
http://socket.io/
install socket.io
•Socket.io•Socket.io-client
•Chrome•FireFox•IE•Mobile
•   WebSocket•   Adobe® Flash® Socket•   AJAX long polling•   AJAX multipart streaming•   Forever Iframe•   JSONP Polling
Simple Codehttps://gist.github.com/4049817
var io = require(socket.io).listen(80);io.sockets.on(connection, function (socket) {  socket.emit(news, { hello: world });...
var app = require(http).createServer(handler) , io = require(socket.io).listen(app) , fs = require(fs)var socketio = requi...
反饋式修改
with Express
server = http.createServer(app);  server.listen(app.get(port), function(){    console.log("Express server listening on por...
var socketio = require(socket.io),    io;exports.io = function (server) {  io = socketio.listen(server);  io.sockets.on(co...
 var socket = io.connect(), socket.on(init, function (data) {   concole.log(data); });
廣播事件
io.sockets.on(connection, function (socket) {  socket.broadcast.emit(user connected);});廣播事件(沒有自己)
io.sockets.on(connection, function (socket) {  io.sockets.emit(user connected);}); 廣播事件(有自己)
設定事件https://github.com/LearnBoost/Socket.IO/wiki/Configuring-                        Socket.IO
io.configure(production, function(){  io.enable(browser client etag);  io.set(log level, 1);  io.set(transports, [    webso...
io.configure(production, function(){  io.enable(browser client etag);  io.set(log level, 1);  io.set(transports, [    webso...
io.configure(production, function(){  io.enable(browser client etag);  io.set(log level, 1);  io.set(transports, [    webso...
例如
// assuming io is the Socket.IO server objectio.configure(function () {  io.set("transports", ["xhr-polling"]);  io.set("p...
授權設定https://github.com/LearnBoost/socket.io/wiki/Authorizing
handshake
Cookie
{   headers: req.headers// <Object> the headers of the request , time: (new Date) +// <String> date time of the connection...
驗證、串接資料
var io = require(socket.io).listen(80);io.configure(function (){ io.set(authorization, function (handshakeData, callback) {...
io.sockets.on(connection, function (socket) {      console.log(socket.handshake.userData);});                      User Da...
NODE 到底是什麼?
範例• https://github.com/clonn/socket-server• https://github.com/clonn/comet-todo-list
https://gist.github.com/4049817https://github.com/clonn/socket-serverhttps://github.com/clonn/comet-todo-list
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Upcoming SlideShare
Loading in …5
×

Node worshop Realtime - Socket.io

2,082
-1

Published on

即時效果範例,Socket.io 講解,最後附上 Demo 連結

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

No Downloads
Views
Total Views
2,082
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
71
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • Node &amp;#x958B;&amp;#x767C;&amp;#x76EE;&amp;#x524D;&amp;#x5C31;&amp;#x50CF;&amp;#x662F;&amp;#x7A4D;&amp;#x6728;&amp;#x4E00;&amp;#x6A23;&amp;#xFF0C;&amp;#x9700;&amp;#x8981;&amp;#x81EA;&amp;#x5DF1;&amp;#x62FC;&amp;#x6E4A;&amp;#x5F88;&amp;#x591A;&amp;#x6771;&amp;#x897F;&amp;#x90FD;&amp;#x8981;&amp;#x9760;&amp;#x81EA;&amp;#x5DF1;&amp;#x53BB;&amp;#x7D44;&amp;#x5408;&amp;#xFF0C;&amp;#x5BE6;&amp;#x9A57;&amp;#xFF0C;&amp;#x8A0E;&amp;#x8AD6;&amp;#x3002;\n\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • CPU\n
  • MEM\n\n
  • user \n
  • \n
  • &amp;#x524D;&amp;#x5F8C;&amp;#x7AEF;&amp;#x90FD;&amp;#x4E00;&amp;#x8D77;&amp;#x5BEB; JavaScript\n
  • \n
  • \n
  • \n
  • \n
  • client, server , socket.io version\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • read file parts\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • &amp;#x975E;&amp;#x963B;&amp;#x585E;&amp;#x3001;&amp;#x4E8B;&amp;#x4EF6;&amp;#x9A45;&amp;#x52D5;&amp;#xFF1F;&amp;#x8DDF;&amp;#x5927;&amp;#x5BB6;&amp;#x8AAA;&amp;#x660E;&amp;#x4E00;&amp;#x6B21;\n
  • &amp;#x975E;&amp;#x963B;&amp;#x585E;&amp;#x3001;&amp;#x4E8B;&amp;#x4EF6;&amp;#x9A45;&amp;#x52D5;&amp;#xFF1F;&amp;#x8DDF;&amp;#x5927;&amp;#x5BB6;&amp;#x8AAA;&amp;#x660E;&amp;#x4E00;&amp;#x6B21;\n
  • &amp;#x975E;&amp;#x963B;&amp;#x585E;&amp;#x3001;&amp;#x4E8B;&amp;#x4EF6;&amp;#x9A45;&amp;#x52D5;&amp;#xFF1F;&amp;#x8DDF;&amp;#x5927;&amp;#x5BB6;&amp;#x8AAA;&amp;#x660E;&amp;#x4E00;&amp;#x6B21;\n
  • \n
  • \n
  • Node worshop Realtime - Socket.io

    1. 1. MAKE WEB REAL RealTime Socket.io Caesar Chi http://about.me/clonn
    2. 2. http://www.flickr.com/photos/kent-chen/6612953485/sizes/l/in/photostream/
    3. 3. REAL TIME?
    4. 4. 考慮?
    5. 5. http://www.flickr.com/photos/goldentime/4089413847/sizes/z/in/photostream/
    6. 6. 效能
    7. 7. 極限
    8. 8. 極限
    9. 9. 極限
    10. 10. 開發成本
    11. 11. 中國
    12. 12. 組模
    13. 13. 組模
    14. 14. http://socket.io/
    15. 15. install socket.io
    16. 16. •Socket.io•Socket.io-client
    17. 17. •Chrome•FireFox•IE•Mobile
    18. 18. • WebSocket• Adobe® Flash® Socket• AJAX long polling• AJAX multipart streaming• Forever Iframe• JSONP Polling
    19. 19. Simple Codehttps://gist.github.com/4049817
    20. 20. 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 });   });
    21. 21. 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); });}
    22. 22. 反饋式修改
    23. 23. with Express
    24. 24. 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>
    25. 25. 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    });  });};
    26. 26.  var socket = io.connect(), socket.on(init, function (data) {   concole.log(data); });
    27. 27. 廣播事件
    28. 28. io.sockets.on(connection, function (socket) { socket.broadcast.emit(user connected);});廣播事件(沒有自己)
    29. 29. io.sockets.on(connection, function (socket) { io.sockets.emit(user connected);}); 廣播事件(有自己)
    30. 30. 設定事件https://github.com/LearnBoost/Socket.IO/wiki/Configuring- Socket.IO
    31. 31. 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]);});
    32. 32. io.configure(production, function(){ io.enable(browser client etag); io.set(log level, 1); io.set(transports, [ websocket , flashsocket NODE_ENV=production node app.js , htmlfile , xhr-polling , jsonp-polling ]);});io.configure(development, function(){ io.set(transports, [websocket]);});
    33. 33. io.configure(production, function(){ io.enable(browser client etag); io.set(log level, 1); io.set(transports, [ websocket , flashsocket NODE_ENV=production node app.js , htmlfile , xhr-polling , jsonp-polling ]);});io.configure(development, function(){ io.set(transports, [websocket]);}); NODE_ENV=development node app.js
    34. 34. 例如
    35. 35. // assuming io is the Socket.IO server objectio.configure(function () { io.set("transports", ["xhr-polling"]); io.set("polling duration", 10);});
    36. 36. 授權設定https://github.com/LearnBoost/socket.io/wiki/Authorizing
    37. 37. handshake
    38. 38. Cookie
    39. 39. { 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}
    40. 40. 驗證、串接資料
    41. 41. 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
    42. 42. io.sockets.on(connection, function (socket) { console.log(socket.handshake.userData);}); User Data 取得
    43. 43. NODE 到底是什麼?
    44. 44. 範例• https://github.com/clonn/socket-server• https://github.com/clonn/comet-todo-list
    45. 45. https://gist.github.com/4049817https://github.com/clonn/socket-serverhttps://github.com/clonn/comet-todo-list
    1. A particular slide catching your eye?

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

    ×