1.聊天框切换
1.1.定义全局字典
//globe chat record dic
GLOBAL_CHAT_RECORD_DIC = {
'single':{},
'group':{},
}
1.2.增加归档
//在切换之前把之前的聊天内容归档
var current_session_id = $(".chat-box-title").attr("contact-id");
var current_session_type = $(".chat-box-title").attr("contact-type");
if(current_session_id){
GLOBAL_CHAT_RECORD_DIC【current_session_type】【current_session_id】 = $(".chat-box-window").html()
}
1.2.获取新内容
//获取新内容
var new_contact_chat_record = GLOBAL_CHAT_RECORD_DIC【contact_type】【contact_id】;
//如果是第一次从字典取值
if(typeof new_contact_chat_record == 'undefined'){
new_contact_chat_record = '';
}
//将内容赋予到对话框
$(".chat-box-window").html(new_contact_chat_record)
1.4.测试切换
2.消息展现到对话框
2.1.消息解析
function GetNewMsgs() {
console.log("--- getting new message ---");
$.getJSON("{% url 'get_new_msgs' %}",function(callback){
console.log(callback);
ParseNewMsgs(callback);//把新消息进行解析
GetNewMsgs();
});//end post
}
2.2.消息定义
function ParseNewMsgs(callback) {
var current_session_type = $(".chat-box-title").attr("contact-type");
var current_session_id = $(".chat-box-title").attr("contact-id");
for(var i in callback){
console.log(callback【i】);
// { from: "1", to: "5", type: "single", msg: "\n22", timestamp: 1521081612.0092783 }
if(callback【i】.from == current_session_id && current_session_type == callback【i】.type){
//此消息的发送方当前正在跟我聊天
var msg_item_ele = "" +
"" + callback【i】.from + "" +
"" + callback【i】.timestamp + "" +
"" + callback【i】.msg + "" +
"";
$(".chat-box-window").append(msg_item_ele);
}//end if
}//enf for
}
2.3.测试发送
ckl 向贾岛发消息：
贾岛给ckl回消息：
消息时断时续
3.消息暂存，登录后就接收
3.1.暂存消息到字典
for(var i in callback){
console.log(callback【i】);
// { from: "1", to: "5", type: "single", msg: "\n22", timestamp: 1521081612.0092783 }
var msg_item_ele = "" +
"" + callback【i】.from + "" +
"" + callback【i】.timestamp + "" +
"" + callback【i】.msg + "" +
"";
if(callback【i】.from == current_session_id && current_session_type == callback【i】.type){
//此消息的发送方当前正在跟我聊天
$(".chat-box-window").append(msg_item_ele);
} else {
//消息发送者当前没打开聊天框，消息暂存内存
if(GLOBAL_CHAT_RECORD_DIC【callback【i】.type】【callback【i】.from】){
GLOBAL_CHAT_RECORD_DIC【callback【i】.type】【callback【i】.from】 += msg_item_ele;
}else {
GLOBAL_CHAT_RECORD_DIC【callback【i】.type】【callback【i】.from】 = msg_item_ele;
}
}//end if
}//enf for
3.2.测试发送
3.2.1.贾岛没有在线的情况下发送
发送消息给贾岛：
贾岛不在线：
贾岛收取：
4.未读消息数量显示及取消
4.1.未读消息显示
4.1.1.增加新消息提醒
初始状态为隐藏及消息数量为0：
[/span>span class="badge hide"
新消息提醒：
//新消息提醒
//var contact_ele = $(".list-group li【contact-type='single'】").filter("li【contact-id='3'】")【0】;
var contact_ele = $(".list-group li【contact-type='"+ callback【i】.type +"'】").filter("li【contact-id='"+ callback【i】.from +"'】")【0】;
var current_new_msg_num = $(contact_ele).find(".badge").text();
$(contact_ele).find(".badge").removeClass("hide");
var ckl = $(contact_ele).find(".badge").text(parseInt(current_new_msg_num)+1);
4.1.2.测试新消息提醒
向贾岛发消息：
接收ckl的消息：
4.2.接收消息后，隐藏消息
4.2.1.隐藏消息
//将内容赋予到对话框
$(".chat-box-window").html(new_contact_chat_record)
//消息接收完毕后，隐藏提醒信息
var contact_ele = $(".list-group li【contact-type='"+ contact_type +"'】").filter("li【contact-id='"+ contact_id +"'】");
$(contact_ele).find(".badge").text(0);
$(contact_ele).find(".badge").addClass("hide");
4.2.2.测试消息接收后隐藏
发送消息：
接收消息：
5.群组聊天
5.1.群组展示
5.1.1.前端添加
基本跟用户没有区别，相对应的字段修改为group
[/span>div role="tabpanel" class="tab-pane" id="group-tab"
[/span>ul class="list-group"
{% for group in request.user.userprofile.group_members.select_related %}
[/span>li contact-type="group" contact-id="{
{ group.id }}" onclick="OpenChatWindow(this)" class="list-group-item"
[/span>span class="badge hide"
[/span>span class="contact-name"
{% endfor %}
5.1.2.显示群组
5.2.群组发消息
5.2.1.修改view，增加group
@login_required
def send_msg(request):
print(request.POST)
print(request.POST.get("msg"))
print(request.POST.get('data'))
msg_data = request.POST.get('data')
#如果消息存在
if msg_data:
msg_data = json.loads(msg_data)
#消息增加时间蹉
msg_data【'timestamp'】 = time.time()
#如果消息类型为‘single’
if msg_data【'type'】 == 'single':
if not GLOBAL_MSG_QUEUES.get(int(msg_data【"to"】)):
GLOBAL_MSG_QUEUES【int(msg_data【"to"】)】 = queue.Queue()
GLOBAL_MSG_QUEUES【int(msg_data【"to"】)】.put(msg_data)
else:
group_obj = models.WebGroup.objects.get(id=msg_data【'to'】)
for member in group_obj.members.select_related():
#如果字典不存在这个用户的queue
if not GLOBAL_MSG_QUEUES.get(member.id):
GLOBAL_MSG_QUEUES【int(member.id)】 = queue.Queue()
if member.id != request.user.userprofile.id:
GLOBAL_MSG_QUEUES【member.id】.put(msg_data)
5.2.2.前端展示修改
function ParseNewMsgs(callback) {
var current_session_type = $(".chat-box-title").attr("contact-type");
var current_session_id = $(".chat-box-title").attr("contact-id");
for(var i in callback){
console.log(callback【i】);
if(callback【i】.type == 'single'){
var msg_from_contact_id = callback【i】【'from'】;
} else {//如果是group
var msg_from_contact_id = callback【i】【'to'】;
}
// { from: "1", to: "5", type: "single", msg: "\n22", timestamp: 1521081612.0092783 }
var msg_item_ele = "" +
"" + msg_from_contact_id + "" +
"" + callback【i】.timestamp + "" +
"" + callback【i】.msg + "" +
"";
if(callback【i】.from == current_session_id && current_session_type == callback【i】.type){
//此消息的发送方当前正在跟我聊天
$(".chat-box-window").append(msg_item_ele);
} else {
//消息发送者当前没打开聊天框，消息暂存内存
if(GLOBAL_CHAT_RECORD_DIC【callback【i】.type】【msg_from_contact_id】){
GLOBAL_CHAT_RECORD_DIC【callback【i】.type】【msg_from_contact_id】 += msg_item_ele;
}else {
GLOBAL_CHAT_RECORD_DIC【callback【i】.type】【msg_from_contact_id】 = msg_item_ele;
}
}//end if
//新消息提醒
//var contact_ele = $(".list-group li【contact-type='single'】").filter("li【contact-id='3'】")【0】;
var contact_ele = $(".list-group li【contact-type='"+ callback【i】.type +"'】").filter("li【contact-id='"+ msg_from_contact_id +"'】")【0】;
var current_new_msg_num = $(contact_ele).find(".badge").text();
//代码效果参考：http://www.jhylw.com.cn/095532223.html
$(contact_ele).find(".badge").removeClass("hide");var ckl = $(contact_ele).find(".badge").text(parseInt(current_new_msg_num)+1);
}//enf for
}
5.2.3.测试结果
ckl 发群消息：
贾岛接收群消息：
贾岛回复消息：
贾岛查看消息：
ckl 查看消息：
5.2.4.用户名展示
添加用户名字段：
if (contact_type && contact_id){
var msg_item ={
'from': "{ { request.user.userprofile.id }}",
'from_name':"{ { request.user.userprofile.name }}",
'to' :contact_id,
'type':contact_type,
'msg' : msg_text
};
if(callback【i】.type == 'single'){
var msg_from_contact_id = callback【i】【'from_name'】;
} else {//如果是group
var msg_from_contact_id = callback【i】【'to'】;
}
