本项目实现了任务执行的实时进度查询

实现方式

前端websocket + 后端websocket + 后端redis订阅/发布

实现原理

任务执行后,假设用变量num标记任务执行的进度,然后将num发布为订阅的消息保存到redis队列,比如 redis_helper.public('当前任务进度为 %s' %num),django的websocket视图在特定频道订阅消息num并利用websocket协议将消息实时推送到前端,完成前端实时进度展示。

实现代码

redis订阅/发布:

class RedisHelper:
def __init__(self, key):
self.__conn = redis.Redis(host=config.host2, port=config.port2, db=config.db2)
self.chan_sub = key
self.chan_pub= key #发送消息
def public(self,msg):
# logger.info(msg)
self.__conn.publish(self.chan_pub,msg)
return True
#订阅
def subscribe(self):
#打开收音机
pub = self.__conn.pubsub()
#调频道
pub.subscribe(self.chan_sub)
#准备接收
pub.parse_response()
return pub

django视图:

@accept_websocket
def analyze(request):
if not request.is_websocket(): # 判断是不是websocket连接
file_path=request.GET.get('file_path')
file_path_id = request.GET.get('file_path_id')
file=File.objects.get_or_create(id=file_path_id)[0]
jobname=file.name
job = Job(name=jobname,file=file)
job.save()
channel = job.id
result = cluster_analyze_task.delay(channel,file_path,file_path_id)
taskid=result.id
job.task_id=taskid
job.save()
return JsonResponse({'taskid': taskid,'channel': channel},safe=False)
else:
for message in request.websocket:
obj = RedisHelper(message)
redis_sub = obj.subscribe() while True:
msg = redis_sub.parse_response()
msg = msg[2]
request.websocket.send(msg) # 发送消息到客户端
if msg.decode()=='end':
break

前端websocket:

vue的method中增加如下方法:
initWebSocket() { // 初始化weosocket
// ws地址
const wsuri = 'ws://10.39.211.151:8000/app/analyze/';
this.websock = new WebSocket(wsuri);
this.websock.onopen = this.websocketonopen;
this.websock.onmessage = this.websocketonmessage;
this.websock.onclose = this.websocketclose;
},
websocketonmessage(e) { // 数据接收
// console.log(e.data);
},
websocketsend(agentData) { // 数据发送
// 若是ws开启状态
if (this.websock.readyState === this.websock.OPEN) {
this.websock.send(agentData)
}
// 若是 正在开启状态,则等待300毫秒
else if (this.websock.readyState === this.websock.CONNECTING) {
let that = this;// 保存当前对象this
setTimeout(function() {
that.websock.send(agentData)
}, 300);
}
// 若未开启 ,则等待500毫秒
else {
this.initWebSocket();
let that = this;// 保存当前对象this
setTimeout(function() {
that.websock.send(agentData)
}, 500);
}
},
websocketonopen() {
// alert('数据发送中...');
console.log('WebSocket连接成功');
},
websocketclose(e) { // 关闭
console.log('connection closed (' + e.code + ')');
} 在创建时进行初始化
created() {
this.initWebSocket();
},

效果图

