Your SlideShare is downloading. ×
0
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
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
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
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
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
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 worshop Realtime - Socket.io

1,953

Published on

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

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

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

No Downloads
Views
Total Views
1,953
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
70
Comments
0
Likes
4
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
  • \n
  • Node 開發目前就像是積木一樣,需要自己拼湊很多東西都要靠自己去組合,實驗,討論。\n\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • CPU\n
  • MEM\n\n
  • user \n
  • \n
  • 前後端都一起寫 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
  • 非阻塞、事件驅動?跟大家說明一次\n
  • 非阻塞、事件驅動?跟大家說明一次\n
  • 非阻塞、事件驅動?跟大家說明一次\n
  • \n
  • \n
  • Transcript

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

    ×