Client A 發(fā)送類似的數(shù)據(jù)給 Server灾杰。Server 接收數(shù)據(jù)根據(jù) to 值找到 Client B 的 Socket 連接并將消息轉(zhuǎn)發(fā)給 Client B尼荆。
用戶登錄就把用戶存儲(chǔ)到在線用戶列表中去,觸發(fā)‘login’事件:
public里面chat.js進(jìn)行初始化:
function init() {
socket = io();
socket.emit('login', uid);
...
}
www里面進(jìn)行更改:
socket.on('login', function(usrName) {
var uid=usrName;
users[uid] = socket.id;
sockets[socket.id] = {uid:uid,socket:socket};
online.push(uid);
});
用戶給指定好友發(fā)送消息
public>chat.js里面進(jìn)行選擇好友進(jìn)行聊天:
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(); //初始化與好友的歷史消息
}
//選擇好友聊天時(shí),初始化與好友的聊天記錄
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");
}
}
}
});
}
發(fā)送消息觸發(fā)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然后把消息發(fā)送給好友解虱,觸發(fā)chat.js的newMsg事件
} else{
// 如果不在線的話,狀態(tài)為0
status = 0;
}
//不管在不在線都把消息存到message數(shù)據(jù)庫中去
var data={
userId: uid,
from: uid,
to: fid,
status: status,
content: message
}
//把消息存到數(shù)據(jù)庫中去
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>'
);
}
離線消息
之前把消息存到數(shù)據(jù)庫里面了用戶這邊和好友都要存漆撞,如果好友不在的話該好友的狀態(tài)信息 的狀態(tài)就設(shè)為0殴泰,如果好友在線的話,就把該好友的消息狀態(tài)設(shè)為1浮驳,
exports.addMsg = function(data, cb) {
//這個(gè)地方獲取的是從ajax傳過來的數(shù)據(jù)
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);
}
});
}
用戶上線的時(shí)候有未讀消息:
初始化未讀消息:
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);//更改來自好友的未讀消息數(shù)量
}
}
});
}
//路由
router.post('/unreadMsg', function(req, res, next) {
dbHelper.unreadMsg(req.body,function (success, doc) {
res.send(doc);
});
});
//到數(shù)據(jù)庫中去查找來自好友的狀態(tài)為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里面
//更改未讀消息的顯示悍汛,查看之后就把消息的狀態(tài)設(shè)置為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把消息的狀態(tài)更改為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);
});
}
遇到的問題:
測試的時(shí)候在同一個(gè)瀏覽器下打開兩個(gè)頁面進(jìn)行聊天的時(shí)候A發(fā)送給B的消息,B能收到至会,B回復(fù)給A的消息离咐,A卻收不到。
更改
發(fā)現(xiàn)是在同一個(gè)瀏覽器下共享同一個(gè)session奋献,在google設(shè)置增加一個(gè)用戶健霹,這樣就可以了