nodejs即时聊天
生活随笔
收集整理的這篇文章主要介紹了
nodejs即时聊天
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一直想做一個(gè)即時(shí)聊天的應(yīng)用，前幾天看到了socket.io,感覺還不錯(cuò)。自己略加改動(dòng)，感覺挺不錯(cuò)的。官網(wǎng)上給的樣例非常easy，以下改進(jìn)了一點(diǎn)，實(shí)現(xiàn)了歷史消息的推送。
demo地址:chat.codeboy.me
當(dāng)中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("請(qǐng)輸入用戶名");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("發(fā)送");}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>
這樣就實(shí)現(xiàn)了一個(gè)聊天室，進(jìn)入后輸入username，登錄，之后server返回近期的100條消息。
總結(jié)
以上是生活随笔為你收集整理的nodejs即时聊天的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： std::bind 详解及参数解析
- 下一篇： OutLook2016修改注册表迁移.o