随机生成温度前端动态实时

本篇文章主要是在动态随机生成温度，在前端动态实时展示。主要用到两个东西，一个是APScheduler定时任务和websocket,最后利用echarts将数据展示出来，在下面呢，我会对这两个进行一个详细的解说
结尾赋效果图哦

一、django APScheduler定时任务

简介

APScheduler的全称是Advanced Python Scheduler。它是一个轻量级的 Python 定时任务调度框架。APScheduler 支持三种调度任务：固定时间间隔，固定时间点（日期），Linux 下的 Crontab命令。同时，它还支持异步执行、后台执行调度任务。

安装

pip install APScheduler

使用步骤

新建一个 schedulers (调度器) 。
添加一个调度任务(job stores)。
运行调度任务。

基础组件

APScheduler 有四种组件，分别是：调度器(scheduler)，作业存储(job store)，触发器(trigger)，执行器(executor)。schedulers（调度器）
它是任务调度器，属于控制器角色。它配置作业存储器和执行器可以在调度器中完成，例如添加、修改和移除作业。triggers（触发器）
描述调度任务被触发的条件。不过触发器完全是无状态的。job stores（作业存储器）
任务持久化仓库，默认保存任务在内存中，也可将任务保存都各种数据库中，任务中的数据序列化后保存到持久化数据库，从数据库加载后又反序列化。executors（执行器）
负责处理作业的运行，它们通常通过在作业中提交指定的可调用对象到一个线程或者进城池来进行。当作业完成时，执行器将会通知调度器。

7个调度器

BlockingScheduler
调度器在当前进程的主线程中运行，也就是会阻塞当前线程。BackgroundScheduler
调度器在后台线程中运行，不会阻塞当前线程。AsyncIOScheduler
结合 asyncio 模块（一个异步框架）一起使用。GeventScheduler
程序中使用 gevent（高性能的Python并发框架）作为IO模型，和 GeventExecutor 配合使用。TornadoScheduler
程序中使用 Tornado（一个web框架）的IO模型，用 ioloop.add_timeout 完成定时唤醒。TwistedScheduler
配合 TwistedExecutor，用 reactor.callLater 完成定时唤醒。QtScheduler
你的应用是一个 Qt 应用，需使用QTimer完成定时唤醒。

二、dwebsocket

简介

WebSocket它实现了浏览器与服务器的全双工通信，扩展了浏览器与服务端的通信功能，使服务端也能主动向客户端发送数据。

安装

pip install dwebsocket

使用方法

如果你想为一个单独的视图处理一个websocklet连接可以使用accept_websocket装饰器，它会将标准的HTTP请求路由到视图中。使用require_websocke装饰器只允许使用WebSocket连接，会拒绝正常的HTTP请求。

属性和方法

1.request.is_websocket()
如果是个websocket请求返回True，如果是个普通的http请求返回False,可以用这个方法区分它们。2.request.websocket
在一个websocket请求建立之后，这个请求将会有一个websocket属性，用来给客户端提供一个简单的api通讯，如果request.is_websocket()是False，这个属性将是None。3.WebSocket.wait()
返回一个客户端发送的信息，在客户端关闭连接之前他不会返回任何值，这种情况下，方法将返回None4.WebSocket.read()如果没有从客户端接收到新的消息，read方法会返回一个新的消息，如果没有，就不返回。这是一个替代wait的非阻塞方法5.WebSocket.count_messages()返回消息队列数量6.WebSocket.has_messages()如果有新消息返回True，否则返回False7.WebSocket.send(message)向客户端发送消息8.WebSocket.__iter__()websocket迭代器

ok,现在我们进入到项目中

为了模拟随机的温度显示，在models中的表中的数据

from django.db import models# Create your models here.
class Temperature(models.Model):wendu = models.IntegerField()add_time = models.DateTimeField(auto_now_add=True)class Meta:db_table='temperature'

views

