辰东,最好看的小说排行

主頁 > 知識庫 > Django動態(tài)隨機生成溫度前端實時動態(tài)展示源碼示例

Django動態(tài)隨機生成溫度前端實時動態(tài)展示源碼示例

動態(tài)隨機生成溫度前端動態(tài)實時展示

一、django APScheduler定時任務

簡介

APScheduler的全稱是Advanced Python Scheduler。
它是一個輕量級的 Python 定時任務調度框架。
APScheduler 支持三種調度任務：
固定時間間隔，
固定時間點（日期），
Linux 下的 Crontab命令。
同時，它還支持異步執(zhí)行、后臺執(zhí)行調度任務。

安裝

pip install APScheduler

使用步驟

新建一個 schedulers (調度器) 。
添加一個調度任務(job stores)。
運行調度任務。

基礎組件

APScheduler 有四種組件，分別是：調度器(scheduler)，作業(yè)存儲(job store)，觸發(fā)器(trigger)，執(zhí)行器(executor)。

schedulers（調度器）
它是任務調度器，屬于控制器角色。它配置作業(yè)存儲器和執(zhí)行器可以在調度器中完成，例如添加、修改和移除作業(yè)。

triggers（觸發(fā)器）
描述調度任務被觸發(fā)的條件。不過觸發(fā)器完全是無狀態(tài)的。

job stores（作業(yè)存儲器）
任務持久化倉庫，默認保存任務在內存中，也可將任務保存都各種數(shù)據(jù)庫中，任務中的數(shù)據(jù)序列化后保存到持久化數(shù)據(jù)庫，從數(shù)據(jù)庫加載后又反序列化。

executors（執(zhí)行器）
負責處理作業(yè)的運行，它們通常通過在作業(yè)中提交指定的可調用對象到一個線程或者進城池來進行。當作業(yè)完成時，執(zhí)行器將會通知調度器。

7個調度器

BlockingScheduler
調度器在當前進程的主線程中運行，也就是會阻塞當前線程。

BackgroundScheduler
調度器在后臺線程中運行，不會阻塞當前線程。

AsyncIOScheduler
結合 asyncio 模塊（一個異步框架）一起使用。

GeventScheduler
程序中使用 gevent（高性能的Python并發(fā)框架）作為IO模型，和 GeventExecutor 配合使用。

TornadoScheduler
程序中使用 Tornado（一個web框架）的IO模型，用 ioloop.add_timeout 完成定時喚醒。

TwistedScheduler
配合 TwistedExecutor，用 reactor.callLater 完成定時喚醒。

QtScheduler
你的應用是一個 Qt 應用，需使用QTimer完成定時喚醒。

二、dwebsocket

簡介

WebSocket它實現(xiàn)了瀏覽器與服務器的全雙工通信，擴展了瀏覽器與服務端的通信功能，使服務端也能主動向客戶端發(fā)送數(shù)據(jù)。

安裝

pip install dwebsocket

使用方法

如果你想為一個單獨的視圖處理一個websocklet連接可以使用accept_websocket裝飾器，它會將標準的HTTP請求路由到視圖中。使用require_websocke裝飾器只允許使用WebSocket連接，會拒絕正常的HTTP請求。

屬性和方法

1.request.is_websocket()
如果是個websocket請求返回True，如果是個普通的http請求返回False,可以用這個方法區(qū)分它們。

2.request.websocket
在一個websocket請求建立之后，這個請求將會有一個websocket屬性，用來給客戶端提供一個簡單的api通訊，如果request.is_websocket()是False，這個屬性將是None。

3.WebSocket.wait()
返回一個客戶端發(fā)送的信息，在客戶端關閉連接之前他不會返回任何值，這種情況下，方法將返回None

4.WebSocket.read()
如果沒有從客戶端接收到新的消息，read方法會返回一個新的消息，如果沒有，就不返回。這是一個替代wait的非阻塞方法

5.WebSocket.count_messages()
返回消息隊列數(shù)量

6.WebSocket.has_messages()
如果有新消息返回True，否則返回False

7.WebSocket.send(message)
向客戶端發(fā)送消息

8.WebSocket.__iter__()
websocket迭代器

ok,現(xiàn)在我們進入到項目中

為了模擬隨機的溫度顯示，在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():
    # 隨機生成1-50之間的溫度，加入到temperature表中
    data = random.randint(1,50)
    Temperature.objects.create(wendu=data)   
# 定時任務三部曲 一秒鐘執(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)
# 服務端發(fā)送消息
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)
]

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);//打印服務端返回的數(shù)據(jù)
                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})

這樣呢我們就拿到數(shù)據(jù) 如下圖

最后，我們利用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: {
    // 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);//打印服務端返回的數(shù)據(jù)
                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動態(tài)隨機生成溫度前端實時動態(tài)展示源碼示例的詳細內容，更多關于Django動態(tài)隨機生成溫度前端實時動態(tài)展示的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

在Django中創(chuàng)建動態(tài)視圖的教程
Django與AJAX實現(xiàn)網(wǎng)頁動態(tài)數(shù)據(jù)顯示的示例代碼
Django結合ajax進行頁面實時更新的例子
Django+Ajax+jQuery實現(xiàn)網(wǎng)頁動態(tài)更新的實例

標簽：烏魯木齊銀川葫蘆島呼倫貝爾呼倫貝爾安慶湘西三亞

巨人網(wǎng)絡通訊聲明：本文標題《Django動態(tài)隨機生成溫度前端實時動態(tài)展示源碼示例》，本文關鍵詞 Django,動態(tài),隨機,生成,溫度,；如發(fā)現(xiàn)本文內容存在版權問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內容系統(tǒng)采集于網(wǎng)絡，涉及言論、版權與本站無關。