標籤：ipad sub rto 下一代 關閉 傳遞 科學 cti href
認識HTML5的WebSocket在HTML5規範中，我最喜歡的Web技術就是正迅速變得流行的WebSocket API。WebSocket提供了一個受歡迎的技術，以替代我們過去幾年一直在用的Ajax技術。這個新的API提供了一個方法，從用戶端使用簡單的文法有效地推動訊息到伺服器。讓我們看一看HTML5的WebSocket API：它可用於用戶端、伺服器端。而且有一個優秀的第三方API，名為Socket.IO。
一、什麼是WebSocket API?
WebSocket API是下一代用戶端-伺服器的非同步通訊方法。該通訊取代了單個的TCP通訊端，使用ws或wss協議，可用於任意的用戶端和伺服器程式。WebSocket目前由W3C進行標準化。WebSocket已經受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等瀏覽器的支援。
WebSocket API最偉大之處在於伺服器和用戶端可以在給定的時間範圍內的任意時刻，相互推送資訊。WebSocket並不限於以Ajax(或XHR)方式通訊，因為Ajax技術需要用戶端發起請求，而WebSocket伺服器和用戶端可以彼此相互推送資訊；XHR受到域的限制，而WebSocket允許跨域通訊。
Ajax技術很聰明的一點是沒有設計要使用的方式。WebSocket為指定目標建立，用於雙向推送訊息。
二、WebSocket API的用法
只專註於用戶端的API，因為每個伺服器端語言有自己的API。下面的程式碼片段是開啟一個串連，為串連建立事件監聽器，中斷連線，訊息時間，發送訊息返回到伺服器，關閉串連。
[Copy to clipboard] [ - ]CODE:// 建立一個Socket執行個體
var socket = new WebSocket(‘ws://localhost:8080‘);
// 開啟Socket
socket.onopen = function(event) {
// 發送一個初始化訊息
socket.send(‘I am the client and I\‘m listening!‘);
// 監聽訊息
socket.onmessage = function(event) {
console.log(‘Client received a message‘,event);
};
// 監聽Socket的關閉
socket.onclose = function(event) {
console.log(‘Client notified socket has closed‘,event);
};
// 關閉Socket....
//socket.close()
};
讓我們來看看上面的初始化片段。參數為URL，ws表示WebSocket協議。onopen、onclose和onmessage方法把事件串連到Socket執行個體上。每個方法都提供了一個事件，以表示Socket的狀態。
onmessage事件提供了一個data屬性，它可以包含訊息的Body部分。訊息的Body部分必須是一個字串，可以進行序列化/還原序列化操作，以便傳遞更多的資料。
WebSocket的文法非常簡單，使用WebSockets是難以置信的容易……除非用戶端不支援WebSocket。IE瀏覽器目前不支援WebSocket通訊。如果你的用戶端不支援WebSocket通訊，下面有幾個後備方案供你使用：
Flash技術 —— Flash可以提供一個簡單的替換。 使用Flash最明顯的缺點是並非所有用戶端都安裝了Flash，而且某些用戶端，如iPhone/iPad，不支援Flash。
AJAX Long-Polling技術 —— 用AJAX的long-polling來類比WebSocket在業界已經有一段時間了。它是一個可行的技術，但它不能最佳化發送的資訊。也就是說，它是一個解決方案，但不是最佳的技術方案。
由於目前的IE等瀏覽器不支援WebSocket，要提供WebSocket的事件處理、返回傳輸、在伺服器端使用一個統一的API，那麼該怎麼辦呢？幸運的是，Guillermo Rauch建立了一個Socket.IO技術。
三、帶Socket.IO的WebSocket
Socket.IO是Guillermo Rauch建立的WebSocket API，Guillermo Rauch是LearnBoost公司的首席技術官以及LearnBoost實驗室的首席科學家。Socket.IO使用檢測功能來判斷是否建立WebSocket串連，或者是AJAX long-polling串連，或Flash等。可快速建立即時的應用程式。Socket.IO還提供了一個NodeJS API，它看起來非常像用戶端API。
建立用戶端Socket.IO
Socket.IO可以從GitHub下載，可以把socket.io.js檔案包含到頁面中：
[Copy to clipboard] [ - ]CODE:<script src="http://cdn.socket.io/stable/socket.io.js"></script>
[/code
此時，Socket.IO在此頁面上是有效，是時候建立Socket了：
[code]
// 建立Socket.IO執行個體，建立串連
var socket= new io.Socket(‘localhost‘,{
port: 8080
});
socket.connect();
// 添加一個串連監聽器
socket.on(‘connect‘,function() {
console.log(‘Client has connected to the server!‘);
});
// 添加一個串連監聽器
socket.on(‘message‘,function(data) {
console.log(‘Received a message from the server!‘,data);
});
// 添加一個關閉串連的監聽器
socket.on(‘disconnect‘,function() {
console.log(‘The client has disconnected!‘);
});
// 通過Socket發送一條訊息到伺服器
function sendMessageToServer(message) {
socket.send(message);
}
Socket.IO簡化了WebSocket API，統一了返回運輸的API。傳輸包括：
WebSocket
Flash Socket
AJAX long-polling
AJAX multipart streaming
IFrame
JSONP polling
你還可以設定任意的Socket.IO構造器的第二個選項，選項包括：
port - 待串連的連接埠
transports - 一個數組，包含不同的傳輸類型
transportOptions - 傳輸的參數使用的對象，帶附加屬性
Socket.IO還提供了由本地WebSocket API提供的普通串連、中斷連線、訊息事件。Socket還提供了封裝每個事件類型的方法。
四、NodeJS和Socket.IO聯合開發
Socket.IO提供的伺服器端解決方案，允許統一的用戶端和伺服器端的API。使用Node，你可以建立一個典型的HTTP伺服器，然後把伺服器的執行個體傳遞到Socket.IO。從這裡，你建立串連、中斷連線、建立訊息監聽器，跟在用戶端一樣。
一個簡單的伺服器端指令碼看起來如下：
[Copy to clipboard] [ - ]CODE:// 需要HTTP 模組來啟動伺服器和Socket.IO
var http= require(‘http‘), io= require(‘socket.io‘);
// 在8080連接埠啟動伺服器
var server= http.createServer(function(req, res){
// 發送HTML的headers和message
res.writeHead(200,{ ‘Content-Type‘: ‘text/html‘ });
res.end(‘<h1>Hello Socket Lover!</h1>‘);
});
server.listen(8080);
// 建立一個Socket.IO執行個體，把它傳遞給伺服器
var socket= io.listen(server);
// 添加一個串連監聽器
socket.on(‘connection‘, function(client){
// 成功！現在開始監聽接收到的訊息
client.on(‘message‘,function(event){
console.log(‘Received message from client!‘,event);
});
client.on(‘disconnect‘,function(){
clearInterval(interval);
console.log(‘Server has disconnected‘);
});
});
你可以運行伺服器部分，假定已安裝了NodeJS，從命令列執行：
[Copy to clipboard] [ - ]CODE:node socket-server.js
現在用戶端和伺服器都能來回推送訊息了！在NodeJS指令碼內，可以使用簡單的JavaScript建立一個定期訊息發送器：
[Copy to clipboard] [ - ]CODE:// 建立一個定期（每5秒）發送訊息到用戶端的發送器
var interval= setInterval(function() {
client.send(‘This is a message from the server! ‘ + new Date().getTime());
},5000);
伺服器端將會每5秒推送訊息到用戶端！
五、dojox.Socket和Socket.IO
Persevere的建立者Kris Zyp建立了dojox.Socket。dojox.Socket以Dojo庫一致的方式封裝了WebSocket API，用於在用戶端不支援WebSocket時，使用long-polling替代。
下面是怎樣在用戶端使用dojox.Socket和在伺服器端使用Socket.IO的例子：
[Copy to clipboard] [ - ]CODE:var args, ws= typeof WebSocket!= ‘undefined‘;
var socket= dojox.socket(args= {
url: ws? ‘/socket.io/websocket‘ : ‘/socket.io/xhr-polling‘,
headers:{
‘Content-Type‘:‘application/x-www-urlencoded‘
},
transport: function(args, message){
args.content = message; // use URL-encoding to send the message instead of a raw body
dojo.xhrPost(args);
};
});
var sessionId;
socket.on(‘message‘, function(){
if (!sessionId){
sessionId= message;
args.url += ‘/‘ + sessionId;
}else if(message.substr(0, 3) == ‘~h~‘){
// a heartbeat
}
});
dojox.socket.Reconnect還建立了在通訊端失去串連時自動重連。期待包含dojox.Socket的Dojo 1.6版本早日發布。
六、實際應用和WebSocket資源
有很多WebSocke的實際應用。WebSocket對於大多數客戶機-伺服器的非同步通訊是理想的，在瀏覽器內聊天是最突出的應用。WebSocket由於其高效率，被大多數公司所使用。
WebSocket資源
Socket.IO網站：http://socket.io/
WebSocket的Wikipedia：http://en.wikipedia.org/wiki/WebSockets
WebSockets.org網站：http://www.websockets.org/
Dojo WebSocket網站：http://www.sitepen.com/blog/2010/10/31/dojo-websocket/
認識HTML5的WebSocket