from django.shortcuts import render,HttpResponse
from dwebsocket.decorators import accept_websocket
from apscheduler.schedulers.background import BackgroundScheduler
from . models import *
import random
import datetime
import jsondef temperature():# 随机生成1-50之间的温度，加入到temperature表中data = random.randint(1,50)Temperature.objects.create(wendu=data)# 定时任务三部曲 一秒钟执行一次
scheduler = BackgroundScheduler()
scheduler .add_job(temperature, 'interval', seconds=1)
scheduler.start()clients = []
# 使用websocket中的 @accept_websocket装饰器
@accept_websocket
def websocket_conn(request):# 获取连接if request.is_websocket:# 新增 用户  连接信息clients.append(request.websocket)# 监听接收客户端发送的消息 或者 客户端断开连接for message in request.websocket:break# 发送消息
def websocketMsg(client, msg):b1 = json.dumps(msg,ensure_ascii=False).encode('utf-8')client.send(b1)
# 服务端发送消息
def send():if clients:for i in clients:wendu = Temperature.objects.order_by('-id').first()websocketMsg(i, {'wendu': wendu.wendu})return HttpResponse("ok")# 定时任务 1秒/次
scheduler = BackgroundScheduler()
scheduler.add_job(send,'interval',seconds = 1)
scheduler.start()

路由

from django.urls import path
from . import viewsurlpatterns = [path('websocket_conn/',views.websocket_conn)
]

VUE中的代码

