目錄 動態隨機生成溫度 前端動態實時展示 一、django APScheduler定時任務 二、dwebsocket 簡介 安裝 使用方法 屬性和方法 為了模擬隨機的溫度顯示，在models中的表中的數據 views 路由 VUE中的代碼
動態隨機生成溫度 前端動態實時展示
一、django APScheduler定時任務
簡介
APScheduler的全稱是Advanced Python Scheduler。
安裝
使用步驟
新建一個 schedulers (調度器) 。
基礎組件
APScheduler 有四種組件，分別是：調度器(scheduler)，作業存儲(job store)，觸發器(trigger)，執行器(executor)。
schedulers（調度器）
triggers（觸發器）
job stores（作業存儲器）
executors（執行器）
7個調度器
BlockingScheduler
BackgroundScheduler
AsyncIOScheduler
GeventScheduler
TornadoScheduler
TwistedScheduler
QtScheduler
二、dwebsocket
簡介
WebSocket它實現了瀏覽器與服務器的全雙工通信，擴展了瀏覽器與服務端的通信功能，使服務端也能主動向客戶端發送數據。
安裝
使用方法
如果你想為一個單獨的視圖處理一個websocklet連接可以使用accept_websocket裝飾器，它會將標準的HTTP請求路由到視圖中。使用require_websocke裝飾器只允許使用WebSocket連接，會拒絕正常的HTTP請求。
屬性和方法
1.request.is_websocket()
2.request.websocket
3.WebSocket.wait()
4.WebSocket.read()
5.WebSocket.count_messages()
6.WebSocket.has_messages()
7.WebSocket.send(message)
8.WebSocket.__iter__()
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 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)
]
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.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" 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);//打印服務端返回的數據
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中創建動態視圖的教程 Django與AJAX實現網頁動態數據顯示的示例代碼 Django結合ajax進行頁面實時更新的例子 Django+Ajax+jQuery實現網頁動態更新的實例
