nodejs即时聊天

来源：互联网发布：网络限制怎么解决编辑：程序博客网时间：2024/05/21 13:58

一直想做一个即时聊天的应用，前几天看到了socket.io,感觉还不错，自己略加修改，感觉挺不错的。官网上给的例子很简单，下面改进了一点，实现了历史消息的推送。

demo地址:chat.codeboy.me

其中服务器端代码:

var app = require('express')();var http = require('http').Server(app);var io = require('socket.io')(http);var history = new Array();app.get('/', function(req, res){  res.sendfile('chat.html');});io.on('connection', function(socket){  socket.on('chat message', function(msg){    io.emit('chat message', msg);    addMsg(msg);  });  socket.on('login message', function(msg){    socket.join('history room');    for(var i=0;i<history.length;i++){      io.in('history room').emit('chat message', history[i]);   }      io.in('history room').emit('chat message', 'lyd__上面是最近的一些信息');    socket.leave('history room');    socket.join('chat room');      io.emit('chat message',msg);    addMsg(msg);  });});http.listen(3000, function(){  console.log('listening on *:3000');});function addMsg(msg){ history.push(msg); if(history.length>100)    history.shift();};

聊天页面代码：

<!doctype html><html>  <head>    <title>聊天室</title>    <style>      * { margin: 0; padding: 0; box-sizing: border-box; }      body { font: 20px Helvetica, Arial; }      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }      form input { border: 0; padding: 10px; width: 90%;  }      form button { width: 10%; background: rgb(130, 224, 255); border: none;  padding: 10px; }      #messages { list-style-type: none; margin: 0; padding: 0; }      #messages li { padding: 5px 10px 5px 10px; }    </style>  </head>  <body>    <ul id="messages"></ul>    <form action="">      <input id="m" autocomplete="off" /><button id="btn">登录</button>    </form>    <script src="/socket.io/socket.io.js"></script>    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>    <script>      var socket = io();      var login  =true;      var username = "" ;       var myDate = new Date();      $('form').submit(function(){         if(login){           username = $('#m').val();           if(username.length==0){               alert("请输入用户名");               return false;            }           login = false ;           socket.emit('login message', "lyd__<font color=blue>"+username + '</font>加入了聊天室   '+myDate.getMonth()+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds());           $('#btn').html("发送");         }else {            socket.emit('chat message', username +"##"+ $('#m').val());        }         $('#m').val('');        return false;      });        socket.on('chat message', function(msg){        var item = msg.split("##",2);        if(msg.indexOf('lyd__')==0)          $('#messages').append('<li style="text-align:center; font-size:12px;margin-top:1px; color:red; background-color:#eee;">' +msg.substr(5)+'</li>');        else if(msg.indexOf(username)==0){          $('#messages').append('<li style="text-align:right; font-size:12px; color:red;">'+item[0]+':</li>');          $('#messages').append('<li style="text-align:right;padding-top:0px; padding-left:30%;color:purple;">'+item[1]+'</li>');        }else {          $('#messages').append('<li style="text-align:left;font-size:12px; color:red;">'+item[0]+':</li>');          $('#messages').append('<li style="text-align:left;padding-top:0px; padding-right:30%; color:purple;">'+item[1]+'</li>');        }      });    </script>  </body></html>

这样就实现了一个聊天室，进入后输入用户名，登录，之后服务器返回最近的100条消息。

1 0