node realtime part
Embed Size (px)
DESCRIPTION
TRANSCRIPT
MAKE WEB REALRealTime Socket.io
Caesar Chihttp://about.me/clonn
Saturday, April 19, 14
Caesar Chi
clonncdSaturday, April 19, 14
http://www.flickr.com/photos/kent-chen/6612953485/sizes/l/in/photostream/Saturday, April 19, 14
REAL TIME?
Saturday, April 19, 14
Saturday, April 19, 14
考慮？
Saturday, April 19, 14
http://www.flickr.com/photos/goldentime/4089413847/sizes/z/in/photostream/
Saturday, April 19, 14
效能
Saturday, April 19, 14
Saturday, April 19, 14
開發成本Saturday, April 19, 14
Saturday, April 19, 14
•Socket.io
•Socket.io-client
Saturday, April 19, 14
Saturday, April 19, 14
•Chrome
•FireFox
•IE
•MobileSaturday, April 19, 14
• WebSocket
• Adobe® Flash® Socket
• AJAX long polling
• AJAX multipart streaming
• Forever Iframe
• JSONP Polling
Saturday, April 19, 14
Simple Codehttps://gist.github.com/4049817
Saturday, April 19, 14
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' }); });
Saturday, April 19, 14
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); }); }
Saturday, April 19, 14
反饋式修改
Saturday, April 19, 14
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>
Saturday, April 19, 14
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 }); });};
Saturday, April 19, 14
var socket = io.connect(),
socket.on('init', function (data) { concole.log(data); });
Saturday, April 19, 14
廣播事件
Saturday, April 19, 14
io.sockets.on('connection', function (socket) { socket.broadcast.emit('user connected');});
廣播事件(沒有自己)
Saturday, April 19, 14
Saturday, April 19, 14
Saturday, April 19, 14
io.sockets.on('connection', function (socket) { io.sockets.emit('user connected');});
廣播事件(有自己)
Saturday, April 19, 14
Saturday, April 19, 14
Saturday, April 19, 14
Saturday, April 19, 14
設定事件https://github.com/LearnBoost/Socket.IO/wiki/Configuring-
Socket.IO
Saturday, April 19, 14
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']);});
Saturday, April 19, 14
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
Saturday, April 19, 14
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=development node app.js
Saturday, April 19, 14
例如
Saturday, April 19, 14
// assuming io is the Socket.IO server objectio.configure(function () { io.set("transports", ["xhr-polling"]); io.set("polling duration", 10); });
Saturday, April 19, 14
授權設定https://github.com/LearnBoost/socket.io/wiki/Authorizing
Saturday, April 19, 14
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}
Saturday, April 19, 14
驗證、串接資料
Saturday, April 19, 14
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
Saturday, April 19, 14
io.sockets.on('connection', function (socket) {
console.log(socket.handshake.userData);});
User Data 取得
Saturday, April 19, 14
NODE 到底是什麼？
Saturday, April 19, 14
Saturday, April 19, 14
Saturday, April 19, 14
Saturday, April 19, 14
Saturday, April 19, 14
Saturday, April 19, 14
範例
• https://github.com/clonn/socket-server
• https://github.com/clonn/comet-todo-list
Saturday, April 19, 14
https://gist.github.com/4049817https://github.com/clonn/socket-serverhttps://github.com/clonn/comet-todo-list
Saturday, April 19, 14