max-width: 99%;
}
.timespan {
color: #ddd;
}
.items {
height: 30px;
}
#colorStyle {
width: 50px;
border: none;
padding: 0;
}
/*custom the file input*/
.imageLable {
position: relative;
}
#sendImage {
position: absolute;
width: 52px;
left: 0;
opacity: 0;
overflow: hidden;
}
/*end custom file input*/
#messageInput {
width: 440px;
max-width: 440px;
height: 90px;
max-height: 90px;
}
#sendBtn {
width: 50px;
height: 96px;
float: right;
}
#emojiWrapper {
display: none;
width: 500px;
bottom: 105px;
position: absolute;
background-color: #aaa;
box-shadow: 0 0 10px #555;
}
#emojiWrapper img {
margin: 2px;
padding: 2px;
width: 25px;
height: 25px;
}
#emojiWrapper img:hover {
background-color: blue;
}
.emoji{
display: inline;
}
footer {
text-align: center;
}
为了让项目有一个良好的目录结构便于管理，这里在www文件夹下又新建了一个styles文件夹存放样式文件main.css，然后新建一个scripts文件夹存放前端需要使用的js文件比如hichat.js（我们前端所有的js代码会放在这个文件中），而我们的服务器js文件server.js位置不变还是放在最外层。
同时再新建一个content文件夹用于存放其他资源比如图片等，其中content文件夹里再建一个emoji文件夹用于存入表情gif图，后面会用到。最后我们项目的目录结构应该是这样的了：
├─node_modules
└─www
├─content
│ └─emoji
├─scripts
└─styles此刻打开页面你看到的是一个淡黑色的遮罩层，而接下来我们要实现的是用户昵称的输入与服务器登入。这个遮罩层用于显示连接到服务器的状态信息，而当连接完成之后，会出现一个输入框用于昵称输入。
上面HTML代码里已经看到，我们将www/scripts/hichat.js文件已经引入到页面了，下面开始写一些基本的前端js开始实现连接功能。
定义一个全局变量用于我们整个程序的开发HiChat，同时使用window.onload在页面准备好之后实例化HiChat，调用其init方法运行我们的程序。
www/scripts/Hichat.js
window.onload = function() {
//实例并初始化我们的hichat程序
var hichat = new HiChat();
hichat.init();
};//定义我们的hichat类
var HiChat = function() {
this.socket = null;
};
//向原型添加业务方法
HiChat.prototype = {
init: function() {//此方法初始化程序
