-
Notifications
You must be signed in to change notification settings - Fork 330
第二章 搭建多人聊天室
wybcp edited this page May 20, 2014
·
3 revisions
前面我们学习了 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>
现在，我们完成了页面的设计。