python Django Vue3 使用websockert 实现Echarts实时更新

前端vue

<template>
    <div>
        
        

        
       
        <div id="main">

        </div>


        
        
    </div>
</template>

<script>
import axios from 'axios'
import * as echarts from 'echarts';
import {reactive} from 'vue'
    export default {
        setup() {
            let data1 = reactive({'data':[]})
            let data2 = reactive({'data':[]})

            let initEarcharts=()=>{
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                xAxis: {
                    type: 'category',
                    data: data1.data
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: data2.data,
                    type: 'line'
                    }
                ]
                };

                option && myChart.setOption(option);
                
            }



            

            //初始化websocket
            const initWebsocket=()=>{
                let socket = new WebSocket('ws://127.0.0.1:8000/web_conn/')
                //建立
                socket.onopen=function(){
                    console.log('建立连接')
                }
                //接收消息
                socket.onmessage=function(msg){
                    let data = JSON.parse(msg.data)
                    console.log(msg.data)
                    data1.data = data[0]
                    data2.data = data[1]
                    // 调用echarts
                    initEarcharts()
                    
                    
                }
                //关闭
                socket.close=function(e){
                    console.log(e)
                    console.log('close')
                }
            }


            return{
                data1,
                data2,
                initEarcharts,
                initWebsocket,
            }
    },


        data() {
            return {
                
            }
        },
        methods: {
        

            // 调用定时任务
            times(){
                axios.get("http://localhost:8000/times1/?id="+localStorage.getItem('userid'))
            },



       
        },
        mounted() {
            
            this.times()
            this.initWebsocket()
            
            
            
        },
    }
</script>

<style scoped>
#main{
    width: 1000px;
    height: 400px;
}
</style>

后端django

from dwebsocket.decorators import accept_websocket
websocketlist=[]
# 和前端进行连接
@accept_websocket
def web_conn(request):
    if request.is_websocket:
        websocketlist.append(request.websocket)

    for message in request.websocket:
        break

import datetime


def send1(id):
    # 逻辑代码
    etime = datetime.datetime.strftime(datetime.datetime.now(),'Y-%m-%d')
    stime = datetime.datetime.strftime((datetime.datetime.now() - datetime.timedelta(days=7)), '%Y-%m-%d')
    sql = "select from_unixtime(ctime,'%%Y-%%m-%%d') as addtime,sum(integral) as integral from user_integral where userid=%d and type=1 and from_unixtime(ctime,'%%Y-%%m-%%d') between '%s' and '%s' group by from_unixtime(ctime,'%%Y-%%m-%%d') " % (
    int(id), stime, etime)
    res = db2.find_all(sql)

    stimelist = []
    for i in range(7, 0, -1):
        stimelist.append(datetime.datetime.strftime((datetime.datetime.now() - datetime.timedelta(days=i)), '%Y-%m-%d'))
    list = []
    print(stimelist)
    list1 = []
    list2 = []
    for i in stimelist:
        flag = False
        list2.append(str(i))
        for j in res:
            if i == j['addtime']:
                flag = True
                list1.append(int(j['integral']))
                continue
        if flag == False:
            list2.append(i)
            list1.append(0)
    list.append(stimelist)
    list.append(list1)

    # print(list)

    if websocketlist:
        for i in websocketlist:
            b1 = json.dumps(list, ensure_ascii=False).encode('utf-8')
            i.send(b1)

    return HttpResponse('ok')


from apscheduler.schedulers.background import BackgroundScheduler


def times1(request):
    id = request.GET.get('id')
    scheduler = BackgroundScheduler()
    # 添加调度任务
    # 调度方法为 timedTask，触发器选择 interval(间隔性)，间隔时长为 2 秒
    scheduler.add_job(send1, 'interval', seconds=2,args=[id])
    # 启动调度任务
    scheduler.start()
    return HttpResponse('ok')