`
xieye
  • 浏览: 830836 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

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
就能看到聊天室效果。







分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics