使用Node.js開發一個在線聊天應用——編寫前臺

創建一個Chat.js，把它放在我們上一章說到的建立的那個public目錄下面。

chat.js的代碼如下：

window.onload = function() {
 
    var messages = [];
    var socket = io.connect('http://localhost:3700');
    var field = document.getElementById("field");
    var sendButton = document.getElementById("send");
    var content = document.getElementById("content");
 
    socket.on('message', function (data) {
        if(data.message) {
            messages.push(data.message);
            var html = '';
            for(var i=0; i<messages.length; i++) {
                html += messages[i] + '<br />';
            }
            content.innerHTML = html;
        } else {
            console.log("There is a problem:", data);
        }
    });
 
    sendButton.onclick = function() {
        var text = field.value;
        socket.emit('send', { message: text });
    };
 
}

我們一開始調用了onload方法來確保我們的邏輯已經被完全的加載，接下來我們創建了一個數組來保存信息記錄

一個socket對象，還有幾個DOM節點上的按鈕對象。和後臺類似，我們爲socket的message動作綁定了一個函數

用來響應這個動作，當這個‘message’的事件發生的時候，我們能捕獲到它，收到傳遞來的信息，並把這些信息更新保存到content節點下

我們同樣實現了發信息的邏輯，它非常簡單，直接用emit方法發送了一個‘send’的事件，並帶上了用戶的消息，那麼在服務端我們

已經實現了監聽這個‘send’事件的邏輯。

那麼現在如果你直接打開http://localhost:3700,你會收到一個錯誤消息，那是因爲你必須在page.fade文件裏面包含我們上面寫的這些必要的js文件

如下：

head
    title= "Real time web chat"
    script(src='/chat.js')
    script(src='/socket.io/socket.io.js')

好，那麼現在我們就可以重新啓動一下這個index.js了。並觀察一下效果

四。代碼提升

在第一個版本中，效果不是很好，第一個需要改動的就是添加姓名，表示每一個消息的是誰發出的。

好消息是我們不需要再改變server端的代碼，因爲server端只是單純的把消息轉發一下，所以我們要做的

就是添加一個新的屬性就是姓名，首先我們先改模板，添加用戶姓名，page.jade如下：

.controls
    | Name:
    input#name(style='width:350px;')
    br
    input#field(style='width:350px;')
    input#send(type='button', value='send')

接下來我們修改node.js文件

window.onload = function() {
 
    var messages = [];
    var socket = io.connect('http://localhost:3700');
    var field = document.getElementById("field");
    var sendButton = document.getElementById("send");
    var content = document.getElementById("content");
    var name = document.getElementById("name");
 
    socket.on('message', function (data) {
        if(data.message) {
            messages.push(data);
            var html = '';
            for(var i=0; i<messages.length; i++) {
                html += '<b>' + (messages[i].username ? messages[i].username : 'Server') + ': </b>';
                html += messages[i].message + '<br />';
            }
            content.innerHTML = html;
        } else {
            console.log("There is a problem:", data);
        }
    });
 
    sendButton.onclick = function() {
        if(name.value == "") {
            alert("Please type your name!");
        } else {
            var text = field.value;
            socket.emit('send', { message: text, username: name.value });
        }
    };
 
}

如果聊天記錄框裏面的條數太多的話，用戶也可以加入如下代碼：

content.innerHTML = html;
content.scrollTop = content.scrollHeight;

要注意的是，這兩行代碼在低於IE7的版本是不起作用的。

如果你想你發完一條消息後，清空你的發消息框會更好

那麼加入如下代碼：

socket.emit('send', { message: text, username: name.value });
field.value = "";

參考鏈接：http://code.tutsplus.com/tutorials/real-time-chat-with-nodejs-socket-io-and-expressjs--net-31708