原文转载自「刘悦的技术博客」https://v3u.cn/a_id_67

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

原文转载自「刘悦的技术博客」 https://v3u.cn/a_id_67

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

  1. Django2.0.4 + websocket 实现实时通信，主动推送，聊天室及客服系统

    webSocket是一种在单个TCP连接上进行全双工通信的协议. webSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在WebSocket API中,浏览器 ...

  2. 后端Python3+Flask结合Socket.io配合前端Vue2.0实现简单全双工在线客服系统

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_158 在之前的一篇文章中:为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统,详 ...

  3. 用SignalR 2.0开发客服系统[系列1:实现群发通讯]

    前言 交流群:195866844 先说一下我为什么会写这个博客吧,(首先说一下,我是一个小菜鸟,讲的不好请指导 - -,)  前段时间公司的项目涉及到在B/S上使用即时通讯,(其实就是做一个B/S的客 ...

  4. 用SignalR 2.0开发客服系统[系列2:实现聊天室]

    前言 交流群:195866844 上周发表了 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 这篇文章,得到了很多帮助和鼓励,小弟在此真心的感谢大家的支持.. 这周继续系列2,实现聊天室 ...

  5. 用SignalR 2.0开发客服系统[系列3:实现点对点通讯]

    前言 交流群:195866844 目录: 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 用SignalR 2.0开发客服系统[系列2:实现聊天室] 真的很感谢大家的支持,今天发表系列3 ...

  6. 用SignalR 2.0开发客服系统[系列4:负载均衡的情况下使用SignalR]

    前言 交流群:195866844 目录: 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 用SignalR 2.0开发客服系统[系列2:实现聊天室] 用SignalR 2.0开发客服系统 ...

  7. 基于.NetCore2.1。服务类库采用.Net Standard2.0，兼容.net 4.6.1消息推送服务

    基于.NetCore2.1.服务类库采用.Net Standard2.0,兼容.net 4.6.1消息推送服务 https://www.cnblogs.com/ibeisha/p/weixinServ ...

  8. 用SignalR 2.0开发客服系统[系列5:使用SignalR的中文简体语言包和其他技术点]

    前言 交流群:195866844 目录: 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 用SignalR 2.0开发客服系统[系列2:实现聊天室] 用SignalR 2.0开发客服系统 ...

  9. DT7.0主动推送当天高质量图片数据到熊掌号展现

    <?php /* 百度当天主动推送熊掌功能 作者:68喜科技 用于:DT7.0 功能模块:优质内容推送熊掌*出图内容当天推送 */ //引入全局变量函数 defined('IN_DESTOON' ...

随机推荐

  1. swagger在线api文档搭建指南，用于线上合适么？

    在上一篇文章中,我们讲解了什么是 api,什么是 sdk: https://www.cnblogs.com/tanshaoshenghao/p/16217608.html 今天将来到我们万丈高楼平地起 ...

  2. Spring Boot整合模板引擎jsp

    jsp也算是一种模板引擎吧.整合jsp前,先说一下运行SpringBoot项目的几种方式 1. 运行SpringBoot项目的几种方式 1.1 使用内嵌Tomcat运行项目 在IDE中右键运行启动类, ...

  3. linux篇-linux 下建立多个tomcat

    第一步:复制,解压 将准备好的tomcat压缩包复制到你准备安装的目录,我的tomcat压缩包名字是tomcat.tar.gz,我的安 装目录是 /usr/java/tomcat 第二步:解压tomc ...

  4. 好客租房40-react组件基础综合案例-案例需求分析

    实现 案例的数据 渲染评论列表 有评论 没有评论 暂无评论 获取评论信息 包括评论人和受控组件 发表评论 更新评论 //导入react import React from 'react' import ...

  5. Python使用EasyOCR库对行程码图片进行OCR文字识别介绍与实践

    关注「WeiyiGeek」点我,点我 设为「特别关注」,每天带你在B站玩转网络安全运维.应用开发.物联网IOT学习! 希望各位看友[关注.点赞.评论.收藏.投币],助力每一个梦想. 文章目录 0x00 ...

  6. 开源流程引擎camunda如何扩展

    ​  市场上基于Java语言的开源工作流引擎有:osworkflow.jbpm.activiti.flowable.camunda等,其中osworkflow.jbpm流程引擎已经过时,目前主流的开源 ...

  7. 在jupyter中配置c++内核

    安装 xeus-cling conda install xeus-cling -c conda-forg xeus-cling 是一个用于编译解释于C++的Jupyter内核目前,支持Mac与Linu ...

  8. 【.NET 6】多线程的几种打开方式和代码演示

    前言: 多线程无处不在,平常的开发过程中,应该算是最常用的基础技术之一了.以下通过Thread.ThreadPool.再到Task.Parallel.线程锁.线程取消等方面,一步步进行演示多线程的一些 ...

  9. JS：条件语句1

    条件语句: 1.if...else if (condition1) { 当条件 1 为 true 时执行 } else { 当条件 1 不为 true 时执行 } if (condition1) { ...

  10. VisionPro · C# · 创建项目

    将 VisionPro 引入 C# 项目程序中需要执行以下操作: 1.更改项目程序.NET框架: 2.添加编程引用: 3.添加界面设计控件引用: VisionPro 不同版本对应不同的 .NET 框架 ...