nodejs群聊和私聊

自行安装,代码如下

先安装nodejs

服务器代码

[javascript] view plain copy
  1. var app = require('http').createServer(handler)  
  2. var io = require('socket.io')(app);  
  3. var fs = require('fs');  
  4.   
  5. app.listen(83);  
  6. function handler (req, res) {  
  7.   fs.readFile(__dirname + '/index.html',  
  8.   function (err, data) {  
  9.     if (err) {  
  10.       res.writeHead(500);  
  11.       return res.end('Error loading index.html');  
  12.     }  
  13.   
  14.     res.writeHead(200);  
  15.     res.end(data);  
  16.   });  
  17. }     
  18. io.on('connection'function (socket) {   
  19.     //获取所有用户  
  20.     var user_list=socket.nsp.adapter.rooms;  
  21.     //将用户发送到页面  
  22.     io.emit("user_list",user_list);  
  23.     socket.on('disconnect'function () {  
  24.         io.emit("user_list",user_list);  
  25.     });  
  26.       
  27.     socket.on('per2per',function(name,data){  
  28.         //console.log(socket.id);  
  29.         //console.log(data.user)  
  30.         var user=data.user.substr(2);  
  31.         //console.log(user)  
  32.         //console.log(data.content)  
  33.         if(data.user=='all'){  
  34.             io.emit("message",'all',data.content)  
  35.         }else{  
  36.             socket.broadcast.to(data.user).emit("message",name,data.content);  
  37.             socket.emit("message",user,data.content);  
  38.         }  
  39.           
  40.     })  
  41.       
  42.     //admin模块结束  
  43.           
  44. });  


客户端代码

[javascript] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta name="viewport" content="width=device-width, initial-scale=1">  
  5. <script src="js/jquery-1.11.1.min.js"></script>  
  6.     <script src="js/socket.io-1.4.5.js"></script>  
  7.    <title>nodejs聊天</title>  
  8.    <link href="css/bootstrap.min.css" rel="stylesheet">  
  9.    <script src="js/bootstrap.min.js"></script>  
  10. </head>  
  11. <style>  
  12.     .panel-body{  
  13.         display:none;  
  14.     }  
  15. </style>  
  16. <body>  
  17. <div class="container">  
  18.   
  19.    <h1 id="count"></h1>  
  20.     昵称id:<span id="self" style="color:red"/></span>  
  21.     发送给:<span id="friend" style="color:green" value="all"/>all</span>  
  22.    <div class="row">  
  23.       <div class="col-md-4" style="overflow:auto">  
  24.          <ul class="list-group" id="userlist" onclick="javascript:void(0)">  
  25.            <li class="list-group-item">  
  26.               <span class="badge">新</span>  
  27.               24*7 支持  
  28.            </li>  
  29.         </ul>  
  30.       </div>  
  31.       <div class="col-md-8" >  
  32.           
  33.         <div class="panel panel-default" >  
  34.           <!-- Default panel contents -->  
  35.           <div class="panel-heading" >消息中心</div>  
  36.           <div class="panel-body" id='text_all' style="height:500px; overflow:auto">  
  37.             <div class="well well-sm">all</div>  
  38.           </div>  
  39.         </div>  
  40.         <input id="content"/>  
  41.         <button onclick="send()"  class="btn btn-success">send</button>  
  42.           
  43.       </div>  
  44.    </div><br>  
  45.      
  46. </div>  
  47.   
  48.   
  49. <script>  
  50. $("#text_all").css('display','block');  
  51. var socket = io('http://'+location.host+':83'); // TIP: io()  
  52.   socket.on('connect'function () {   
  53.     $("#self").html(socket.id);//获取自己socke.id  
  54.     //获取用户列表  
  55.     socket.on('user_list',function(data){  
  56.         $("#userlist").empty();  
  57.         //console.log(data);  
  58.         var count=0;  
  59.         //所有人标签  
  60.         var text='<li class="list-group-item" value="all"><span id="badge_all" class="badge">0</span>all</li>'  
  61.         $("#userlist").append(text)  
  62.               
  63.         for(var x in data){       
  64.             //console.log(x)  
  65.             count++;  
  66.             var name=x;  
  67.             var self = x.substr(2)  
  68.             //生成用户列表  
  69.             if(self!=socket.id){  
  70.                 var text='<li class="list-group-item" value="'+name+'"><span id="badge_'+self+'" class="badge">0</span>'+name+'</li>'  
  71.                 $("#userlist").append(text)  
  72.             }  
  73.             if($("#text_"+self).length==0){  
  74.               var panel='<div class="panel-body" id="text_'+self+'" style="height:500px; overflow:auto"><div class="well well-sm">和'+self+'私聊中心</div></div>'  
  75.                 $('.panel').append(panel);  
  76.             }         
  77.         }  
  78.         //$(".panel-body").hide();  
  79.         //$("#text_all").show();  
  80.         $("#count").html("在线人数:"+count);      
  81.     })  
  82.     //来接受消息  
  83.     socket.on('message',function(name,data){  
  84.         //console.log(data);  
  85.         //console.log(name)  
  86.         //当前时间  
  87.         var myDate=new Date()  
  88.         var data_text='<div class="well well-sm">'+myDate.toLocaleString()+":"+data+'</div>'  
  89.         $("#text_"+name).append(data_text)  
  90.         //未读消息数+1         
  91.         var val=$('#badge_'+name).html()  
  92.         //console.log(val)  
  93.         $('#badge_'+name).html(parseInt(val)+1)           
  94.         //消息滚动到底部  
  95.         $("#text_"+name).scrollTop(99999999);   
  96.     })  
  97.   });  
  98.   
  99.   //消息发送  
  100.   function send(){  
  101.      var content= $("#content").val();  
  102.      //console.log(content.length)  
  103.      var length=content.length  
  104.      if(length==0){  
  105.          alert("不能为空")  
  106.          return false;  
  107.      }else if(length>20){  
  108.          alert("消息太长了")  
  109.          return false;  
  110.      }  
  111.      var user= $("#friend").attr('value');  
  112.      //console.log(content);  
  113.      //console.log(user);  
  114.      socket.emit("per2per",socket.id,{user:user,content:content});  
  115.   }  
  116.   //点击用户列表  
  117.   $(document).on("click",".list-group-item",function(){  
  118.       $('.list-group-item').css('background-color','white')  
  119.       $('.list-group-item').css('color','black')  
  120.       $(this).css('background-color','green')  
  121.       $(this).css('color','white')  
  122.       var val= $(this).attr('value');  
  123.       $("#friend").attr('value',val)  
  124.       $("#friend").html(val)  
  125.       
  126.         if(val!='all'){  
  127.            val = val.substr(2)  
  128.         }  
  129.       $(".panel-body").hide();  
  130.       $("#text_"+val).show();       
  131.   })  
  132.     
  133.   
  134. </script>  
  135. </body>  
  136. </html> 

你可能感兴趣的:(nodejs群聊和私聊)