基於Node.js + WebSocket 的簡易聊天室

代碼地址如下：
http://www.demodashi.com/demo/13282.html

Node.js聊天室運行說明

Node.js的本質就是運行在服務端的JavaScript。Node.js是基於Chrome瀏覽器運行JavaScript時建立的一個平台。該平台可以非常快速以及高效的執行JavaScript，並且性能非常優越。Node.js還優化了一些特殊用例，內置了常用的API，這樣使得該平台在非瀏覽器環境下運行得更好。
因為其是運行在V8引擎下，所以本地先要安裝node運行環境，然后通過node命令來執行js代碼。以達到預期效果。

1.1安裝nodejs

如圖1.1所示。

圖1.1 通過node命令執行js文件

1.2　用戶登錄

用戶輸入用戶名，系統會判斷輸入的用戶名是否合法。如果合法，進入聊天界面。如果不合法，需要重新鍵入。系統登錄頁面如圖1.2所示。

圖1.2 系統登陸頁面

用戶輸入用戶名，若用戶名可用，點擊即可進入聊天室，若用戶名非法，則需重新輸入。提示頁面如圖1.3所示。

圖1.3 用戶名非法提示頁面

1.3　聊天界面

聊天室有如下功能：
(1)對聊天室內當前在線人數進行統計，並按照進入聊天室順序進行排列顯示。
(2)新用戶加入聊天室會有提示說明，包括用戶名和進入聊天室時間。
(3)用戶退出聊天室會有提示說明，包括退出用戶的用戶名和離開聊天室時間。
(4)對加入聊天室的新用戶有歷史記錄顯示，讓新用戶不錯過任何歷史聊天信息。
(5)網絡出現故障會有對應提示。

1.3.1　聊天室主頁面

用戶登錄后，進入聊天界面。可以看到當前在線用戶數以及對應用戶名。界面如圖1.4所示。

圖1.4 聊天室主頁面

1.3.2　新用戶進入聊天室提示

有新用戶進入聊天室，會有提示信息。包括進入聊天室用戶的用戶名和進入聊天室的時間。如圖1.5所示。

圖1.5 新用戶進入聊天室提示

1.3.3　用戶退出聊天室提示

用戶退出聊天室，會有對應提示，包括退出聊天室的用戶名和退出時間，聊天室內用戶都可見。且對當前在線用戶數量進行實時刷新。如圖1.6所示。

圖1.6 用戶退出聊天室提示

1.3.4　新用戶加入顯示歷史聊天記錄

新用戶進入聊天室，會顯示歷史聊天記錄。這樣系統顯得尤為人性化。如圖1.7所示。

圖1.7 顯示歷史記錄

1.3.5　網絡出現故障提示

關閉后台node運行環境，取消監聽固定端口，或者網絡出現其他故障，會提示網絡出現錯誤。如圖1.8所示。

圖1.8 網絡錯誤提示

Node.js聊天室代碼說明

基於Node.js和WebSocket的聊天室，主要包括前端頁面，主要是用戶操作的頁面，還包括后台數據通信以及邏輯處理。整個程序分為大概三部分，包括前端顯示頁面，還有就是js腳本，最后一個是node服務，前端會用html，css，jQuery去實現，服務會用node.js去寫，利用websocket去做通信，去做持久連接，達到通信聊天功能，最后開啟node服務，運行腳本即可。

2.1.1　前端核心代碼

前端頁面用HTML+CSS+JavaScript來實現，整個聊天頁面布局恰當。人性化的提示信息做的比較多。所以前端代碼非常簡單。就是一些DIV嵌套，固定各自的類名和ID。還有一些文本框和按鈕，通過CSS來控制它們的樣式，部分代碼

<div id='prePage' class='page' style='width:690px;text-align:center;'>
    <input id='nickinput' type='text' placeholder="請輸入您的昵稱">&nbsp;
    <input id='open' type='button' />
</div>
<div id='mainPage' class='page' style='display:none;'>
    <div style=' overflow:hidden; '>
        <div class='talkLeft '>
            <div id='talkFrame '></div>
            <div id='inputDiv '>
                <textarea placeholder="喃，隨便說點啥嘆" id="me3sage" /textarea>
            </div>
            <div style='overflow:hidden; '>
                <input class='f-right ' type='button ' value='發送 ' id="send" /> </div>
        </div>
        <div class='talkRight '>
            <div id='onlineUsers '> </div>
        </div>
    </div>
    <div class='text-alignreenter'>
        <input type='button' value='退出 ' id='flogoutM' />
    </div>
</div>

2.1.2　服務端核心代碼

