this.socket.on('system', function(nickName, userCount, type) { //判断用户是连接还是离开以显示不同的信息 var msg = nickName + (type == 'login' ? ' joined' : ' left'); var p = document.createElement('p'); p.textContent = msg; document.getElementById('historyMsg').appendChild(p); //将在线人数显示到页面顶部 document.getElementById('status').textContent = userCount + (userCount > 1 ? ' users' : ' user') + ' online'; });
现在运行程序，打开多个浏览器标签，然后登陆离开，你就可以看到相应的系统提示消息了。
发送消息
用户连接以及断开我们需要显示系统消息，用户还要频繁的发送聊天消息，所以可以考虑将消息显示到页面这个功能单独写一个函数方便我们调用。为此我们向HiChat类中添加一个_displayNewMsg的方法，它接收要显示的消息，消息来自谁，以及一个颜色共三个参数。因为我们想系统消息区别于普通用户的消息，所以增加一个颜色参数。同时这个参数也方便我们之后实现让用户自定义文本颜色做准备。
将以下代码添加到的我的HiChat类当中。
www/scripts/hichat.js
//向原型添加业务方法 HiChat.prototype = { init: function() { //此方法初始化程序 //... }, _displayNewMsg: function(user, msg, color) { var container = document.getElementById('historyMsg'), msgToDisplay = document.createElement('p'), date = new Date().toTimeString().substr(0, 8); msgToDisplay.style.color = color || '#000'; msgToDisplay.innerHTML = user + '<span>(' + date + '): </span>' + msg; container.appendChild(msgToDisplay); container.scrollTop = container.scrollHeight; } };
在_displayNewMsg方法中，我们还向消息添加了一个日期。我们也判断了该方法在调用时有没有传递颜色参数，没有传递颜色的话默认使用#000即黑色。
同时修改我们在system事件中显示系统消息的代码，让它调用这个_displayNewMsg方法。
www/scripts/hichat.js
this.socket.on('system', function(nickName, userCount, type) { var msg = nickName + (type == 'login' ? ' joined' : ' left'); //指定系统消息显示为红色 that._displayNewMsg('system ', msg, 'red'); document.getElementById('status').textContent = userCount + (userCount > 1 ? ' users' : ' user') + ' online'; });
现在的效果如下：
有了这个显示消息的方法后，下面就开始实现用户之间的聊天功能了。
做法也很简单，如果你掌握了上面所描述的emit发送事件，on接收事件，那么用户聊天消息的发送接收也就轻车熟路了。
首先为页面的发送按钮写一个click事件处理程序，我们通过addEventListner来监听这个click事件，当用户点击发送的时候，先检查输入框是否为空，如果不为空，则向服务器发送postMsg事件，将用户输入的聊天文本发送到服务器，由服务器接收并分发到除自己外的所有用户。
将以下代码添加到hichat.js的inti方法中。
www/scripts/hichat.js
document.getElementById('sendBtn').addEventListener('click', function() { var messageInput = document.getElementById('messageInput'), msg = messageInput.value; messageInput.value = ''; messageInput.focus(); if (msg.trim().length != 0) { that.socket.emit('postMsg', msg); //把消息发送到服务器 that._displayNewMsg('me', msg); //把自己的消息显示到自己的窗口中 }; }, false);
在server.js中添加代码以接收postMsg事件。
server.js
io.on('connection', function(socket) { //其他代码。。。 //接收新消息 socket.on('postMsg', function(msg) { //将消息发送到除自己外的所有用户 socket.broadcast.emit('newMsg', socket.nickname, msg); }); });
然后在客户端接收服务器发送的newMsg事件，并将聊天消息显示到页面。
将以下代码显示添加到hichat.js的init方法中了。
this.socket.on('newMsg', function(user, msg) { that._displayNewMsg(user, msg); });
运行程序，现在可以发送聊天消息了。
发送图片
上面已经实现了基本的聊天功能了，进一步，如果我们还想让用户可以发送图片，那程序便更加完美了。
图片不同于文字，但通过将图片转化为字符串形式后，便可以像发送普通文本消息一样发送图片了，只是在显示的时候将它还原为图片。
在这之前，我们已经将图片按钮在页面放好了，其实是一个文件类型的input，下面只需在它身上做功夫便可。