使用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