多语言展示
当前在线:700今日阅读:183今日分享:45

nodejs + websocket.io web聊天

nodejs作为服务器端应用,结合websocket.io实现web聊天,取代ajax轮询查找数据。
工具/原料
1

node.js

2

websocket.io.js

方法/步骤
2

服务器端脚本:var app = require('express')();var http = require('http').Server(app);var io = require('socket.io')(http);var fs = require('fs');var util = require('util');app.get('/', function(req, res){ res.send('

Welcome Realtime Server

');});app.get('/client',function(req,res){ var txt = fs.readFileSync('../client/index.html'); res.end(txt)});app.get('/client.js',function(req,res){ var txt = fs.readFileSync('../client/client.js'); res.end(txt)})app.get('/style.css',function(req,res){ var txt = fs.readFileSync('../client/style.css'); res.end(txt)})app.get('/socket.io.js',function(req,res){ var txt = fs.readFileSync('../client/socket.io.js'); res.end(txt)})io.on('connection', function(socket){ console.log('a user connected'); fs.writeFile('kungs.txt',util.inspect(socket,true),function(err){ if(err) throw err; console.log('write file success') }); //监听新用户加入 socket.on('login', function(obj){ //将新加入用户的唯一标识当作socket的名称,后面退出的时候会用到 socket.name = obj.userid; //检查在线列表,如果不在里面就加入 if(!onlineUsers.hasOwnProperty(obj.userid)) { onlineUsers[obj.userid] = obj.username; //在线人数+1 onlineCount++;            chatUsers[onlineCount] = socket; } //向所有客户端广播用户加入 io.emit('login', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj}); console.log(obj.username+'加入了聊天室'); }); //监听用户退出 socket.on('disconnect', function(){ //将退出的用户从在线列表中删除 if(onlineUsers.hasOwnProperty(socket.name)) { //退出用户的信息 var obj = {userid:socket.name, username:onlineUsers[socket.name]}; //删除 delete onlineUsers[socket.name]; //在线人数-1 onlineCount--; //向所有客户端广播用户退出 io.emit('logout', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj}); console.log(obj.username+'退出了聊天室'); } }); //监听用户发布聊天内容 socket.on('message', function(obj){        //向单个用户发布的消息        io.emit('to'+obj.touid,obj);        io.emit('to'+obj.fromuid,obj);        //向所有客户端广播发布的消息 console.log(obj.username+'对'+'to'+obj.touid+'说:'+obj.content); });  });http.listen(8080, function(){ console.log('listening on *:8080');});

3

客户端js脚本:(function () { var d = document, w = window, p = parseInt, dd = d.documentElement, db = d.body, dc = d.compatMode == 'CSS1Compat', dx = dc ? dd: db, ec = encodeURIComponent; w.CHAT = { msgObj:d.getElementById('message'), screenheight:w.innerHeight ? w.innerHeight : dx.clientHeight, username:null, userid:null, socket:null,        touid:null,        fromuid:null, //让浏览器滚动条保持在最低部 scrollToBottom:function(){ w.scrollTo(0, this.msgObj.clientHeight); }, //退出 logout:function(){ //this.socket.disconnect(); location.reload(); }, //提交聊天消息内容 submit:function(){ var content = d.getElementById('content').value; if(content != ''){ var obj = {                    userid: this.userid,                    username: this.username, content: content,                    touid: this.touid,                    fromuid: this.fromuid }; var ss = this.socket.emit('message', obj);               /* for(var p in ss){                    alert(p+'    '+ss[p]);                }*///当连接socket失败的时候执行                if(ss.disconnected == true){                    var contentDiv = '

'+obj.content+'send fail
';                    var usernameDiv = ''+obj.username+'';                    var section = d.createElement('section');                        section.className = 'user';                        section.innerHTML = contentDiv + usernameDiv;                        CHAT.msgObj.appendChild(section);                        CHAT.scrollToBottom();                } d.getElementById('content').value = ''; } return false; }, genUid:function(){ return new Date().getTime()+''+Math.floor(Math.random()*899+100); }, //更新系统消息,本例中在用户加入、退出的时候调用 updateSysMsg:function(o, action){ //当前在线用户列表 var onlineUsers = o.onlineUsers; //当前在线人数 var onlineCount = o.onlineCount; //新加入用户的信息 var user = o.user; //更新在线人数 var userhtml = ''; var separator = ''; for(key in onlineUsers) {        if(onlineUsers.hasOwnProperty(key)){ userhtml += separator+onlineUsers[key]; separator = '、'; }    } d.getElementById('onlinecount').innerHTML = '当前共有 '+onlineCount+' 人在线,在线列表:'+userhtml; //添加系统消息 var html = ''; html += '
'; html += user.username; html += (action == 'login') ? ' 加入了聊天室' : ' 退出了聊天室'; html += '
'; var section = d.createElement('section'); section.className = 'system J-mjrlinkWrap J-cutMsg'; section.innerHTML = html; this.msgObj.appendChild(section); this.scrollToBottom(); }, init:function(username,touid,fromuid){ this.userid = this.genUid(); this.username = username;            this.touid = touid;            this.fromuid = fromuid; d.getElementById('showusername').innerHTML = this.username; this.msgObj.style.minHeight = (this.screenheight - db.clientHeight + this.msgObj.clientHeight) + 'px'; this.scrollToBottom(); //连接websocket后端服务器 this.socket = io.connect('http://localhost:8080'); //告诉服务器端有用户登录 //alert('userid:'+this.userid +', username:'+this.username); this.socket.emit('login', {userid:this.userid, username:this.username}); //监听新用户登录 this.socket.on('login', function(o){ CHAT.updateSysMsg(o, 'login'); }); //监听用户退出 this.socket.on('logout', function(o){ CHAT.updateSysMsg(o, 'logout'); });             //监听私聊消息发送            this.socket.on('to'+this.fromuid, function(obj){                var contentDiv = '
'+obj.content+'
';                var usernameDiv = ''+obj.username+'';                var section = d.createElement('section');                if(obj.fromuid == CHAT.fromuid && obj.touid == CHAT.touid){                    section.className = 'user';                    section.innerHTML = contentDiv + usernameDiv;                    CHAT.msgObj.appendChild(section);                    CHAT.scrollToBottom();                }                if(obj.touid ==CHAT.fromuid && obj.fromuid == CHAT.touid){                    section.className = 'service';                    section.innerHTML = usernameDiv + contentDiv;                    CHAT.msgObj.appendChild(section);                    CHAT.scrollToBottom();                }            }); } }; //通过“回车”提交信息 d.getElementById('content').onkeydown = function(e) { e = e || event; if (e.keyCode === 13) { CHAT.submit(); } };})();

4

PHP页面:                    WebIM               

   
       
            Websocket聊天                    | 退出       
   
   
       
           
               
               
           
           
               
                                   
               
                                   
           
       
   

推荐信息