WebSocket 一場Web 通信革命悄然來臨——Node.js摸石頭系列之五

轉自: http://www.cnblogs.com/hsxixi/archive/2011/12/24/2300641.html

 

 

    從這回開始，咱們來搭建一個簡單的聊天室。由於 http 協議是無狀態的，搭建聊天室這樣的事歷來都讓人以爲疙疙瘩瘩的不是那麼瓜熟蒂落。若是不使用 flash、applet 等瀏覽器插件的話，咱們須要按期輪詢服務器來獲取你們的聊天信息。這形成了必定的延遲和大量的網絡通信。

    不過，隨着 HTML5 的浮出水面，這一狀況有望完全改觀了。在 HTML5 的衆多特性中，有一個老是悄悄站在幕後的大哥級人物，他就是 WebSocket 。WebSocket 實在是太強大了，Firefox 瀏覽器在支持一段時間後，以爲實在不能保證這位大哥不會幹出點什麼出格的事，把他打入冷宮。但是正如毛遂說的，釘子放在口袋裏，早晚都會冒出頭的。如今最新版的 Chrome 、 Firefox  均支持 WebSocket ，還有 IE 10 聽說也將支持。

1、WebSocket 是什麼？

    在說明 WebSocket 的時候，咱們須要和 HTTP 對比來看，纔會發現他的價值。

HTTP	WebSocket
雙向、可是半雙工	雙向全雙工
無狀態	持續鏈接
高延遲	實時，事件驅動
高帶寬消耗	低帶寬消耗
面向文檔設計	文檔、二進制都可，客戶端不侷限於瀏覽器

    好了，比也比完了，若是你還有點迷糊的話，哎，那我辛苦點，打個比方好了。咱們把服務器比作一位美麗的公主，咱們就是那苦命的追求者，之一。 http 時代：咱們寫了一封信(request)，交給書童，快，送信去，路上別偷懶。書童到了公主的宮殿，在門口被攔了下來，交出路條(request headers)，哦，進去吧。還好，公主對咱們也還算熱情，很快寫好了信(response)，放進信封，貼上標籤(response headers) ，交給書童。書童再屁顛屁顛跑回來交給咱們。隨着咱們和公主感情的不斷升溫，咱們開始豢養一羣名叫阿賈克斯的信鴿，這樣，就能夠很快地把咱們寫的小詩小詞送給公主了。公主若是想咱們的時候，也能夠在有信鴿來的時候，把她的手帕啊什麼的栓在鴿子腿上給咱們捎回來。HTML5 時代來了，咱們和公主的關係也開始如膠似漆起來，光靠信件和便籤已經不能知足了，還好，咱們有 WebSocket ，只要咱們讓書童送去一封信，WebSocket 就會來在咱們和公主之間架起一條電話熱線，這樣公主說話您馬上就能聽見，您說話公主也馬上能聽見，固然，由於這條熱線是雙向全雙工的，大家還能夠一塊兒合唱一首小情歌。

    好了，說下我的的理解，不知道對不對，權當參考：WebSocket 就是經過 http 協議實現握手的 socket 。

     下面是摘自 Kaazing  《WebSocket –The Web Communication Revolution 》 中的一副圖：

    

2、WebSocket 能幹什麼？

    理論上，socket 能幹什麼，他就能幹什麼。

    這個問號的答案是無限的，咱們看看這個在線版的 Quake 遊戲吧，也許他能點亮咱們的大腦。

    家庭做業：和你的本我、自我、大我、小我開個頭腦風暴會，討論 WebSocket 對 Web 應用開發的深入影響。

 

3、WebSocket 協議與 Socket.IO 模塊

    WebSocket 規範由客戶端和服務器端規範分別組成。客戶端由 W3C 制訂，服務器端規範由 IETF 制訂。Node.js 的第三方模塊 Socket.IO 提供在 Node.js 上使用 WebSocket 協議的能力。

    說得已經夠多了，下面動手了。

    建一個項目文件夾，這裏我用 chatroom 好了，您自便。打開命令行窗口，移步到 chatroom 目錄下，鍵入以下命令：

D:\chatroom> npm install socket.io –d

    見圖：(-d 參數可使咱們可以觀察到安裝的詳細狀況，但有資料說 –d 是安裝齊全部依賴包，無論了，加上總比不加好，是吧？)

 

若是最後出現「 npm info ok   」，恭喜你，socket.io 模塊安裝成功。查看 chatroom 目錄，獲得以下結構：

4、仍是先打地基

    準備工做完成後，咱們仍是先寫一個最最最簡的架子，而後測試他。

    請看代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

/* 平安夜快樂之聊天室框架 */   //照例先引入模塊，此次咱們須要 http 和 socket.io 兩個 var  http = require( 'http' ),      socketio = require( 'socket.io' );       //注意，和前面的區別是咱們須要拿到 http 建立的服務器實例 var  app = http.createServer( function (request,response){      //TODO 後面咱們會在這把聊天室頁面發回去，不過如今咱們簡單地提示就行了。      response.end( 'Server ok.' ); }) ;   //http 服務開始偵聽 app.listen(888); console.log( "Http Server start at 888" );   // socket.io 開始偵聽 var  io = socketio.listen(app);   // WebSocket 協議握手成功 io.sockets.on( 'connection' , function (socket) {      console.log( "Websocket connect ok ..." ); });

   

    保持爲 app.js 文件。運行。

D:\chatroom> node app.js

    若是見到以下圖，那麼恭喜你，WebSocket 已經準備好來爲咱們的聊天室服務了。

    看提示第一行是咱們輸出的說明 http 服務啓動的信息，第二行是 Node.js ，或者準確地說是 Socket.IO 給咱們的提示信息，真體貼啊。聽是在聽了，那麼他們有沒有謊報軍情呢？試試看就知道了。

    請打開瀏覽器，等等，什麼瀏覽器均可以嗎？你不是說只有 chrome 和 火狐？ 呃，差點忘了，Socket.IO 不只幫助咱們實現了 WebSocket 協議，還幫助咱們提升了瀏覽器的兼容性，如今已經支持 IE5+、Safari 3+、 Chrome 4+、火狐 3+、Opera 10.61+，還支持一些手機和平板上得瀏覽器。

•    請在地址欄鍵入：

http://localhost:888/socket.io/socket.io.js

    觀察控制檯和瀏覽器，你會發現控制檯提示你： debug – served static content /socket.io.js ，而瀏覽器咱們也獲得了一段，不，一大段 js 代碼，這說明咱們的任務完成了。 Http 服務正常，WebSocket 服務正常，火箭即將發射！