nodejs 的群聊及私聊

今天我们来学习一下使用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同级的目录下

  
<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"/>allspan>  
   <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" >  
            
          <div class="panel-heading" >消息中心div>  
          <div class="panel-body" id='text_all' style="height:500px; overflow:auto">  
            <div class="well well-sm">alldiv>  
          div>  
        div>  
        <input id="content"/>  
        <button onclick="send()"  class="btn btn-success">sendbutton>  

      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='
  • 0all
  • '
    $("#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='
  • '">'" class="badge">0'+name+'
  • '
    $("#userlist").append(text) } if($("#text_"+self).length==0){ var panel='
    '" style="height:500px; overflow:auto">
    和'+self+'私聊中心
    '
    $('.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='
    '+myDate.toLocaleString()+":"+data+'
    '
    $("#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>

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