一直想做一个即时聊天的应用,前几天看到了socket.io,感觉还不错。自己略加改动,感觉挺不错的。官网上给的样例非常easy,以下改进了一点,实现了历史消息的推送。
demo地址:chat.codeboy.me
当中server端代码:
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>
这样就实现了一个聊天室,进入后输入username,登录,之后server返回近期的100条消息。