Node realtime part

MAKE WEB REALRealTime Socket.io

Caesar Chihttp://about.me/clonn

Saturday, April 19, 14

http://about.me/clonn

http://about.me/clonn

Caesar Chi

clonncdSaturday, April 19, 14

http://www.flickr.com/photos/kent-chen/6612953485/sizes/l/in/photostream/Saturday, April 19, 14

http://www.flickr.com/photos/kent-chen/6612953485/sizes/l/in/photostream/

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/




效能



開發成本Saturday, April 19, 14


http://socket.io/


http://socket.io/

http://socket.io/

socket.ioinstall


http://socket.io/

http://socket.io/

•Socket.io

•Socket.io-client



•Chrome

•FireFox

•IE

•MobileSaturday, April 19, 14

• WebSocket

• Adobe® Flash® Socket

• AJAX long polling

• AJAX multipart streaming

• Forever Iframe

• JSONP Polling


Simple Codehttps://gist.github.com/4049817


http://socket.io/

http://socket.io/

https://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


http://socket.io/

http://socket.io/

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


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']);});





NODE_ENV=production node app.js





NODE_ENV=production node app.js

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


https://github.com/LearnBoost/socket.io/wiki/Authorizing

https://github.com/LearnBoost/socket.io/wiki/Authorizing

handshakeSaturday, April 19, 14

CookieSaturday, April 19, 14

{ 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://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 realtime part

Art & Photos

nodeenvproduction

browser client

user connected

js saturday

list saturday

photostream

log level

production