NodeJS+(Node-WebSocket-Server)+HTML5 WebSocket實現websocket

 WebSocket是HTML5的新特性，也是HTML5中最強大的通信功能，利用HTML5 WebSocket我們可以開發出基於瀏覽器的客戶端應用。

HTML5 WebSocket不僅僅是對常規的HTTP通信的增強，它也代表了Web領域的一次巨大進步！
過去如果想實現瀏覽器端全雙工通信，必須要藉助迂迴的hacks來實現（比如web版QQ），且HTTP通信的數據非常大並且還有延遲性，相比之下的HTML5 WebSocket帶來的改進是如此的巨大。
至於更詳細的HTML5 WebSocket或websocket的介紹我在此不多說了，有舉趣的朋友你可以Google一下。
NodeJS是一個服務端javascript框架(準確說，nodejs是一個服務端技術)，用nodejs可以實現javascript處理服務端邏輯，功能非常強大。感興趣的朋友可以訪問nodejs.org
Node-WebSocket-Server是nodejs的一個子模塊，其主要作用是處理websocket通信，可以到它的官網瞭解更多詳情。git:https://github.com/miksago/node-websocket-server
在你閱讀本篇文章時，我默認你的機器上已經安裝了nodejs和node-websocket-server以及擁有一個支持html5 websocket的瀏覽器。因爲在接下來的內容，我主要講解如何搭建websocket echo以及websocket broadcast服務器＼如何在本地做websocket測試，假如你的機器上沒有安裝nodejs和node-websocket-server或者你不知道如何安裝，那麼你可以到Google上搜一下或者訪問我的如何安裝nodejs以及如何安裝node-websocket-server。
一切準備就緒，我們開始編寫websocket echo服務器：
我的演示全部是在Mac OS 10.6操作系統下操作的，如讀者發現個別nodejs的命令不一樣的話，請查閱nodejs api。

JavaScript Code複製內容到剪貼板

//請求websocket-server模塊
var ws = require("websocket-server");

//創建一個服務器
var server = ws.createServer();

//當websocket正常通信時，我們爲其註冊一個message事件，用於異步監視是否有消息發送到服務器
server.addListener("connection", function(connection){
  //當有消息發往到socket echo服務器時
  connection.addListener("message", function(msg){
   //我們發送一個echo，請注意不是broadcast
    server.send(connection.id,msg);
  });
});

//監聽一個websocket地址
server.listen(8080,"127.0.0.1");

ok，我們的websocket echo服務器搭建完畢，簡單吧？記住！這是用nodejs搭建的！我們把websocket echo服務器的腳存保存到任意一個位置，取名echo.js，接下來我們要用node來運行這個服務器。
在命令行中(windows)或終端裏輸入以下命令：

Code複製內容到剪貼板

node echo.js

node空格再加你的echo.js路徑名，即可啓動你的websocket echo服務器了，echo.js改爲b.js。

服務器啓動後，看看頁面中我們的javascript腳本如何處理。

JavaScript Code複製內容到剪貼板

//websocket支持
if (!window.WebSocket) {
        alert('Your browser not support websocket!');
    }
    else {
       //創建一個socket連接
        var ws = new WebSocket('ws://127.0.0.1:8080');

        ws.onopen = function(e){
            console.log('WebSocket opened');
        };

        ws.onclose = function(e){
            console.log('WebSocket closed');
        };

        ws.onerror = function(e){
            console.log('WebSocket error');
        };

       //當socket服務器有消息更新時
        ws.onmessage = function(e){
            document.querySelector('#showData').innerHTML += e.data;
        };

        document.querySelector('body').addEventListener('click', function(e){
            e.preventDefault();

            if (e.target.nodeName) {
               //向socket服務器發送消息
                ws.send(e.target.nodeName);
            }
        }, true);
    }

OK，簡單吧？我們頁面上的javascript腳本完成了。值得注意的是在建立socket連接時，socket的協議不是http/https，而是ws/wss，然後加上地址及端口號。
至於ws和wss的區別，在此簡單說一下。ws是標準的websocket接連，而wss則是使用了加密的SSL socket連接。
有些同學可能在想websocket echo服務器和websocket broadcast服務器有啥區別？
websocket echo服務器只向給定的客戶端ID發送數據，也就是說兩個訪問同一地址的瀏覽器窗口，當你在做socket處理時，它實時更新的數據只會反應在當前的頁面（客戶端），因爲服務器只向單一的客戶端發送數據。
而websocket broadcast則相反，它會向所有與這個服務器建立socket連接的客戶端發送實時的數據。
我們演示一個用node-websocket-server建立一個broadcast服務器

JavaScript Code複製內容到剪貼板

//請求websocket-server模塊
var ws = require("websocket-server");

//創建一個服務器
var server = ws.createServer();

//當websocket正常通信時，我們爲其註冊一個message事件，用於異步監視是否有消息發送到服務器
server.addListener("connection", function(connection){
  //當有消息發往到socket echo服務器時
  connection.addListener("message", function(msg){
   //我們發送一個broadcast，請注意這個方法的使用,broadcast方法只接受消息數據
    server.broadcast(msg);
  });
});

//監聽一個websocket地址
server.listen(8080,"127.0.0.1");

按照上面的方法，通過nodejs啓動broadcast.js
node broadcast.js
打開兩個或多個瀏覽器窗口做演示

ok，以上就是利用nodejs＼node-websocket-server建立的簡單的websocket echo和websocket broadcast服務器及演示。
如果你想利用websocket做項目，你的服務器必須要支持socket連接，我在此推薦大家勿必使用nodejs和node-websocket-server技術，它們非常簡單，如果你要自己編寫socket服務器也可以，你可以訪問http://tools.ietf.org/id/websocket獲取相關技術規範(比較麻煩)。
目前websocket的支持不是很好，僅safari4+chrome8+以及iOS4.2+中的safari支持HTML5 WebSocket。桌面版的opera和firefox都不支持。
掌握websocket後，開發者可以做很多以前HTTP通信無法做到的事情，我們可能開發股票監視系統＼數據實時監視系統，甚至我們可以開發基於瀏覽器的軟件，當然你需要一臺支持websocket連接的服務器。