目錄 動(dòng)態(tài)隨機(jī)生成溫度 前端動(dòng)態(tài)實(shí)時(shí)展示 一、django APScheduler定時(shí)任務(wù) 二、dwebsocket 簡(jiǎn)介 安裝 使用方法 屬性和方法 為了模擬隨機(jī)的溫度顯示，在models中的表中的數(shù)據(jù) views 路由 VUE中的代碼
動(dòng)態(tài)隨機(jī)生成溫度 前端動(dòng)態(tài)實(shí)時(shí)展示
一、django APScheduler定時(shí)任務(wù)
簡(jiǎn)介
APScheduler的全稱是Advanced Python Scheduler。
安裝
使用步驟
新建一個(gè) schedulers (調(diào)度器) 。
基礎(chǔ)組件
APScheduler 有四種組件，分別是：調(diào)度器(scheduler)，作業(yè)存儲(chǔ)(job store)，觸發(fā)器(trigger)，執(zhí)行器(executor)。
schedulers（調(diào)度器）
triggers（觸發(fā)器）
job stores（作業(yè)存儲(chǔ)器）
executors（執(zhí)行器）
7個(gè)調(diào)度器
BlockingScheduler
BackgroundScheduler
AsyncIOScheduler
GeventScheduler
TornadoScheduler
TwistedScheduler
QtScheduler
二、dwebsocket
簡(jiǎn)介
WebSocket它實(shí)現(xiàn)了瀏覽器與服務(wù)器的全雙工通信，擴(kuò)展了瀏覽器與服務(wù)端的通信功能，使服務(wù)端也能主動(dòng)向客戶端發(fā)送數(shù)據(jù)。
安裝
使用方法
如果你想為一個(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()
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,現(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中創(chuàng)建動(dòng)態(tài)視圖的教程 Django與AJAX實(shí)現(xiàn)網(wǎng)頁(yè)動(dòng)態(tài)數(shù)據(jù)顯示的示例代碼 Django結(jié)合ajax進(jìn)行頁(yè)面實(shí)時(shí)更新的例子 Django+Ajax+jQuery實(shí)現(xiàn)網(wǎng)頁(yè)動(dòng)態(tài)更新的實(shí)例
