万幸，HTML5新增了一个专门用于颜色选取的input标签，并且Chrome对它的支持非常之赞，直接弹出系统的颜色拾取窗口。
IE及FF中均是一个普通的文本框，不过不影响使用，只是用户只能通过输入具体的颜色值来进行颜色设置，没有Chrome里面那么方便也直观。
之前我们的_displayNewMsg方法可以接收一个color参数，现在要做的就是每次发送消息到服务器的时候，多加一个color参数就可以了，同时，在显示消息时调用_displayNewMsg的时候将这个color传递过去。
下面是修改hichat.js中消息发送按钮代码的示例：
document.getElementById('sendBtn').addEventListener('click', function() {
var messageInput = document.getElementById('messageInput'),
msg = messageInput.value,
//获取颜色值
color = document.getElementById('colorStyle').value;
messageInput.value = '';
messageInput.focus();
if (msg.trim().length != 0) {
//显示和发送时带上颜色值参数
that.socket.emit('postMsg', msg, color);
that._displayNewMsg('me', msg, color);
};
}, false);
同时修改hichat.js中接收消息的代码，让它接收颜色值
this.socket.on('newMsg', function(user, msg, color) {
that._displayNewMsg(user, msg, color);
});这只是展示了发送按钮的修改，改动非常小，只是每次消息发送时获取一下颜色值，同时emit事件到服务器的时候也带上这个颜色值，这样前端在显示时就可以根据这个颜色值为每个不两只用户显示他们自己设置的颜色了。剩下的就是按相同的做法把发送图片时也加上颜色，这里省略。
最后效果：
按键操作
将以下代码添加到hichat.js的inti方法中，这样在输入昵称后，按回车键就可以登陆，进入聊天界面后，回车键可以发送消息。
document.getElementById('nicknameInput').addEventListener('keyup', function(e) {
if (e.keyCode == 13) {
var nickName = document.getElementById('nicknameInput').value;
if (nickName.trim().length != 0) {
that.socket.emit('login', nickName);
};
};
}, false);
document.getElementById('messageInput').addEventListener('keyup', function(e) {
var messageInput = document.getElementById('messageInput'),
msg = messageInput.value,
color = document.getElementById('colorStyle').value;
if (e.keyCode == 13 && msg.trim().length != 0) {
