Your SlideShare is downloading. ×
  • Like
Node worshop Realtime - Socket.io
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Node worshop Realtime - Socket.io

  • 1,799 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,799
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
68
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