pip install APScheduler

pip install dwebsocket

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():
    # 隨機(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)
]

<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>

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})

<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>