从零开始搭建django前后端分离项目 系列四(实战之实时进度)的更多相关文章

  1. 从零开始搭建django前后端分离项目 系列一(技术选型)

    前言 最近公司要求基于公司的hadoop平台做一个关于电信移动网络的数据分析平台,整个项目需求大体分为四大功能模块:数据挖掘分析.报表数据查询.GIS地理化展示.任务监控管理.由于页面功能较复杂,所以 ...

  2. 从零开始搭建django前后端分离项目 系列三(实战之异步任务执行)

    前面已经将项目环境搭建好了,下面进入实战环节.这里挑选项目中涉及到的几个重要的功能模块进行讲解. celery执行异步任务和任务管理 Celery 是一个专注于实时处理和任务调度的分布式任务队列.由于 ...

  3. 从零开始搭建django前后端分离项目 系列二(项目搭建)

    在开始项目之前,假设你已了解以下知识:webpack配置.vue.js.django.这里不会教你webpack的基本配置.热更新是什么,也不会告诉你如何开始一个django项目,有需求的请百度,相关 ...

  4. 从零开始搭建django前后端分离项目 系列六(实战之聚类分析)

    项目需求 本项目从impala获取到的数据为用户地理位置数据,每小时的数据量大概在8000万条,数据格式如下: 公司要求对这些用户按照聚集程度进行划分,将300米范围内用户数大于200的用户划分为一个 ...

  5. 从零开始搭建django前后端分离项目 系列五(实战之excel流式导出)

    项目中有一处功能需求是:需要在历史数据查询页面进行查询字段的选择,然后由后台数据库动态生成对应的excel表格并下载到本地. 如果文件较小,解决办法是先将要传送的内容全生成在内存中,然后再一次性传入R ...

  6. Django前后端分离项目部署

    vue+drf的前后端分离部署笔记 前端部署过程 端口划分: vue+nginx的端口 是81 vue向后台发请求,首先发给的是代理服务器,这里模拟是nginx的 9000 drf后台运行在 9005 ...

  7. luffy项目搭建流程(Django前后端分离项目范本)

    第一阶段: 1.版本控制器:Git      2.pip安装源换国内源    3.虚拟环境搭建        4.后台:Django项目创建 5.数据库配置              6.luffy前 ...

  8. nginx+vue+uwsgi+django的前后端分离项目部署

    Vue+Django前后端分离项目部署,nginx默认端口80,数据提交监听端口9000,反向代理(uwsgi配置)端口9999 1.下载项目文件(统一在/opt/luffyproject目录) (1 ...

  9. List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac

    List多个字段标识过滤 class Program{  public static void Main(string[] args) { List<T> list = new List& ...

随机推荐

  1. 使用SQL查看表字段和字段说明

    MySql: show full columns from tableName; Sql server: SELECT A.name AS table_name, B.name AS column_n ...

  2. Foundry feats. MultiverseStudio

    https://www.foundry.com/news-awards/foundry-jcube-announcement 经过这么多年的过程,本周本产品终于发布了PR,这次是由Foundry独家代 ...

  3. Android6.0 源码修改之屏蔽导航栏虚拟按键(Home和RecentAPP)/动态显示和隐藏NavigationBar

    场景分析, 为了完全实现沉浸式效果,在进入特定的app后可以将导航栏移除,当退出app后再次将导航栏恢复.(下面将采用发送广播的方式来移除和恢复导航栏) ps:不修改源码的情况下,简单的沉浸式效果实现 ...

  4. (后端)spring的@Transactional注解详细用法(转)

    转自一人浅醉-博客园: 事务隔离级别 隔离级别是指若干个并发的事务之间的隔离程度.TransactionDefinition 接口中定义了五个表示隔离级别的常量: TransactionDefinit ...

  5. myeclipse10 blue版激活码

    http://blog.itpub.net/27042095/viewspace-1164998/

  6. Python描述符的使用

    Python描述符的使用 前言 作为一位python的使用者,你可能使用python有一段时间了,但是对于python中的描述符却未必使用过,接下来是对描述符使用的介绍 场景介绍 为了引入描述符的使用 ...

  7. PHP is much better than you think

    Rants about PHP are everywhere, and they even come from smart guys.When Jeff Atwood wrote yet anothe ...

  8. C# -- 正则表达式匹配字符之含义

    C#正则表达式匹配字符之含义 1.正则表达式的作用:用来描述字符串的特征. 2.各个匹配字符的含义: .   :表示除\n以外的单个字符 [ ]  :表示在字符数组[]中罗列出来的字符任意取单个 | ...

  9. February 25th, 2018 Week 9th Sunday

    LIfe is about making an impact, not making an income. 生命在于影响他人,而非赚钱糊口. From Kevin Kruse. You probabl ...

  10. Java-Socket实现文件的断点续传

    前段时间因为任务需要本人这个java渣渣开始研究如何用java实现简单的文件断点续传.所谓的文件断点续传,我的理解是文件在传输过程中因为某些原因程序停止运行文件终止传输,下一次重新传输文件的时候还能从 ...