好程式設計師帶你認識HTML5中的WebSocket

　　 好程式設計師 帶你認識 HTML5中的WebSocket ， 在 HTML5 規範中，我最喜歡的Web技術就是正迅速變得流行的 WebSocket API。WebSocket 提供了一個受歡迎的技術，以替代我們過去幾年一直在用的Ajax技術。這個新的API提供了一個方法，從客戶端使用簡單的語法有效地推動訊息到伺服器。讓我們看一看 HTML5 的 WebSocket API：它可用於客戶端、伺服器端。而且有一個優秀的第三方API，名為Socket.IO。

　　一、 HTML5 中的 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為指定目標建立，用於雙向推送訊息。

　　二、 HTML5 中的 WebSocket API 的用法

　　只專注於客戶端的 API，因為每個伺服器端語言有自己的API。下面的程式碼片段是開啟一個連線，為連線建立事件監聽器，斷開連線，訊息時間，傳送訊息返回到伺服器，關閉連線。

　　程式碼如下 :

　　// 建立一個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檔案包含到頁面中：

　　程式碼如下 :
　　
　　此時， Socket.IO在此頁面上是有效的，是時候建立Socket了：

　　程式碼如下 :

　　// 建立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。從這裡，你建立連線、斷開連線、建立訊息監聽器，跟在客戶端一樣。

　　一個簡單的伺服器端指令碼看起來如下：

　　程式碼如下 :

　　// 需要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('Hello Socket Lover!');

　　});

　　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，從命令列執行：

　　node socket-server.js

　　現在客戶端和伺服器都能來回推送訊息了 !在NodeJS指令碼內，可以使用簡單的JavaScript建立一個定期訊息傳送器：

　　程式碼如下 :

　　// 建立一個定期(每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的例子：

　　程式碼如下 :

　　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由於其高效率，被大多數公司所使用。