技术好文共享：第二十二webchat（2）

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'】;

}