express+socket.io学习建简单聊天室

2017 05
当前系统：windows7
安装node，没有任何难度，到node官网下载，选高版本的。

下面是安装express
http://www.expressjs.com.cn/starter/generator.html

顺序执行：
npm install express -g
npm install express-generator -g

现在，用express生成器创建项目
express myapp // 这个命令注意只是生成一些目录和文件，但并没有装express的类库
              // 而且，屏幕提示会告诉你下面几个命令怎么敲。

注意，用
express --help能看到express的使用帮助，包括指定模板之类的。

$ cd myapp
$ npm install    // 这个命令把类库以及依赖类库全部安装了，依据是package.json

然后，
set DEBUG=myapp & npm start // 注意，已屏幕提示为准
这样，服务端已经启动。

客户端：只需
http://localhost:3000/
就能看到应用。
===================================================================

socket。io安装
首先，在package.json文件的 dependencies键下加一项，请注意语法和逗号
"socket.io":"*"

然后，在myapp目录下执行
npm install
这样，就装好了socket.io


这样，就把socket类库加入了express。

此时，启动项目，（set DEBUG=myapp & npm start）
然后，用浏览器
http://localhost:3000/socket.io/socket.io.js
发现神奇之处，
有js文件内容返回了！

现在，修改app.js
自己寻找，在两个合适的地方分别加上
var iotest = require('./routes/iotest');
app.use('/iotest', iotest);
在route下加入iotest.js文件，
内容：

var express = require('express');
var router = express.Router();
var  fs=  require('fs');

/* GET users listing. */
router.get('/', function(req, res, next) {
    //res.send("this is ioetst route");
    fs.readFile('./public/iotest.html',  function  (err,  data)  {
        if  (err)  {
          console.log(err.toString());
          
        }else{
           //console.log(data.toString());
            res.send(data.toString());
         //   res.send("哈哈");
        }
    });
    
//    var data= fs.readFileSync('./public/iotest.html','utf-8');
//    res.send(data);
    
});

module.exports = router;

在public下加index.html

<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<center>
<h2>聊天室</h2>
<div id='div1' style='text-align:left; width:500;height:300px;border:1px solid red;overflow:auto'></div>
<br>
<input id="id1" style='width:300px;height:50px;' type="text" /> &nbsp;&nbsp;&nbsp;&nbsp;
<button onclick="send2()">发送消息</button>
</center>
<script>
  var socket = io.connect('http://localhost:3000/');
  var id = Math.floor(Math.random()*100)+1;
  $("#div1").html('');
  $("#div1").html($("#div1").html() +"<br>"+'开始聊天了！' );
  data_arr=[];
  socket.emit('newuser', { data: id });
  socket.on('g', function (data) { // 这是收到消息的提示。
      $("#div1").html(  $("#div1").html() +"<br>"+data.toString() );
      
    //console.log(data);
    //socket.emit('my other event', { my: 'data' });
  });
  function send2(){
      //alert();
      var aa = $("#id1").val();
      if  (aa) {
        socket.emit('event', { data:  $("#id1").val() ,id:id });
        $("#id1").val('');
      }
  }
  
</script>

app.js中间一部分

app.use('/', index);
app.use('/users', users);
app.use('/iotest', iotest);

app.xieye = function(io,client){
    client.on('newuser', function(data){
        console.log('新用户:'+data.data+'上线了');
        io.sockets.emit('g','新用户:'+data.data+'上线了');
     });
    
    client.on('event', function(data){
       console.log( "用户id:" +data.id+ '   内容:'+data.data);
       io.sockets.emit('g',"用户id:" +data.id+ '   内容:'+data.data);
    });
    client.on('disconnect', function(){
        io.sockets.emit('g',"用户id:" +data.id+ '   内容:'+data.data);
    });
}

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

bin\www 中间的代码

var server = http.createServer(app);
var io = require('socket.io')(server);
io.on('connection',function(client){
  app.xieye(io, client);
});

本示例的服务端端口就是3000，无论是html，还是socket
打开网址
localhost:3000/iotest
就能看到聊天室效果。