WebSocket協(xié)議可以實(shí)現(xiàn)服務(wù)端主動(dòng)向客戶端發(fā)送請(qǐng)求
   在websocket連線過(guò)程中，瀏覽器先向服務(wù)端發(fā)出連線請(qǐng)求，然后服務(wù)器做出回應(yīng)，簡(jiǎn)稱握手。然后服務(wù)端跟客戶端就形成了一條通路

帶來(lái)兩大好處：
1：Header
互相溝通的Header是很小的，大概只有2 Bytes
2:Server Push
服務(wù)器有新數(shù)據(jù)就會(huì)主動(dòng)推送給客戶端

認(rèn)識(shí)HTML5的WebSocket
在HTML5規(guī)范中，我最喜歡的Web技術(shù)就是正迅速變得流行的WebSocket API。WebSocket提供了一個(gè)受歡迎的技術(shù)，以替代我們過(guò)去幾年一直在用的Ajax技術(shù)。這個(gè)新的API提供了一個(gè)方法，從客戶端使用簡(jiǎn)單的語(yǔ)法有效地推動(dòng)消息到服務(wù)器。讓我們看一看HTML5的WebSocket API：它可用于客戶端、服務(wù)器端。而且有一個(gè)優(yōu)秀的第三方API，名為Socket.IO。

一、什么是WebSocket API?**WebSocket API是下一代客戶端-服務(wù)器的異步通信方法。該通信取代了單個(gè)的TCP套接字，使用ws或wss協(xié)議，可用于任意的客戶端和服務(wù)器程序。WebSocket目前由W3C進(jìn)行標(biāo)準(zhǔn)化。WebSocket已經(jīng)受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等瀏覽器的支持。WebSocket API最偉大之處在于服務(wù)器和客戶端可以在給定的時(shí)間范圍內(nèi)的任意時(shí)刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因?yàn)锳jax技術(shù)需要客戶端發(fā)起請(qǐng)求，而WebSocket服務(wù)器和客戶端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允許跨域通信。Ajax技術(shù)很聰明的一點(diǎn)是沒(méi)有設(shè)計(jì)要使用的方式。WebSocket為指定目標(biāo)創(chuàng)建，用于雙向推送消息。

二、WebSocket API的用法**只專注于客戶端的API，因?yàn)槊總€(gè)服務(wù)器端語(yǔ)言有自己的API。下面的代碼片段是打開(kāi)一個(gè)連接，為連接創(chuàng)建事件監(jiān)聽(tīng)器，斷開(kāi)連接，消息時(shí)間，發(fā)送消息返回到服務(wù)器，關(guān)閉連接。[Copy to clipboard] [ - ]
CODE:
// 創(chuàng)建一個(gè)Socket實(shí)例var socket = new WebSocket('ws://localhost:8080'); // 打開(kāi)Socket socket.onopen = function(event) { // 發(fā)送一個(gè)初始化消息 socket.send('I am the client and I'm listening!'); // 監(jiān)聽(tīng)消息 socket.onmessage = function(event) { console.log('Client received a message',event); }; // 監(jiān)聽(tīng)Socket的關(guān)閉 socket.onclose = function(event) { console.log('Client notified socket has closed',event); }; // 關(guān)閉Socket.... //socket.close() };

讓我們來(lái)看看上面的初始化片段。參數(shù)為URL，ws表示W(wǎng)ebSocket協(xié)議。onopen、onclose和onmessage方法把事件連接到Socket實(shí)例上。每個(gè)方法都提供了一個(gè)事件，以表示Socket的狀態(tài)。onmessage事件提供了一個(gè)data屬性，它可以包含消息的Body部分。消息的Body部分必須是一個(gè)字符串，可以進(jìn)行序列化/反序列化操作，以便傳遞更多的數(shù)據(jù)。WebSocket的語(yǔ)法非常簡(jiǎn)單，使用WebSockets是難以置信的容易……除非客戶端不支持WebSocket。IE瀏覽器目前不支持WebSocket通信。如果你的客戶端不支持WebSocket通信，下面有幾個(gè)后備方案供你使用：Flash技術(shù) —— Flash可以提供一個(gè)簡(jiǎn)單的替換。 使用Flash最明顯的缺點(diǎn)是并非所有客戶端都安裝了Flash，而且某些客戶端，如iPhone/iPad，不支持Flash。AJAX Long-Polling技術(shù) —— 用AJAX的long-polling來(lái)模擬WebSocket在業(yè)界已經(jīng)有一段時(shí)間了。它是一個(gè)可行的技術(shù)，但它不能優(yōu)化發(fā)送的信息。也就是說(shuō)，它是一個(gè)解決方案，但不是最佳的技術(shù)方案。由于目前的IE等瀏覽器不支持WebSocket，要提供WebSocket的事件處理、返回傳輸、在服務(wù)器端使用一個(gè)統(tǒng)一的API，那么該怎么辦呢？幸運(yùn)的是，Guillermo Rauch創(chuàng)建了一個(gè)Socket.IO技術(shù)。

