前面我们学习了 socket.io 的基本知识。现在，我们开始搭建多人聊天室。
首先我们用 Express 新建一个工程，打开命令行，输入：
express N-chat
打开N-chat目录下的 package.json ，在 dependencies 中删除 "jade": "*", 添加 "socket.io": "*" ，然后切换回命令行输入 cd N-chat & npm install 安装模块。
聊天室的样式及布局借鉴于 @thesadboy 的 https://github.com/thesadboy/ChatRoom 。这样我们可以省下设计页面的时间，专心学习聊天室的架构。
接下来，引入所需文件：
打开 public/images 文件夹，下载 bj.png 添加到该文件夹下。
打开 public/javascripts 文件夹，下载 jquery.min.js 和 jquery.cookie.js 添加到该文件夹下。
打开 public/stylesheets 文件夹，下载 chat.css 、common.css 、signin.css 添加到该文件夹下。
删除 views 文件夹下的 index.jade 和 layout.jade ，新建 index.html，内容如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>聊天室</title> <script type="text/javascript" src="javascripts/jquery.min.js"></script> <script type="text/javascript" src="javascripts/jquery.cookie.js"></script> <link type="text/css" rel="stylesheet" href="stylesheets/common.css"> <link type="text/css" rel="stylesheet" href="stylesheets/chat.css"> </head> <body> <div id="contain"> <div id="content"> <div id="content_show"> <div id="contents"></div> </div> <div id="content_saying"> <div id="toolbar"></div> <div id="input_content" contenteditable="true"></div> <div id="sayingto">你好 <span id="from"></span> ，你正在对 <span id="to"></span> 说</div> <div id="say">发送</div> </div> </div> <div id="users_online"> <div id="usersbar"> <div id="user_label">在线用户</div> <div id="users_list"> <ul id="list"></ul> </div> </div> </div> </div> </body> </html>
新建 signin.html ，内容如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>登陆</title> <link type="text/css" rel="stylesheet" href="stylesheets/signin.css"> <link type="text/css" rel="stylesheet" href="stylesheets/common.css"> </head> <body> <div id="content"> <form style="margin-top:70px;" method="post"> <div class="form_line"> <div class="form_label">昵称：</div> <input type="text" name="name" /> </div> <div class="form_line"> <div class="form_label"></div> <button class="button gray" type="submit">登录</button> <button class="button gray" type="reset">取消</button> </div> </form> </div> </body> </html>
现在，我们完成了页面的设计。