The document discusses using Socket.io to add real-time capabilities to web applications. It provides an overview of Socket.io and how to install and use it with Node.js. Examples are given of emitting and receiving events, broadcasting to all connections, and setting up Socket.io with Express.

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