聊天室的核心后台代碼，就是啟動HTTP服務，實現HTTP請求。並且監聽固定端口號。通過WebSocket來實現前后端數據的通信。以下代碼就是用Node.js的固定模塊，request模塊，來實現實現HTTP請求，啟動HTTP服務，並監聽本地的80端口。實現了前后端的通信連接。實現代碼。

//使用socket.io直接啟動http服務
var io = require("socket.io").listen(PORT);
io. sockets.on ("connection', function (socket) { socket.on('message",function(message){
var mData = chatLib.analyzeMessageData(message);
if (mData && mData.EVENT) { switch (mData.EVENT) { case EVENT_TYPE.LOGIN:// 新用戶連接
var newUser = {uid:socket.id, 'nick':chatLib.getMsgFirstDataValue(mData)};
//把新連接的用戶增加到在線用戶列表 onlineUserMap.put(socket.id, newUser);
//把新用戶的信息廣播給在線用戶 
var data = JSON.stringify({
'user':onlineUserMap.get(socket.id,
'EVENT' : EVENT_TYPE.LOGIN,
'values': newUser,
'users':onlineUserMap.values,
'historyContent':rhistoryContent.values()
});
Io.sockets.emit ('message1, data') ;//廣播
socket .broadcast. emit ('message' , data);//無效 break;


    function (exports) {
        //事件類型
        exports.EVENT_TYPS = {}

        //服務靖口
        exports.PORT = 80;

        //服務靖口
        exports.HOST.MlocalhostM;
        LOGOUTLOGOUT_SPEAK1: 'SPEAK1'
        var analyzeMessageData = exports.analyzeMessageData = function (message)
        try {
            return JSOK.parse(message);
        } catch (error) {
            //收到了非正常格式的數據
            console.log('method'
                analyzeMsgData, error: 1 + error);
            return null;
        }

2.1.3　服務端在線用戶顯示代碼

此代碼實現的是在線用戶的實時統計與顯示。當有新用戶進入，或者有用戶退出的時候，會有一個動態刷新，以統計最新數據。通過用循環把用戶的ID作為標識，來統計當前在線人數。通過動態添加DOM節點來將新用戶顯示排列在聊天頁面上。部分代碼如下所示。

  function updateOnlineUser() {
        var html = "<div> 在線用> (" + onlineUserMap.size() + ")</div>";
        if (onlineUserMap.size() > 0) {
            var users = onlineUserMap.values();
            var number = users.length;
            for (var i = 0; i < number; i++) {
                html.push(users);
                if (users[i].uid == currentUser.uid) {
                    html.push("<b>" + formatUserString(users[i]) + "</b>");
                } else {
                    html.push(formatUserString(users[i]));
                }
                html.push("</div>" >
                    $("#onlineUsers").html(html.join('')))

2.1.4　服務端用戶登入退出以及網絡斷開連接代碼

有新用戶進入聊天室，在登錄頁面輸入一個用戶名，后台會隨機給分配一個socket id。然后動態添加或者移除DOM節點，就可以在頁面顯示某某用戶加入聊天室，某某用戶離開聊天室。
當然了，還要考慮到一些異常情況，並在其中進行適當處理。比如出現某種未知的錯誤，會提示“系統繁忙”。這樣，顯得系統更為人性化。代碼如下所示。

    updateOnlineUser();
    appendMessage(formatUserTalkString(user) + "[進入房間]")
    var EVENT_TYPE_LOGOUT; // 用戶退出 var user = mData.values[0]; 
    onlineUserMap.remove(user.uid);
    updateOnlineUser();
    appendMessage(formatUserTalkString(user) + "[離開房間]"
            case EVENT_TYPE.SPEAK: // 用戶發言 var content = mData.values[0];
                appendMessage(formatUserTalkString(mData.user)); appendMessage("<span>&nbsp;&nbsp;</span>" +
                    content);
                break;
            case EVENT_TYPE.ERROR: // 出錯了
                appendMessage("[系或繁忙]");
                break;
            default:
                break;

總結

這個聊天室的主要難點在用沒有過多接觸過的Node.js對前端數據的處理以及前后端數據的通信。一方面自己接觸的后台語言本來也不多，再加上平時主要是寫靜態的前端頁面，前后端結合來寫，經歷不是非常多。所以，剛開始並不知道如何進行前后端的數據通信，最后通過自己學習摸索，從最開始的安裝Node環境，到最后學會利用Node.js的request模塊來啟動HTTP服務，並監聽固定端口，實現前后端的簡單鏈接。最后在簡單的基礎上加了一些人性化的功能，比如對應操作會有提示，對用戶名有非法判斷，顯示系統時間等。總得來說，收獲蠻大，自己對項目構建以及代碼實現都說的非常清楚，希望能幫助到大家。基於Node.js + WebSocket 的簡易聊天室

代碼地址如下：
http://www.demodashi.com/demo/13282.html

注：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權