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

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?

6. 考慮？

7. http://www.flickr.com/photos/goldentime/4089413847/sizes/z/in/photostream/

8. 效能

9. 極限

10. 極限

11. 極限

12. 開發成本

14. 中國

15. 組
模

16. 組
模

17. http://socket.io/

18. install socket.io

19. •Socket.io
•Socket.io
-client

21. •Chrome
•FireFox
•IE
•Mobile

22. • WebSocket
• Adobe® Flash® Socket
• AJAX long polling
• AJAX multipart streaming
• Forever Iframe
• JSONP Polling

23. Simple Code
https://gist.github.com/4049817

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

25. 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);
});
}

26. 反饋式修改

27. with Express

28. 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>

29. 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
});
});
};

30. var socket = io.connect(),
socket.on('init', function (data) {
concole.log(data);
});

31. 廣播事件

32. io.sockets.on('connection', function (socket) {
socket.broadcast.emit('user connected');
});
廣播事件(沒有自己)

35. io.sockets.on('connection', function (socket) {
io.sockets.emit('user connected');
});
廣播事件(有自己)

39. 設定事件
https://github.com/LearnBoost/Socket.IO/wiki/Configuring-
Socket.IO

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

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

42. 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

43. 例如

44. // assuming io is the Socket.IO server object
io.configure(function () {
io.set("transports", ["xhr-polling"]);
io.set("polling duration", 10);
});

45. 授權設定
https://github.com/LearnBoost/socket.io/wiki/Authorizing

46. handshake

47. Cookie

48. {
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
}

49. 驗證、串接資料

50. 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

51. io.sockets.on('connection', function (socket) {
console.log(socket.handshake.userData);
});
User Data 取得

52. NODE 到底是什麼？

58. 範例
• https://github.com/clonn/socket-server
• https://github.com/clonn/comet-todo-list

59. https://gist.github.com/4049817
https://github.com/clonn/socket-server
https://github.com/clonn/comet-todo-list