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