为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统

简介: websocket是个啥?webSocket是一种在单个TCP连接上进行全双工通信的协议webSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输

websocket是个啥?

webSocket是一种在单个TCP连接上进行全双工通信的协议

webSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输

现在,很多网站为了实现推送技术,所用的技术都是轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。
而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信,但依然需要反复发出请求。而且在Comet中,普遍采用的长链接,也会消耗服务器资源。

在这种情况下,HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯

轮询是几个意思?

轮询是最原始的实现实时Web应用的解决方案。轮询技术要求客户端以设定的时间间隔周期性地向服务端发送请求,频繁地查询是否有新的数据改动。明显地,这种方法会导致过多不必要的请求,浪费流量和服务器资源。总之就是一种low到爆炸的原始作坊水平的技术。

本文通过基于dwebsocket库来将socket嵌入到django服务中,使其服务兼具http协议和socket协议,能够达到实时前后端通信,后端主动推送等功能

安装dwebsocket库

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple dwebsocket

定义视图文件的逻辑views.py

#导入websocket装饰器
from dwebsocket.decorators import accept_websocket


#接收前端信息
@accept_websocket
def test_socket(request):
    if request.is_websocket():
        for message in request.websocket:
            c=str(message,encoding='utf-8')
      print(c)
            request.websocket.send(message)

#主动推送消息
@accept_websocket
def test_websocket(request):
    if request.is_websocket():
        while 1:
            time.sleep(1) ## 向前端发送时间
            dit = {
                'time':time.strftime('%Y.%m.%d %H:%M:%S',time.localtime(time.time()))
            }
            request.websocket.send(json.dumps(dit))

路由配置urls.py

#websocket
path('socket_test',TemplateView.as_view(template_name='md_admin/socket.html')),
path('websocket_test',TemplateView.as_view(template_name='md_admin/socket_push.html')),
path('test_socket',test_socket),
path('test_websocket',test_websocket),

定义前端发送消息的页面 socket.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Chat Room</title>
</head>
<body>
    <input id="chat-message-input" type="text" size="100"/><br/>
    <input id="chat-message-submit" type="button" value="Send" onclick='sendmessage()'/>
</body>
<script>
   
   //生成socket对象
   var socket = new WebSocket("ws:" + window.location.host + "/md_admin/test_socket");


            socket.onopen = function () {
                console.log('WebSocket open');//成功连接上Websocket
            };
            socket.onmessage = function (e) {
                console.log('message: ' + e.data);//打印服务端返回的数据
            };
            socket.onclose=function(e){
              console.log(e);
              socket.close(); //关闭TCP连接
            };
            if (socket.readyState == WebSocket.OPEN){
            socket.onopen();
            }

            window.s = socket;

function sendmessage(){

    window.s.send(document.getElementById("chat-message-input").value);

}

    
</script>
</html>

然后再定义一个页面,测试后台的主动推送socket\_push.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Chat Room</title>
</head>
<body>
</body>
<script>
   
   //生成socket对象
   var socket = new WebSocket("ws:" + window.location.host + "/md_admin/test_websocket");


            socket.onopen = function () {
                console.log('WebSocket open');//成功连接上Websocket
            };
            socket.onmessage = function (e) {
                console.log('message: ' + e.data);//打印服务端返回的数据
            };
            socket.onclose=function(e){
              console.log(e);
              socket.close(); //关闭TCP连接
            };
            if (socket.readyState == WebSocket.OPEN){
            socket.onopen();
            }

   

    
</script>
</html>

可以看到,前后端无论是前端发送消息,还是后端主动推送消息,全部基于websocket,实现了真正意义上的实时通信,另外基于dwebsocket的聊天室可以在这里下载源码

https://gitee.com/QiHanXiBei/mei\_do\_mall/blob/master/dj\_websocket.zip

