Node worshop Realtime - Socket.io
Upcoming SlideShare
Loading in...5
×
 

Node worshop Realtime - Socket.io

on

  • 2,127 views

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

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

Statistics

Views

Total Views
2,127
Views on SlideShare
2,120
Embed Views
7

Actions

Likes
3
Downloads
60
Comments
0

2 Embeds 7

http://localhost 5
http://nodeslide.herokuapp.com 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

Node worshop Realtime - Socket.io Node worshop Realtime - Socket.io Presentation Transcript

  • 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 });  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 });   });
  • 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); });}
  • 反饋式修改
  • with Express
  • 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>
  • 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    });  });};
  •  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, [ websocket , flashsocket , htmlfile , xhr-polling , jsonp-polling ]);});io.configure(development, function(){ io.set(transports, [websocket]);});
  • 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]);});
  • 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
  • 例如
  • // assuming io is the Socket.IO server objectio.configure(function () { io.set("transports", ["xhr-polling"]); io.set("polling duration", 10);});
  • 授權設定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 , 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}
  • 驗證、串接資料
  • 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
  • io.sockets.on(connection, function (socket) { console.log(socket.handshake.userData);}); User Data 取得
  • 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