nodejs 的群聊及私聊

来源：互联网发布：中盈数据恢复机编辑：程序博客网时间：2024/04/28 17:35

今天我们来学习一下使用nodejs实现及时的群聊及私聊。
首先我们得在LINUX或Windows下安装我们的nodejs。具体安装步骤见菜鸟教程|nodejs。
下面我们直接进行代码部分
首先是server.js部分，也是我们开启服务的文件，通过监听83端口实现接收、发送消息。开启服务命令node server.js

var app = require('http').createServer(handler)  var io = require('socket.io')(app);  var fs = require('fs');  app.listen(83);  function handler (req, res) {    fs.readFile(__dirname + '/index.html',    function (err, data) {      if (err) {        res.writeHead(500);        return res.end('Error loading index.html');      }      res.writeHead(200);      res.end(data);    });  }     io.on('connection', function (socket) {       //获取所有用户      var user_list=socket.nsp.adapter.rooms;      //将用户发送到页面      io.emit("user_list",user_list);      socket.on('disconnect', function () {          io.emit("user_list",user_list);      });      socket.on('per2per',function(name,data){          //console.log(socket.id);          //console.log(data.user)          var user=data.user.substr(2);          //console.log(user)          //console.log(data.content)          if(data.user=='all'){              io.emit("message",'all',data.content)          }else{              socket.broadcast.to(data.user).emit("message",name,data.content);              io.emit("message",user,data.content);          }      })      //admin模块结束  });

接下来是index.html
HTML中引入了socket.io-1.4.5.js这个文件需要我们自己来下载
通过npm install socket.io这个命令下载到同级目录下
打开下载的目录socket.io\node_modules\socket.io-client\socket.io.js就是我们需要的文件了，复制到与index.html同级的目录下

<!DOCTYPE html>  <html>  <head>  <meta name="viewport" content="width=device-width, initial-scale=1">  <script src="jquery-1.11.1.min.js"></script>      <script src="socket.io.js"></script>     <title>nodejs聊天</title>     <link href="bootstrap.min.css" rel="stylesheet">     <script src="bootstrap.min.js"></script>  </head>  <style>      .panel-body{          display:none;      }  </style>  <body>  <div class="container">     <h1 id="count"></h1>      昵称id:<span id="self" style="color:red"/></span>      发送给：<span id="friend" style="color:green" value="all"/>all</span>     <div class="row">        <div class="col-md-4" style="overflow:auto">           <ul class="list-group" id="userlist" onclick="javascript:void(0)">             <li class="list-group-item">                <span class="badge">新</span>                24*7 支持             </li>          </ul>        </div>        <div class="col-md-8" >          <div class="panel panel-default" >            <!-- Default panel contents -->            <div class="panel-heading" >消息中心</div>            <div class="panel-body" id='text_all' style="height:500px; overflow:auto">              <div class="well well-sm">all</div>            </div>          </div>          <input id="content"/>          <button onclick="send()"  class="btn btn-success">send</button>        </div>     </div><br>  </div>  <script>  $("#text_all").css('display','block');  var socket = io('http://'+location.host+':83'); // TIP: io()改成自己的域名  socket.on('connect', function () {       $("#self").html(socket.id);//获取自己socke.id      //获取用户列表      socket.on('user_list',function(data){          $("#userlist").empty();          //console.log(data);          var count=0;          //所有人标签          var text='<li class="list-group-item" value="all"><span id="badge_all" class="badge">0</span>all</li>'          $("#userlist").append(text)          for(var x in data){                   //console.log(x)              count++;              var name=x;              var self = x.substr(2)              //生成用户列表              if(self!=socket.id){                  var text='<li class="list-group-item" value="'+name+'"><span id="badge_'+self+'" class="badge">0</span>'+name+'</li>'                  $("#userlist").append(text)              }              if($("#text_"+self).length==0){                var panel='<div class="panel-body" id="text_'+self+'" style="height:500px; overflow:auto"><div class="well well-sm">和'+self+'私聊中心</div></div>'                  $('.panel').append(panel);              }                 }          //$(".panel-body").hide();          //$("#text_all").show();          $("#count").html("在线人数："+count);          })      //来接受消息      socket.on('message',function(name,data){          //console.log(data);          //console.log(name)          //当前时间          var myDate=new Date()          var data_text='<div class="well well-sm">'+myDate.toLocaleString()+":"+data+'</div>'          $("#text_"+name).append(data_text)          //未读消息数+1                 var val=$('#badge_'+name).html()          //console.log(val)          $('#badge_'+name).html(parseInt(val)+1)                   //消息滚动到底部          $("#text_"+name).scrollTop(99999999);       })    });    //消息发送    function send(){       var content= $("#content").val();       //console.log(content.length)       var length=content.length       if(length==0){           alert("不能为空")           return false;       }else if(length>20){           alert("消息太长了")           return false;       }       var user= $("#friend").attr('value');       //console.log(content);       //console.log(user);       socket.emit("per2per",socket.id,{user:user,content:content});    }    //点击用户列表    $(document).on("click",".list-group-item",function(){        $('.list-group-item').css('background-color','white')        $('.list-group-item').css('color','black')        $(this).css('background-color','green')        $(this).css('color','white')        var val= $(this).attr('value');        $("#friend").attr('value',val)        $("#friend").html(val)          if(val!='all'){             val = val.substr(2)          }        $(".panel-body").hide();        $("#text_"+val).show();         })  </script>  </body>  </html>

1 0