WebSocket 學習(三)--用nodejs搭建伺服器

前面已經學習了WebSocket API，包括事件、方法和屬性。詳情：WebSocket(二)--API  WebSocket是基于事件驅動，支援全雙工通信。下面通過三個簡單例子體驗一下。

簡單開始

1.安裝node。https://nodejs.org/en/  

2.安裝ws子產品

ws：是nodejs的一個WebSocket庫，可以用來建立服務。 https://github.com/websockets/ws

3.server.js

在項目裡面建立一個server.js，建立服務，指定8181端口，将收到的消息log出來。

var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 8181 });
wss.on('connection', function (ws) {
    console.log('client connected');
    ws.on('message', function (message) {
        console.log(message);
    });
});      

4.建立一個client.html。

在頁面上建立一個WebSocket的連接配接。用send方法發送消息。

var ws = new WebSocket("ws://localhost:8181");
    ws.onopen = function (e) {
        console.log('Connection to server opened');
    }
    function sendMessage() {
        ws.send($('#message').val());
    }      

頁面：

 View Code

運作之後如下，服務端即時獲得用戶端的消息。

模拟股票

上面的例子很簡單，隻是為了示範如何運用nodejs的ws建立一個WebSocket伺服器。且可以接受用戶端的消息。那麼下面這個例子示範股票的實時更新。客服端隻需要連接配接一次，伺服器端會不斷地發送新資料，用戶端收資料後更新UI.頁面如下，有五隻股票，開始和停止按鈕測試連接配接和關閉。

 服務端：

 1.模拟五隻股票的漲跌。

var stocks = {
    "AAPL": 95.0,
    "MSFT": 50.0,
    "AMZN": 300.0,
    "GOOG": 550.0,
    "YHOO": 35.0
}
function randomInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
var stockUpdater;
var randomStockUpdater = function() {
    for (var symbol in stocks) {
        if(stocks.hasOwnProperty(symbol)) {
            var randomizedChange = randomInterval(-150, 150);
            var floatChange = randomizedChange / 100;
            stocks[symbol] += floatChange;
        }
    }
    var randomMSTime = randomInterval(500, 2500);
    stockUpdater = setTimeout(function() {
        randomStockUpdater();
    }, randomMSTime);
}
randomStockUpdater();      

2.連接配接建立之後就開始更新資料