三、帶Socket.IO的WebSocket**Socket.IO是Guillermo Rauch創(chuàng)建的WebSocket API，Guillermo Rauch是LearnBoost公司的首席技術(shù)官以及LearnBoost實(shí)驗(yàn)室的首席科學(xué)家。Socket.IO使用檢測(cè)功能來(lái)判斷是否建立WebSocket連接，或者是AJAX long-polling連接，或Flash等?？煽焖賱?chuàng)建實(shí)時(shí)的應(yīng)用程序。Socket.IO還提供了一個(gè)NodeJS API，它看起來(lái)非常像客戶端API。建立客戶端Socket.IOSocket.IO可以從GitHub下載，可以把socket.io.js文件包含到頁(yè)面中：[Copy to clipboard] [ - ]
CODE:
<script src="http://cdn.socket.io/stable/socket.io.js"></script>[/code此時(shí)，Socket.IO在此頁(yè)面上是有效的，是時(shí)候創(chuàng)建Socket了：[code]// 創(chuàng)建Socket.IO實(shí)例，建立連接var socket= new io.Socket('localhost',{ port: 8080 }); socket.connect(); // 添加一個(gè)連接監(jiān)聽(tīng)器socket.on('connect',function() { console.log('Client has connected to the server!'); });// 添加一個(gè)連接監(jiān)聽(tīng)器socket.on('message',function(data) { console.log('Received a message from the server!',data); });// 添加一個(gè)關(guān)閉連接的監(jiān)聽(tīng)器socket.on('disconnect',function() { console.log('The client has disconnected!'); }); // 通過(guò)Socket發(fā)送一條消息到服務(wù)器function sendMessageToServer(message) { socket.send(message); }

Socket.IO簡(jiǎn)化了WebSocket API，統(tǒng)一了返回運(yùn)輸?shù)腁PI。傳輸包括：WebSocketFlash SocketAJAX long-pollingAJAX multipart streamingIFrameJSONP polling你還可以設(shè)置任意的Socket.IO構(gòu)造器的第二個(gè)選項(xiàng)，選項(xiàng)包括：port - 待連接的端口transports - 一個(gè)數(shù)組，包含不同的傳輸類型transportOptions - 傳輸?shù)膮?shù)使用的對(duì)象，帶附加屬性Socket.IO還提供了由本地WebSocket API提供的普通連接、斷開(kāi)連接、消息事件。Socket還提供了封裝每個(gè)事件類型的方法。

四、NodeJS和Socket.IO聯(lián)合開(kāi)發(fā)**Socket.IO提供的服務(wù)器端解決方案，允許統(tǒng)一的客戶端和服務(wù)器端的API。使用Node，你可以創(chuàng)建一個(gè)典型的HTTP服務(wù)器，然后把服務(wù)器的實(shí)例傳遞到Socket.IO。從這里，你創(chuàng)建連接、斷開(kāi)連接、建立消息監(jiān)聽(tīng)器，跟在客戶端一樣。一個(gè)簡(jiǎn)單的服務(wù)器端腳本看起來(lái)如下：[Copy to clipboard] [ - ]
CODE:
// 需要HTTP 模塊來(lái)啟動(dòng)服務(wù)器和Socket.IOvar http= require('http'), io= require('socket.io'); // 在8080端口啟動(dòng)服務(wù)器var server= http.createServer(function(req, res){ // 發(fā)送HTML的headers和message res.writeHead(200,{ 'Content-Type': 'text/html' }); res.end('<h1>Hello Socket Lover!</h1>'); }); server.listen(8080); // 創(chuàng)建一個(gè)Socket.IO實(shí)例，把它傳遞給服務(wù)器var socket= io.listen(server); // 添加一個(gè)連接監(jiān)聽(tīng)器socket.on('connection', function(client){ // 成功！現(xiàn)在開(kāi)始監(jiān)聽(tīng)接收到的消息 client.on('message',function(event){ console.log('Received message from client!',event); }); client.on('disconnect',function(){ clearInterval(interval); console.log('Server has disconnected'); }); });

你可以運(yùn)行服務(wù)器部分，假定已安裝了NodeJS，從命令行執(zhí)行：[Copy to clipboard] [ - ]
CODE:
node socket-server.js

現(xiàn)在客戶端和服務(wù)器都能來(lái)回推送消息了！在NodeJS腳本內(nèi)，可以使用簡(jiǎn)單的JavaScript創(chuàng)建一個(gè)定期消息發(fā)送器：[Copy to clipboard] [ - ]
CODE:
// 創(chuàng)建一個(gè)定期（每5秒）發(fā)送消息到客戶端的發(fā)送器var interval= setInterval(function() { client.send('This is a message from the server! ' + new Date().getTime()); },5000);

服務(wù)器端將會(huì)每5秒推送消息到客戶端！

五、dojox.Socket和Socket.IO**Persevere的創(chuàng)建者Kris Zyp創(chuàng)建了dojox.Socket。dojox.Socket以Dojo庫(kù)一致的方式封裝了WebSocket API，用于在客戶端不支持WebSocket時(shí)，使用long-polling替代。下面是怎樣在客戶端使用dojox.Socket和在服務(wù)器端使用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還創(chuàng)建了在套接字失去連接時(shí)自動(dòng)重連。期待包含dojox.Socket的Dojo 1.6版本早日發(fā)布。

六、實(shí)際應(yīng)用和WebSocket資源有很多WebSocke的實(shí)際應(yīng)用。WebSocket對(duì)于大多數(shù)客戶機(jī)-服務(wù)器的異步通信是理想的，在瀏覽器內(nèi)聊天是最突出的應(yīng)用。WebSocket由于其高效率，被大多數(shù)公司所使用。WebSocket資源**Socket.IO站點(diǎn)：http://socket.io/WebSocket的Wikipedia：http://en.wikipedia.org/wiki/WebSocketsWebSockets.org站點(diǎn)：http://www.websockets.org/Dojo WebSocket站點(diǎn)：http://www.sitepen.com/blog/2010/10/31/dojo-websocket/