Django動(dòng)態(tài)隨機(jī)生成溫度前端實(shí)時(shí)動(dòng)態(tài)展示源碼示例
動(dòng)態(tài)隨機(jī)生成溫度 前端動(dòng)態(tài)實(shí)時(shí)展示
一、django APScheduler定時(shí)任務(wù)
簡(jiǎn)介
APScheduler的全稱是Advanced Python Scheduler。
它是一個(gè)輕量級(jí)的 Python 定時(shí)任務(wù)調(diào)度框架。
APScheduler 支持三種調(diào)度任務(wù)：
固定時(shí)間間隔，
固定時(shí)間點(diǎn)（日期），
Linux 下的 Crontab命令。
同時(shí)，它還支持異步執(zhí)行、后臺(tái)執(zhí)行調(diào)度任務(wù)。
安裝
pip install APScheduler
使用步驟
新建一個(gè) schedulers (調(diào)度器) 。
添加一個(gè)調(diào)度任務(wù)(job stores)。
運(yùn)行調(diào)度任務(wù)。
基礎(chǔ)組件
APScheduler 有四種組件，分別是：調(diào)度器(scheduler)，作業(yè)存儲(chǔ)(job store)，觸發(fā)器(trigger)，執(zhí)行器(executor)。
schedulers（調(diào)度器）
它是任務(wù)調(diào)度器，屬于控制器角色。它配置作業(yè)存儲(chǔ)器和執(zhí)行器可以在調(diào)度器中完成，例如添加、修改和移除作業(yè)。
triggers（觸發(fā)器）
描述調(diào)度任務(wù)被觸發(fā)的條件。不過觸發(fā)器完全是無狀態(tài)的。
job stores（作業(yè)存儲(chǔ)器）
任務(wù)持久化倉(cāng)庫(kù)，默認(rèn)保存任務(wù)在內(nèi)存中，也可將任務(wù)保存都各種數(shù)據(jù)庫(kù)中，任務(wù)中的數(shù)據(jù)序列化后保存到持久化數(shù)據(jù)庫(kù)，從數(shù)據(jù)庫(kù)加載后又反序列化。
executors（執(zhí)行器）
負(fù)責(zé)處理作業(yè)的運(yùn)行，它們通常通過在作業(yè)中提交指定的可調(diào)用對(duì)象到一個(gè)線程或者進(jìn)城池來進(jìn)行。當(dāng)作業(yè)完成時(shí)，執(zhí)行器將會(huì)通知調(diào)度器。
7個(gè)調(diào)度器
BlockingScheduler
調(diào)度器在當(dāng)前進(jìn)程的主線程中運(yùn)行，也就是會(huì)阻塞當(dāng)前線程。
BackgroundScheduler
調(diào)度器在后臺(tái)線程中運(yùn)行，不會(huì)阻塞當(dāng)前線程。
AsyncIOScheduler
結(jié)合 asyncio 模塊（一個(gè)異步框架）一起使用。
GeventScheduler
程序中使用 gevent（高性能的Python并發(fā)框架）作為IO模型，和 GeventExecutor 配合使用。
TornadoScheduler
程序中使用 Tornado（一個(gè)web框架）的IO模型，用 ioloop.add_timeout 完成定時(shí)喚醒。
TwistedScheduler
配合 TwistedExecutor，用 reactor.callLater 完成定時(shí)喚醒。
QtScheduler
你的應(yīng)用是一個(gè) Qt 應(yīng)用，需使用QTimer完成定時(shí)喚醒。
二、dwebsocket
簡(jiǎn)介
WebSocket它實(shí)現(xiàn)了瀏覽器與服務(wù)器的全雙工通信，擴(kuò)展了瀏覽器與服務(wù)端的通信功能，使服務(wù)端也能主動(dòng)向客戶端發(fā)送數(shù)據(jù)。
安裝
pip install dwebsocket
使用方法
如果你想為一個(gè)單獨(dú)的視圖處理一個(gè)websocklet連接可以使用accept_websocket裝飾器，它會(huì)將標(biāo)準(zhǔn)的HTTP請(qǐng)求路由到視圖中。使用require_websocke裝飾器只允許使用WebSocket連接，會(huì)拒絕正常的HTTP請(qǐng)求。
屬性和方法
1.request.is_websocket()
如果是個(gè)websocket請(qǐng)求返回True，如果是個(gè)普通的http請(qǐng)求返回False,可以用這個(gè)方法區(qū)分它們。
2.request.websocket
在一個(gè)websocket請(qǐng)求建立之后，這個(gè)請(qǐng)求將會(huì)有一個(gè)websocket屬性，用來給客戶端提供一個(gè)簡(jiǎn)單的api通訊，如果request.is_websocket()是False，這個(gè)屬性將是None。
3.WebSocket.wait()
返回一個(gè)客戶端發(fā)送的信息，在客戶端關(guān)閉連接之前他不會(huì)返回任何值，這種情況下，方法將返回None
4.WebSocket.read()
如果沒有從客戶端接收到新的消息，read方法會(huì)返回一個(gè)新的消息，如果沒有，就不返回。這是一個(gè)替代wait的非阻塞方法
5.WebSocket.count_messages()
返回消息隊(duì)列數(shù)量
6.WebSocket.has_messages()
如果有新消息返回True，否則返回False
7.WebSocket.send(message)
向客戶端發(fā)送消息
8.WebSocket.__iter__()
websocket迭代器
ok,現(xiàn)在我們進(jìn)入到項(xiàng)目中
為了模擬隨機(jī)的溫度顯示，在models中的表中的數(shù)據(jù)
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 json
def temperature():
# 隨機(jī)生成1-50之間的溫度，加入到temperature表中
data = random.randint(1,50)
Temperature.objects.create(wendu=data)
# 定時(shí)任務(wù)三部曲 一秒鐘執(zhí)行一次
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)
# 監(jiān)聽接收客戶端發(fā)送的消息 或者 客戶端斷開連接
for message in request.websocket:
break
# 發(fā)送消息
def websocketMsg(client, msg):
b1 = json.dumps(msg,ensure_ascii=False).encode('utf-8')
client.send(b1)
# 服務(wù)端發(fā)送消息
def send():
if clients:
for i in clients:
wendu = Temperature.objects.order_by('-id').first()
websocketMsg(i, {'wendu': wendu.wendu})
return HttpResponse("ok")
# 定時(shí)任務(wù) 1秒/次
scheduler = BackgroundScheduler()
scheduler.add_job(send,'interval',seconds = 1)
scheduler.start()
路由
from django.urls import path
from . import views
urlpatterns = [
path('websocket_conn/',views.websocket_conn)
]
VUE中的代碼
<template>
<div>
當(dāng)前的溫度是:{{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);//打印服務(wù)端返回的數(shù)據(jù)
this.wendu = data['wendu']
console.log(data['wendu'])
})
socket.onclose=function(e){
console.log(e);
socket.close(); //關(guān)閉TCP連接
};
}
},
created() {
this.getWenDu()
}
}
</script>
<style scoped>
</style>
效果如下：
然后我們寫一個(gè)接口 展示出10秒鐘的溫度變化
class TestAPIView(APIView):
def get(self,request):
# 當(dāng)前時(shí)間
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") # 當(dāng)前時(shí)間
end_time = datetime.datetime.strftime(now-datetime.timedelta(seconds=i-1),"%Y-%m-%d %H:%M:%S")# 結(jié)束時(shí)間
# 獲取在開始時(shí)間之后 結(jié)束時(shí)間之前的的溫度
wendu = Temperature.objects.filter(add_time__gte=start_time,add_time__lte=end_time).all()
dict = {}
for i in wendu:
dict['wendu'] = i.wendu
for k,v in dict.items():
wendulist.append(v)
# print(wendulist)
datelist.append(start_time)
return Response({'datelist':datelist,'wendulist':wendulist})
這樣呢 我們就拿到數(shù)據(jù) 如下圖
最后，我們利用echarts在前端渲染 最終效果
<template>
<div>
當(dāng)前的溫度是:{{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: {
// echarts
getTest1(){
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.datelist
this.wendulist = res.data.wendulist
this.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);//打印服務(wù)端返回的數(shù)據(jù)
this.wendu = data['wendu']
console.log(data['wendu'])
})
socket.onclose=function(e){
console.log(e);
socket.close(); //關(guān)閉TCP連接
};
}
},
mounted() {
this.getWenDu()
this.getTest()
// this.getTest1()
}
}
</script>
<style scoped>
</style>
以上就是Django動(dòng)態(tài)隨機(jī)生成溫度前端實(shí)時(shí)動(dòng)態(tài)展示源碼示例的詳細(xì)內(nèi)容，更多關(guān)于Django動(dòng)態(tài)隨機(jī)生成溫度前端實(shí)時(shí)動(dòng)態(tài)展示的資料請(qǐng)關(guān)注本站其它相關(guān)文章！
版權(quán)聲明：本站文章來源標(biāo)注為YINGSOO的內(nèi)容版權(quán)均為本站所有，歡迎引用、轉(zhuǎn)載，請(qǐng)保持原文完整并注明來源及原文鏈接。禁止復(fù)制或仿造本網(wǎng)站，禁止在非maisonbaluchon.cn所屬的服務(wù)器上建立鏡像，否則將依法追究法律責(zé)任。本站部分內(nèi)容來源于網(wǎng)友推薦、互聯(lián)網(wǎng)收集整理而來，僅供學(xué)習(xí)參考，不代表本站立場(chǎng)，如有內(nèi)容涉嫌侵權(quán)，請(qǐng)聯(lián)系alex-e#qq.com處理。
關(guān)注官方微信