添加静态html
我们在项目根目录创建public文件夹，public文件夹里面新建chat.html文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聊天室</title> </head> <body> 这是我们的聊天室 </body> </html>
现在我们刷新下页面，你看页面出现了：
>
到这里其实一个最简单的浏览器和web服务器协作的项目就已经完成，后面我们要不断完善页面，给服务器后端加业务功能来实现多人聊天室。
基本功能实现
登陆功能，我们需要一个用户名，（不需要密码），该用户名必须客户端服务器都有存储。每次传输信息基本都需要包括用户名，否则不知道是谁发的。
群聊功能，我们需要分辨信息来己方和对方
登陆功能实现
login页面重构
最基本的登陆界面由一个用户名输入框和登录按钮组成：
//chat.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聊天室</title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.container{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color: grey;
padding: 50px;
}
.container .title{
width:300px;
margin: 0 auto;
font-size: 30px;
font-family: 'Franklin Gothic Medium';
font-weight: bold;
text-align: center;
margin-bottom:50px;
}
.container .login-wrap{
width:400px;
padding: 20px;
border: 1px solid #000;
margin: 0 auto;
text-align: center;
}
.login-wrap .user-ipt{
width:360px;
text-align: center;
vertical-align: middle;
}
.login-wrap .login-button{
width:60px;
height:24px;
line-height:20px;
font-size: 14px;
padding: 2px 0;
border-radius: 5px;
margin-top:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="title">欢迎来到ddvdd聊天室</div>
<div class="login-wrap">
<div class="user-ipt">
<span class="user-name">用户名：</span>
<input id="name" class="name-ipt" type="text" />
</div>
<button id="loginbutton" class="login-button">登陆</button>
</div>
</div>
</body>
</html>
简单的加点样式，静态页面就完成了，我们刷新下页面：
login页面交互
昨天下午写到一半。。。部门突然要去团建聚会，只能匆匆提交代码，草草了事。今天一大早来到公司继续给大家码