为美多商城(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月前
|
自然语言处理 监控 数据可视化
海拍客与瓴羊达成合作,通过智能客服系统提升员工内部服务体验
海拍客与瓴羊达成合作,通过智能客服系统提升员工内部服务体验
|
3月前
|
自然语言处理 监控 机器人
中国联通济南分公司与瓴羊达成合作,以智能客服系统提升员工内部服务体验
中国联通济南分公司与瓴羊达成合作,以智能客服系统提升员工内部服务体验
|
6月前
|
监控 前端开发 Cloud Native
解决WebSocket通信:前端拿不到最后一条数据的问题
解决WebSocket通信:前端拿不到最后一条数据的问题
130 0
|
25天前
|
运维 安全 数据安全/隐私保护
工单系统大揭秘!选择工单系统需注意的关键因素!
这篇内容介绍了工单系统的种类和选择指南。主要类型包括IT工单系统、客户服务工单管理系统、设备维护工单管理系统和全渠道工单系统。选择合适的工单系统需考虑功能需求、企业预算、易用性、系统稳定性、售后服务和技术安全。推荐了Zoho Desk作为好用的工单系统选项,它提供专业服务和免费试用。
24 1
|
5月前
|
Go API 开发者
Golang Websocket框架:实时通信的新选择
Golang Websocket框架:实时通信的新选择
|
1月前
|
存储 网络协议 JavaScript
浅谈WebSocket及如何搭建实时聊天系统
WebSocket 是一种在客户端和服务器之间提供全双工、双向通信的网络协议。它是基于TCP/IP协议栈的应用层协议,旨在实现浏览器与服务器之间的实时、低延迟且高效的长连接通信
128 1
|
1月前
|
机器学习/深度学习 自然语言处理
基于深度学习的自然语言处理技术在智能客服系统中的应用
【2月更文挑战第21天】随着人工智能技术的不断发展,自然语言处理(NLP)技术在各个领域得到了广泛应用。本文主要探讨了基于深度学习的自然语言处理技术在智能客服系统中的应用。首先介绍了深度学习和自然语言处理的基本概念,然后分析了智能客服系统的工作原理和技术要求,接着详细阐述了基于深度学习的自然语言处理技术在智能客服系统中的具体应用,包括语义理解、情感分析和问答系统等。最后对基于深度学习的自然语言处理技术在智能客服系统中的优势和挑战进行了总结。
42 1
|
1月前
|
前端开发 JavaScript Java
【十五】springboot整合WebSocket实现聊天室
【十五】springboot整合WebSocket实现聊天室
29 0
|
4月前
|
前端开发 JavaScript Java
springboot websocket通信
springboot websocket通信
31 1
|
4月前
|
前端开发 网络协议 JavaScript
WebSocket: 实时通信的理解与认识
WebSocket: 实时通信的理解与认识

热门文章

最新文章