用node.js,socket.io搞一个IM即时通讯

文章类别 in internet

安装node.js

—> https://nodejs.org/en/

安装express

Express 是一种保持最低程度规模的灵活 Node.js Web 应用程序框架,为 Web 和移动应用程序提供一组强大的功能。

—> http://expressjs.com/zh-cn/

使用以下命令安装 express:

$ npm install express-generator -g

使用express新建一个工程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

  G:\study>express wechat

  warning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional options


   create : wechat
   create : wechat/package.json
   create : wechat/app.js
   create : wechat/routes
   create : wechat/routes/index.js
   create : wechat/routes/users.js
   create : wechat/public
   create : wechat/views
   create : wechat/views/index.jade
   create : wechat/views/layout.jade
   create : wechat/views/error.jade
   create : wechat/bin
   create : wechat/bin/www
   create : wechat/public/javascripts
   create : wechat/public/images
   create : wechat/public/stylesheets
   create : wechat/public/stylesheets/style.css

   install dependencies:
     > cd wechat && npm install

   run the app:
     > SET DEBUG=wechat:* & npm start

在生成的package.json中添加依赖:

1
2
3
4
"dependencies": {
    "express": "3.0.6",
    "socket.io": "*"
  }

接着执行命令 npm install 安装模块。

1
G:\study\wechat>npm install

首页和登陆页面

通过 https://github.com/thesadboy/ChatRoom 获取相关的样式复制到自己的工程中:

IM

index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>

登陆注册

在app.js中添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var users = {};//存储在线用户列表的对象

app.get('/', function (req, res) {
  if (req.cookies.user == null) {
    res.redirect('/signin'); //跳转到登陆页面
  } else {
    res.sendfile('views/index.html'); //跳转到index
  }
});
app.get('/signin', function (req, res) {
  res.sendfile('views/signin.html'); //登陆
});
app.post('/signin', function (req, res) {
  if (users[req.body.name]) {
    //存在,则不允许登陆
    res.redirect('/signin');
  } else {
    //不存在,把用户名存入 cookie 并跳转到主页
    res.cookie("user", req.body.name, {maxAge: 1000*60*60*24*30});
    res.redirect('/');
  }
});

使用cookie:

1
app.use(express.cookieParser());

用户上线提醒

在app.js中使用socket.io

1
2
3
4
var server = http.createServer(app);
var io = require('socket.io').listen(server);
io.sockets.on('connection', function (socket) {
});

在index中添加js:

1
2
 <script src="/socket.io/socket.io.js"></script>
 <script type="text/javascript" src="javascripts/chat.js"></script>

在 public/javascripts 文件夹下新建 chat.js ,内容如下:

1
2
3
$(document).ready(function() {
  var socket = io.connect();
});

运行报错:

1
2
3
4
5
6
7
8
9
10
11
Error: Most middleware (like cookieParser) is no longer bundled with Express and must be installed separately. Please see https://github.com/senchalabs/connect#middleware.
    at Function.get (G:\study\wechat\node_modules\express\lib\express.js:107:13)
    at Object.<anonymous> (G:\study\wechat\app.js:36:17)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Function.Module.runMain (module.js:684:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3

解决:

1
npm install express@">=3.0.0 <4.0.0" --save