wss.on('connection', function (ws) {
    var sendStockUpdates = function (ws) {
        if (ws.readyState == 1) {
            var stocksObj = {};
            for (var i = 0; i < clientStocks.length; i++) {
              var symbol = clientStocks[i];
                stocksObj[symbol] = stocks[symbol];
            }
            if (stocksObj.length !== 0) {
                ws.send(JSON.stringify(stocksObj));//需要将對象轉成字元串。WebSocket隻支援文本和二進制資料
                console.log("更新", JSON.stringify(stocksObj));
            }
           
        }
    }
    var clientStockUpdater = setInterval(function () {
        sendStockUpdates(ws);
    }, 1000);
    ws.on('message', function (message) {
        var stockRequest = JSON.parse(message);//根據請求過來的資料來更新。
        console.log("收到消息", stockRequest);
        clientStocks = stockRequest['stocks'];
        sendStockUpdates(ws);
    });      

用戶端：

建立連接配接：

var ws = new WebSocket("ws://localhost:8181");      

onopen直接隻有在連接配接成功後才會觸發，在這個時候将用戶端需要請求的股票發送給服務端。

var isClose = false;
    var stocks = {
        "AAPL": 0, "MSFT": 0, "AMZN": 0, "GOOG": 0, "YHOO": 0
    };
    function updataUI() {
        ws.onopen = function (e) {
            console.log('Connection to server opened');
            isClose = false;
            ws.send(JSON.stringify(stock_request));
            console.log("sened a mesg");
        }
        //更新UI
        var changeStockEntry = function (symbol, originalValue, newValue) {
            var valElem = $('#' + symbol + ' span');
            valElem.html(newValue.toFixed(2));
            if (newValue < originalValue) {
                valElem.addClass('label-danger');
                valElem.removeClass('label-success');
            } else if (newValue > originalValue) {
                valElem.addClass('label-success');
                valElem.removeClass('label-danger');
            }
        }
        // 處理受到的消息
        ws.onmessage = function (e) {
            var stocksData = JSON.parse(e.data);
            console.log(stocksData);
            for (var symbol in stocksData) {
                if (stocksData.hasOwnProperty(symbol)) {
                    changeStockEntry(symbol, stocks[symbol], stocksData[symbol]);
                    stocks[symbol] = stocksData[symbol];
                }
            }
        };
    }

    updataUI();      

運作效果如下：隻需要請求一次，資料就會不斷的更新，效果是不是很贊，不用輪詢，也不用長連接配接那麼麻煩了。文章末尾會附上所有源碼。

（美股的漲跌和A股的顔色是反的，即紅跌綠漲）

實時聊天

上面的例子是連接配接建立之後，服務端不斷給用戶端發送資料。接下來例子是一個簡單的聊天室類的例子。可以建立多個連接配接。

1.安裝node-uuid子產品，用來給每個連接配接一個唯一号。

2.服務端消息發送

消息類型分notification和message兩種，前者是提示資訊，後者是聊天内容。消息還包含一個id、昵稱和消息内容。在上一節有學習到readyState有四個值，OPEN表示連接配接建立可以發送消息。如果頁面關閉了，為WebSocket.CLOSE。

function wsSend(type, client_uuid, nickname, message) {
    for (var i = 0; i < clients.length; i++) {
        var clientSocket = clients[i].ws;
        if (clientSocket.readyState === WebSocket.OPEN) {
            clientSocket.send(JSON.stringify({
                "type": type,
                "id": client_uuid,
                "nickname": nickname,
                "message": message
            }));
        }
    }
}      

3.服務端處理連接配接

每新增加一個連接配接，都會發送一條匿名使用者的加入的提示消息，如果消息中帶有“/nick” 認為這一個修改昵稱的消息。然後更新用戶端的昵稱。其他都會當做聊天消息處理。

wss.on('connection', function(ws) {
    var client_uuid = uuid.v4();
    var nickname = "AnonymousUser" + clientIndex;
    clientIndex += 1;
    clients.push({ "id": client_uuid, "ws": ws, "nickname": nickname });
    console.log('client [%s] connected', client_uuid);
    var connect_message = nickname + " has connected";
    wsSend("notification", client_uuid, nickname, connect_message);
    console.log('client [%s] connected', client_uuid);
    ws.on('message', function(message) {
        if (message.indexOf('/nick') === 0) {
            var nickname_array = message.split(' ');
            if (nickname_array.length >= 2) {
                var old_nickname = nickname;
                nickname = nickname_array[1];
                var nickname_message = "Client " + old_nickname + " changed to " + nickname;
                wsSend("nick_update", client_uuid, nickname, nickname_message);
            }
        } else {
            wsSend("message", client_uuid, nickname, message);
        }
    });      

處理連接配接關閉：

var closeSocket = function(customMessage) {
        for (var i = 0; i < clients.length; i++) {
            if (clients[i].id == client_uuid) {
                var disconnect_message;
                if (customMessage) {
                    disconnect_message = customMessage;
                } else {
                    disconnect_message = nickname + " has disconnected";
                }
                wsSend("notification", client_uuid, nickname, disconnect_message);
                clients.splice(i, 1);
            }
        }
    };
    ws.on('close', function () {
        closeSocket();
    });      

4.用戶端

 沒有啟動時，頁面如下，change按鈕用來修改昵稱。

<div class="vertical-center">
        <div class="container">
            <ul id="messages" class="list-unstyled"></ul>
            <hr/>
            <form role="form" id="chat_form" onsubmit="sendMessage(); return false;">
                <div class="form-group">
                    <input class="form-control" type="text" id="message" name="message"
                           placeholder="Type text to echo in here" value="" autofocus/>
                </div>
                <button type="button" id="send" class="btn btn-primary"
                        onclick="sendMessage();">
                    Send Message
                </button>

            </form>
            <div class="form-group"><span>nikename：</span><input id="name" type="text" /> <button class="btn btn-sm btn-info" onclick="changName();">change</button></div>
        </div>
    </div>      

js:

//建立連接配接
        var ws = new WebSocket("ws://localhost:8181");
        var nickname = "";
        ws.onopen = function (e) {
            console.log('Connection to server opened');
        }
        //顯示
        function appendLog(type, nickname, message) {
            if (typeof message == "undefined") return;
            var messages = document.getElementById('messages');
            var messageElem = document.createElement("li");
            var preface_label;
            if (type === 'notification') {
                preface_label = "<span class=\"label label-info\">*</span>";
            } else if (type == 'nick_update') {
                preface_label = "<span class=\"label label-warning\">*</span>";
            } else {
                preface_label = "<span class=\"label label-success\">"
                + nickname + "</span>";
            }
            var message_text = "<h2>" + preface_label + "&nbsp;&nbsp;"
            + message + "</h2>";
            messageElem.innerHTML = message_text;
            messages.appendChild(messageElem);
        }
        //收到消息處理
        ws.onmessage = function (e) {
            var data = JSON.parse(e.data);
            nickname = data.nickname;
            appendLog(data.type, data.nickname, data.message);
            console.log("ID: [%s] = %s", data.id, data.message);
        }
        ws.onclose = function (e) {
            appendLog("Connection closed");
            console.log("Connection closed");
        }
        //發送消息
        function sendMessage() {
            var messageField = document.getElementById('message');
            if (ws.readyState === WebSocket.OPEN) {
                ws.send(messageField.value);
            }
            messageField.value = '';
            messageField.focus();
        }
        //修改名稱
        function changName() {
            var name = $("#name").val();
            if (ws.readyState === WebSocket.OPEN) {
                ws.send("/nick " + name);
            }
        }      

 運作結果：

 頁面關閉之後，連接配接馬上斷開。

 這種實時響應的體驗簡直不能太爽，代碼也清爽了，前端體驗也更好，用戶端不用一直發請求，服務端不用等着被輪詢。

 小結：上面例子的代碼都很好了解，接下來學習WebSocket協定。

 源碼：http://pan.baidu.com/s/1c2FfKbA

 源碼：http://pan.baidu.com/s/1o8KRmUQ  加入了socket.io的實作。

 API：WebSocket API

 相關：websoket使用Protocol Buffers3.0傳輸

本文摘自：http://www.cnblogs.com/stoneniqiu/p/5402311.html

原創作者：stoneniqiu