前端社团

一对一通讯

2016-10-24  本文已影响20人  wuyumumu

Client A 发送类似的数据给 Server。Server 接收数据根据 to 值找到 Client B 的 Socket 连接并将消息转发给 Client B。

用户登录就把用户存储到在线用户列表中去,触发‘login’事件:

public里面chat.js进行初始化:

function init() {
    socket = io();
    socket.emit('login', uid);
      ...
   }

www里面进行更改:

 socket.on('login', function(usrName) {  
      var uid=usrName;
       users[uid] = socket.id;
       sockets[socket.id] = {uid:uid,socket:socket};
      online.push(uid);
  });

用户给指定好友发送消息

public>chat.js里面进行选择好友进行聊天:

function doChat() {
    fid = $(this).attr('id'); //获取好友的id
    var fname = $(this).find("#friendName").text();
    $("#chatObj p").text(fname);
    setUnreadMsg();  //更改未读的信息
    $(".historyMsg").prepend('<ul class="chatContent" id="v'+fid+'"></ul>');
    $(".historyMsg .chatContent").hide();
    $("#v"+fid).show(); //切换页面到与该好友聊天的页面
    initMsg(); //初始化与好友的历史消息
}
//选择好友聊天时,初始化与好友的聊天记录
function initMsg() {
    $.ajax({
        type: "POST",
        url: "/users/initMsg",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify({
            'userId': uid,
            'fid': fid
        }),
        success: function (data) {
            for(var i=0; i<data.length;i++) {
                var fromID=data[i].from;
                var toId=data[i].to;
                if(uid == fromID) {
                    if(fid==toId) {
                        displayNewMsg('me', data[i].content);
                    }
                } else if(fid == fromID) {
                    if(uid ==toId){
                        displayNewMsg(fid,data[i].content);
                    }
                } else {
                    console.log("the news chat with others");
                }
            }
        }
  });
}

发送消息触发private message事件

function doSend() {
    var msg=$('#messageInput').val();
    $('#messageInput').val('');
    socket.emit('private message',uid,fid,msg);
    displayNewMsg('me', msg);//把消息显示到出来
    return false;
}

www里面private message事件

 socket.on('private message', function(uid,fid,message){
    var status;
    if(online.indexOf(fid)!==-1){
      status = 1;
      sockets[users[fid]].socket.emit('newMsg',fid,message);//找到好友的socket.id然后把消息发送给好友,触发chat.js的newMsg事件
    } else{
      // 如果不在线的话,状态为0
      status = 0;
    }
//不管在不在线都把消息存到message数据库中去
var data={
      userId: uid,
      from: uid,
      to: fid,
      status: status,
      content: message
    }
    //把消息存到数据库中去
    dbHelper.addMsg(data,function (success,doc) {
      console.log("right");
    });

}

然后chat.js里面newMsg以及显示消息displayNewMsg事件:

function init() {
     ···
      socket.on('newMsg', function(id,msg) {
        displayNewMsg(id, msg);
    });
}

function displayNewMsg(user, msg) {
    $("#v"+fid).append('<li class="'+(user === "me" ? "me" : "other")+'">'+
        '<div class="time">'+
        '<span>time</span>'+
        '</div>'+
        '<div class="msg">'+
        '<img src="/images/2.jpg" class="img-rounded">'+
        '<p>'+msg+'</p>'+
        '</div>'+
        '</li>'
    );
}

离线消息

之前把消息存到数据库里面了用户这边和好友都要存,如果好友不在的话该好友的状态信息 的状态就设为0,如果好友在线的话,就把该好友的消息状态设为1,

exports.addMsg = function(data, cb) {
  //这个地方获取的是从ajax传过来的数据
  var userMsg = new Msg({
      usrId: data.userId,
      from: data.from,
      to: data.to,
      content: data.content,
      status: 1
  });
  userMsg.save(function (err) {
    if(err){
      console.log(err)
    } else{
      console.log("user right");
      cb(null,entries);
    }
  })
  var friendMsg = new Msg({
    usrId: data.to,
    from: data.from,
    to: data.to,
    content: data.content,
    status: data.status
  });
  friendMsg.save(function (err) {
    if(err){
      console.log(err);
    } else{
      console.log("friend right");
      cb(null,entries);
    }
  });
}

用户上线的时候有未读消息:
初始化未读消息:

function unreadMsg() {
  $.ajax({
    type: "POST",
    url: "/users/unreadMsg",
    dataType: "json",
    contentType: "application/json",
    data: JSON.stringify({
      'userId': uid
    }),
    success: function (data) {
      for(var i=0;i<data.length;i++){
        $('#'+data[i].from).find('.unreadMsg').show();
        $('#'+data[i].from).find('#friendName').css('margin-left','0');
        var j=$('#'+data[i].from).find('.unreadMsg').html();
        $('#'+data[i].from).find('.unreadMsg').html(parseInt(j)+1);//更改来自好友的未读消息数量
      }
    }
  });
}
//路由
router.post('/unreadMsg', function(req, res, next) {
  dbHelper.unreadMsg(req.body,function (success, doc) {
    res.send(doc);
  });
});
//到数据库中去查找来自好友的状态为0的消息
exports.unreadMsg = function(data, cb) {
  Msg.find({usrId: data.userId,to: data.userId,status:0})
  // .populate('from')
    .exec(function(err,docs){
      var msgList = new Array();
      for(var i = 0;i < docs.length; i++) {
        msgList.push(docs[i].toObject());
      }
      cb(true,msgList);
    });
}

查看未读消息
public chat.js里面

//更改未读消息的显示,查看之后就把消息的状态设置为1
function setUnreadMsg(){
    $.ajax({
        type: "POST",
        url: "/users/setUnreadMsg",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify({
            'userId': uid,
            'fid':fid
        }),
        success: function (data) {
            $('#'+fid).find('.unreadMsg').html('0');
            $('#'+fid).find('.unreadMsg').hide();
            $('#'+fid).find('#friendName').css('margin-left','10px');
        }
    });
}
//路由
router.post('/setUnreadMsg', function(req, res, next) {
  dbHelper.setUnreadMsg(req.body,function (success, doc) {
    res.send(doc);
  });
});
//dbHelper把消息的状态更改为1
exports.setUnreadMsg = function(data, cb) {
  Msg.find({usrId: data.userId,from:data.fid,to: data.userId,status:0})
    .update({$set: {'status': 1}})
    .exec(function(err,docs){
      var msgList = new Array();
      for(var i = 0;i < docs.length; i++) {
        msgList.push(docs[i].toObject());
      }
      cb(true,msgList);
    });
}
遇到的问题:

测试的时候在同一个浏览器下打开两个页面进行聊天的时候A发送给B的消息,B能收到,B回复给A的消息,A却收不到。

更改

发现是在同一个浏览器下共享同一个session,在google设置增加一个用户,这样就可以了

上一篇下一篇

猜你喜欢

热点阅读