溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么用Django動態隨機生成溫度并在前端實時動態展示”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用Django動態隨機生成溫度并在前端實時動態展示”吧!
隨機生成溫度 前端動態實時
一、django APScheduler定時任務
簡介
安裝
使用步驟
基礎組件
二、dwebsocket
簡介
安裝
使用方法
屬性和方法
為了模擬隨機的溫度顯示，在models中的表中的數據
views
路由
VUE中的代碼
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（執行器）
負責處理作業的運行，它們通常通過在作業中提交指定的可調用對象到一個線程或者進城池來進行。當作業完成時，執行器將會通知調度器。
BlockingScheduler
調度器在當前進程的主線程中運行，也就是會阻塞當前線程。
BackgroundScheduler
調度器在后臺線程中運行，不會阻塞當前線程。
AsyncIOScheduler
結合 asyncio 模塊（一個異步框架）一起使用。
GeventScheduler
程序中使用 gevent（高性能的Python并發框架）作為IO模型，和 GeventExecutor 配合使用。
TornadoScheduler
程序中使用 Tornado（一個web框架）的IO模型，用 ioloop.add_timeout 完成定時喚醒。
TwistedScheduler
配合 TwistedExecutor，用 reactor.callLater 完成定時喚醒。
QtScheduler
你的應用是一個 Qt 應用，需使用QTimer完成定時喚醒。
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()
返回一個客戶端發送的信息，在客戶端關閉連接之前他不會返回任何值，這種情況下，方法將返回None
4.WebSocket.read()
如果沒有從客戶端接收到新的消息，read方法會返回一個新的消息，如果沒有，就不返回。這是一個替代wait的非阻塞方法
5.WebSocket.count_messages()
返回消息隊列數量
6.WebSocket.has_messages()
如果有新消息返回True，否則返回False
7.WebSocket.send(message)
向客戶端發送消息
8.WebSocket.__iter__()
websocket迭代器
ok,現在我們進入到項目中
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'
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():
# 隨機生成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 views
urlpatterns = [
path('websocket_conn/',views.websocket_conn)
]<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.wendu
for 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" >
</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);//打印服務端返回的數據
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>
到此，相信大家對“怎么用Django動態隨機生成溫度并在前端實時動態展示”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
