AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2024-06-27 25
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 技术好文共享：第二十二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'】;


}

文章标签：
前端开发
游客zn7mvnkypuy76
目录
相关文章
hnrk7epeorhrk
|
5月前
|
供应链 安全 计算机视觉
技术好文共享：运筹学之重点总结
技术好文共享：运筹学之重点总结
hnrk7epeorhrk
44 0
hnrk7epeorhrk
|
5月前
|
定位技术
技术好文共享：（官网）虚幻3
技术好文共享：（官网）虚幻3
hnrk7epeorhrk
36 1
jjczqyjxgdegi
|
5月前
|
容器
技术好文共享：阿诺尔德给5至15岁孩子出的数学题
技术好文共享：阿诺尔德给5至15岁孩子出的数学题
jjczqyjxgdegi
54 0
游客zn7mvnkypuy76
|
5月前
|
Windows
技术好文共享：简单介绍SXS的一些有意思的特性
技术好文共享：简单介绍SXS的一些有意思的特性
游客zn7mvnkypuy76
30 0
游客zn7mvnkypuy76
|
5月前
|
算法 Linux 调度
技术好文共享：详解操作系统中断
技术好文共享：详解操作系统中断
游客zn7mvnkypuy76
54 0
hnrk7epeorhrk
|
5月前
|
缓存 JavaScript 前端开发
技术好文共享：移动端小功能杂记（一）
技术好文共享：移动端小功能杂记（一）
hnrk7epeorhrk
25 0
游客zn7mvnkypuy76
|
5月前
|
存储 自然语言处理 编译器
技术好文共享：程序的基本概念
技术好文共享：程序的基本概念
游客zn7mvnkypuy76
47 0
游客zn7mvnkypuy76
|
5月前
|
传感器 存储 数据采集
技术好文共享：焕新！CANape19真香！
技术好文共享：焕新！CANape19真香！
游客zn7mvnkypuy76
74 0
hnrk7epeorhrk
|
5月前
|
数据采集 XML JSON
技术好文共享：老司机教你下载tumblr上视频和图片的正确姿势
技术好文共享：老司机教你下载tumblr上视频和图片的正确姿势
hnrk7epeorhrk
116 0
hnrk7epeorhrk
|
5月前
|
存储 传感器 数据处理
技术好文共享：计算机发展历程
技术好文共享：计算机发展历程
hnrk7epeorhrk
70 0

热门文章

最新文章

  • 1
    阿里Java代码规约插件即将全球首发，邀您来发布仪式现场
  • 2
    淘宝 NPM 镜像
  • 3
    MySQL数据表生成ER图
  • 4
    Object reference not set to an instance of an object.
  • 5
    锐捷网络&视易K米，携手助力2016腾讯全球合作伙伴万人大会
  • 6
    WF4.0实战(九)：猜数字游戏，测下你的智力
  • 7
    数据结构复习笔记(6)
  • 8
    OutOfMemoryError与StackOverFlowError
  • 9
    Percona XtraDB Cluster 集群环境建立与验证指南
  • 10
    在没有ISA管控的时候
  • 1
    小程序数据绑定机制的优点
    18
  • 2
    小程序的 API 做了什么处理，能够做到全局变量的隐藏
    16
  • 3
    在 Babel 插件中使用 TypeScript 类型
    13
  • 4
    Kotlin - 函数与Lambda表达式
    14
  • 5
    Kotlin - 区间与数组
    12
  • 6
    Kotlin - 运算符与中缀表达式
    14
  • 7
    babel 原理，怎么写 babel 插件
    13
  • 8
    Kotlin - 面向对象之抽象类与接口
    11
  • 9
    Kotlin - 参数与异常
    10
  • 10
    Kotlin - 分支与循环
    10

    • 相关课程

    更多
  • 阿里小蜜中的机器阅读技术
  • 深入浅出白话Serverless-1024程序员节创造营公益课
  • 机器阅读技术与应用
  • 场景实践- 新手玩转云计算-创建炫酷的简历网页
  • 高校精品课-大连理工大学 -计算机组织与结构
  • 基于通义灵码实现高效 AI 编码

    • 相关电子书

    更多
  • 【云栖精选7月刊】抛开晦涩的算法、模型，让我们来谈谈互联网架构
  • 云栖专家带你技术进阶之理解Java内存管理机制
  • 总监课第四期公共云弹性计算最佳实践 - 6个省钱窍门+4个典型误区第八节：典型误区二：云盘数据高枕无忧

    • 相关实验场景

    更多
  • 奥运时刻！零代码生成奥运风格AI写真。
  • 【AI破次元壁合照】少年白马醉春风，函数计算一键部署AI绘画平台
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • 重温童年的“五子棋”，赢取专属阿里云Serverless证书
  • 制作开放场景
    • 下一篇
    在 BatchCompute 上玩转 Blender 渲染