相关文章
|
3天前
|
前端开发 JavaScript Java
智能客服系统的技术栈解析-唯一客服系统技术架构优势
“唯一客服系统”采用 Vue.js 2.x + ElementUI 构建前端,实现响应式界面,支持多端适配;后端基于 Golang + Gin + GORM,具备高性能与高并发处理能力。系统支持私有化部署,提供灵活定制、AI 扩展能力,技术栈简洁易维护,兼顾开发者友好与企业级应用需求。
16 1
|
3天前
|
测试技术 Go
客服系统程序入口文件解析-唯一客服系统源码开发
该代码为 Go 语言编写的客服系统命令行程序入口,结构清晰,使用 cmd 包启动业务逻辑,可能基于 cobra 框架实现,具备良好可扩展性与可维护性,适用于服务启动与管理。
111 69
|
11天前
|
机器学习/深度学习 人工智能 自然语言处理
AI 智能客服搭建实战:如何建立一个企业级智能客服系统?
2025 年全球 AI 客服市场规模超 800 亿美元,企业面临意图识别误差、多语言支持等挑战。合力亿捷通过混合云架构、双引擎驱动等四层技术架构,结合小样本微调 + 主动学习等策略,实现服务效率提升 50% 以上、人工成本降低 40%,助力企业突破 “人工智障” 困境。
147 3
|
11天前
|
缓存 移动开发 网络协议
纯血鸿蒙NEXT即时通讯/IM系统:RinbowTalk正式发布,全源码、纯ArkTS编写
RainbowTalk是一套基于MobileIMSDK的产品级鸿蒙NEXT端IM系统,目前已正式发布。纯ArkTS、从零编写,无套壳、没走捷径,每一行代码都够“纯”(详见:《RainbowTalk详细介绍》)。 MobileIMSDK是一整套开源IM即时通讯框架,历经10年,超轻量级、高度提炼,一套API优雅支持 UDP 、TCP 、WebSocket 三种协议,支持 iOS、Android、H5、标准Java、小程序、Uniapp、鸿蒙NEXT,服务端基于Netty编写。
50 1
|
27天前
|
缓存 自然语言处理 监控
基于通义大模型的智能客服系统构建实战:从模型微调到API部署
本文详细解析了基于通义大模型的智能客服系统构建全流程,涵盖数据准备、模型微调、性能优化及API部署等关键环节。通过实战案例与代码演示,展示了如何针对客服场景优化训练数据、高效微调大模型、解决部署中的延迟与并发问题,以及构建完整的API服务与监控体系。文章还探讨了性能优化进阶技术,如模型量化压缩和缓存策略,并提供了安全与合规实践建议。最终总结显示,微调后模型意图识别准确率提升14.3%,QPS从12.3提升至86.7,延迟降低74%。
273 14
|
17天前
|
人工智能 自然语言处理 语音技术
深度解析:AI语音客服系统如何重塑客户服务体验与主流解决方案探析
在数字化浪潮下,AI语音客服凭借高效、便捷、24小时在线的优势,成为企业提升服务效率、优化体验的重要工具。本文详解其核心技术、应用价值、选型要点及市场主流方案,如阿里云通义晓蜜、合力亿捷等,助力企业智能化升级。
103 1
|
2天前
|
移动开发 缓存 前端开发
可二次开发的在线客服系统-前后端混合渲染模式
服务端渲染(SSR)结合API交互,提升首屏加载速度与SEO友好性,适用于混合渲染模式的Web应用。
12 0
|
3天前
|
Kubernetes Go 数据库
客服系统命令行程序-Cobra 命令行应用入口
唯一客服系统是基于 Go 语言与 Cobra 框架构建的命令行工具,用于管理在线客服系统。支持启动、安装和停止服务,具备清晰的命令结构和良好的扩展性,便于维护与功能拓展。
17 0
|
1月前
|
人工智能 自然语言处理 语音技术
2025年国内主流智能客服系统:技术架构与能力深度解析
本文分析了2025年国内智能客服市场的技术格局与系统能力,从核心技术栈(NLP、知识图谱、语音技术等)到市场梯队划分,深入探讨了第一梯队的综合型平台和第二梯队的场景化服务。以合力亿捷为例,剖析其端到端AI技术栈、大模型融合、全渠道融合及运营优化能力,并对比国际顶尖通用AI在语义理解、多模态交互和自主学习方面的启示。最后为企业提供选择智能客服系统的五大考量因素,强调技术与业务场景的深度融合,助力企业实现更高效、智能的客户服务体验。
322 2
|
2月前
|
运维
工单系统【WGCAT】如何设置工单类型和标签
**简介**:WGCAT 是一款免费、易用的轻量级工单系统,适合多种业务场景。通过修改配置文件 `config/application.yml` 中的 `workType` 参数,可自定义工单类型(如故障处理、安装服务等),重启程序后生效。此外,创建工单时还可设置标签以增强分类管理。下载地址:www.wgstart.com。

热门文章

最新文章