<template><div>当前的温度是:{{wendu}}</div>
</template><script>
import axios from 'axios'
export default {data() {return {wendu:0}},methods: {getWenDu(){var socket = new WebSocket("ws:127.0.0.1:8000/user/websocket_conn/");socket.onopen = function () {console.log('连接成功啦');//成功连接上Websocket};socket.onmessage = (e=>{let data = JSON.parse(e.data);//打印服务端返回的数据this.wendu = data['wendu']console.log(data['wendu'])})socket.onclose=function(e){console.log(e);socket.close(); //关闭TCP连接};}},created() {this.getWenDu()}
}
</script><style scoped></style>

效果如下：

然后我们写一个接口展示出10秒钟的温度变化

class TestAPIView(APIView):def get(self,request):# 当前时间now = datetime.datetime.now()# 显示10秒前的温度datelist = []wendulist = []for i in range(10,0,-1):start_time = datetime.datetime.strftime(now-datetime.timedelta(seconds=i),"%Y-%m-%d %H:%M:%S")    # 当前时间end_time = datetime.datetime.strftime(now-datetime.timedelta(seconds=i-1),"%Y-%m-%d %H:%M:%S")   # 结束时间# 获取在开始时间之后 结束时间之前的的温度wendu = Temperature.objects.filter(add_time__gte=start_time,add_time__lte=end_time).all()dict = {}for i in wendu:dict['wendu'] = i.wendufor k,v in dict.items():wendulist.append(v)# print(wendulist)datelist.append(start_time)return Response({'datelist':datelist,'wendulist':wendulist})

这样呢我们就拿到数据如下图

最后，我们利用echarts在前端渲染最终效果

<template><div>当前的温度是:{{wendu}}<div id="main" style="width: 800px;height:400px;"></div></div>
</template><script>
import axios from 'axios'
import * as echarts from 'echarts';
export default {data() {return {wendu:0,datelist:[],wendulist:[]}},methods: {// echartsgetTest1(){var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);let  option = {xAxis: {type: 'category',data: this.datelist},yAxis: {type: 'value',},series: [{data: this.wendulist,type: 'line',smooth: true}]};myChart.setOption(option);},// 获取接口 getTest(){this.axios.get('user/test/').then(res=>{console.log(res.data)this.datelist = res.data.datelistthis.wendulist = res.data.wendulistthis.getTest1()this.getWenDu()})},getWenDu(){var socket = new WebSocket("ws:127.0.0.1:8000/user/websocket_conn/");socket.onopen = function () {console.log('连接成功啦');//成功连接上Websocket};socket.onmessage = (e=>{let data = JSON.parse(e.data);//打印服务端返回的数据this.wendu = data['wendu']console.log(data['wendu'])})socket.onclose=function(e){console.log(e);socket.close(); //关闭TCP连接};}},mounted() {this.getWenDu()this.getTest()// this.getTest1()}
}
</script><style scoped></style>

随机生成温度前端动态实时相关推荐

html随机图片,前端干货之随机图库 Lorem Picsum
你还在为找不到图片而烦恼吗? 你可以尝试着刷新页面!或者在这里体验今天给大家推荐一个免费的图片库 Lorem Picsum,简单好用获取指定大小的随机图片 https://picsum.photo ...
html获取随机字母,前端js——金山打字通小游戏（屏幕随机下落字母，获取键盘按键）...
字母匀速随机下落,键盘按下对应字母按键,字母消失重新生成新字母,新字母可帮助回调一部分初始高度效果 1.页面内容列表内放字母 A ** 2.页面样式 ** 1)清除li园标 2)确定列表位置,为字 ...
JS json随机广告前端优化
注意:[ ]符号在JavaScript中定义一个数组,{ }则定义一个对象 javascript随机数生成方法 1.使用内置的随机数发生方法: Math.random(); //该方法产生一个0到1之 ...
前端安全：CSRF、XSS该怎么防御？
近几年随着业务的不断发展,前端随之面临很多安全挑战.我们在日常开发中也需要不断预防和修复安全漏洞.接下来,梳理一些场景的前端安全问题和对应的解决方案. XSS攻击介绍 XSS是后端的责任,后端应该在用 ...
最全Java面试180题：阿里11面试+网易+百度+美团！含答案大赠送！
网络编程 ISO模型与协议 http1.0:需要使用keep-alive参数来告知服务器端要建立一个长连接 http1.1:默认长连接.支持只发送header信息,可以用作权限请求.支持Host域. ...
Linux下netstat常用,Linux netstat常用命令
1.统计80端口连接数 netstat -nat|grep -i "80"|wc -l 2.统计httpd协议连接数(查看Apache的并发请求数及其TCP连接状态) ps -ef ...
java 难度_java中难度大一点的面试题
1.请大概描述一下Vector和ArrayList的区别,Hashtable和HashMap的区别.(5) (1)Vector和ArrayList的异同实现原理,功能相同,可以互用主要区别: Ve ...
微信分享链接，如何自定义图片，标题，内容介绍
如图,分享链接的时候,本来是上面的样子,老板说太丑了,没有让人点击的欲望,so... 没有公众号的朋友可以前往:138TOOL微信小工具 (百度搜索138TOOL) 官方文档就不说了,肯定是要看的,说 ...
linux非阻塞输入函数,Linux fcntl函数设置阻塞与非阻塞
转自http://www.cnblogs.com/xuyh/p/3273082.html 用命令F_GETFL和F_SETFL设置文件标志,比如阻塞与非阻塞 F_SETFL 设置给arg描述符 ...

随机生成温度前端动态实时

随机生成温度前端动态实时

简介

安装

使用步骤

基础组件

7个调度器

简介

安装

使用方法

属性和方法

为了模拟随机的温度显示，在models中的表中的数据

views

路由

VUE中的代码

随机生成温度前端动态实时相关推荐

最新文章

热门文章

随机生成温度 前端动态实时

随机生成温度 前端动态实时

简介

安装

使用步骤

基础组件

7个调度器

简介

安装

使用方法

属性和方法

为了模拟随机的温度显示，在models中的表中的数据

views

路由

VUE中的代码

随机生成温度 前端动态实时相关推荐

最新文章

热门文章

随机生成温度前端动态实时

随机生成温度前端动态实时

随机生成温度前端动态实时相关推荐