SocketIO歷史、發展、基礎介紹，並展示Node.js SocketIO範例

1. 淺談Socket.IO
MiCloud - Simon

2. 大綱
● SocketIO的歷史與發展
● Node.js的SocketIO套件介紹
○ Server Socket
○ Client Socket
● 第一個SocketIO實作
● SocketIO範例演示 - SocketIO Talk

3. Communicate between Server to Client

4. <hr/>
<div id="tt">----</div>
<hr/>
setInterval(function(){
$('#tt').html(
new Date()
);
}, 1000);
古早的作法 - Polling (輪循)
Client Server
DATA
HEADER

5. 古早的作法 - Comet

6. HTML5 - WebSocket
● WebSocket是HTML5開始提供的一種瀏覽器
與伺服器間進行全雙工通訊的網路技術
● WebSocket通訊協定於2011年被IETF定為標
準 RFC 6455，WebSocketAPI被W3C定為標
準。

7. Browser支援(wikipedia)
● Google Chrome：
Chrome 4 及之後的版本都支援websocket，版本14開始
支援Version 13協定。
● Safari：
iOS4 以及 5 上的safari使用的舊版的WebSocket；iOS 6
開始支援Version 13
● Mozilla Firefox：
版本4之後支援websocket，版本6開始支援Version 13。
● Opera：
Opera 10.7和11.0的預覽版本中也支援了websocket。
● Internet Explorer：
從版本10開始支援WebSocket。

9. First SocketIO App
Server
Client
單獨啟動SocketIO Server的方式
透過emit發送訊息至client端
監聽”my other event”事件，進行處置
載入SocketIO套件Library
建立SocketIO連線
聽取事件，進行反應動作

10. Enhance First App
● 修改為Server持續push資料至Client
● Push的資料內容加上時間參數

11. 其他SocketIO啟動方式 - HTTP Server
var app = require('http').createServer(handler)
, io = require('socket.io').listen(app)
app.listen(8088);
function handler (req, res) {
res.writeHead(200);
res.end(....);
}
io.sockets.on('connection', function (socket) {
...

12. 其他SocketIO啟動方式 - Express
var app = require('express')()
, server = require('http').createServer(app)
, io = require('socket.io').listen(server);
server.listen(80);
app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');
});
io.sockets.on('connection', function (socket) {
…..

13. 其他範例
http://socket.io/#how-to-use

14. 進階的SocketIO範例 - SocketIO Talk
function handler (req, res) {
//implement of reading chat.html
}
io.sockets.on('connection', function (socket) {
socket.on('addme',function(username) {
//implement of emit event user add
});
socket.on('sendchat', function(data) {
//implement of emit event of chat
});
socket.on('disconnect', function() {
//implement of emit evnet of disconnect
});
});

15. 進階的SocketIO範例 - SocketIO Talk
<script>
var socket = io.connect('/');
socket.on('connect', function() {
//implement of connect event
});
socket.on('chat',function(username, data) {
//implement of chat event receive
});
$(document).ready(function(){
$('#sendtext').click(function(){
//implement of submit chat
});
});
</script>

16. MiCloud Team@Yahoo Hackday 2012
https://www.youtube.com/watch?v=EKuYfk5gnzE&feature=em-share_video_user

17. Today’s Code
git@github.com:peihsinsu/class-nodejs-socketio.git

18. Q&A...