Django websocket 自动推送

class SystemInfoConsumer(AsyncWebsocketConsumer):

    async def connect(self):
        await self.accept()
        await self.send_system_info()

    async def disconnect(self, close_code):
        pass

    async def receive(self, text_data=None, bytes_data=None):
        pass

    async def send_system_info(self):
        while True:
            system_info = {
                "system": platform.system(),
                "release": platform.release(),
                "cpu_usage": psutil.cpu_percent(),
                "memory_usage": psutil.virtual_memory().percent,
                "network": {
                    "bytes_sent": psutil.net_io_counters().bytes_sent,
                    "bytes_received": psutil.net_io_counters().bytes_recv,
                },
                "load_average": psutil.getloadavg(),
            }

            await self.send(json.dumps(system_info))
            await asyncio.sleep(5) # 5秒更新一次

<!-- dashboard/components/WebsocketMetrics.vue -->
<template>
    <div>
        <el-row style="margin-bottom: 5px;">
            <el-col>
                <el-card>
                    <Sunny style="width: 1em; height: 1em; margin-right: 8px" />
                    <span>
                        系统: {{ system }} {{ release }} CPU: {{ cpuUsage }}% 内存: {{ memoryUsage }}% 负载: {{
                            loadAverageMiddleValue }}
                    </span>
                </el-card>
            </el-col>
        </el-row>

       
    </div>
</template>

<script>


export default {
    data () {
        return {
            system: '',
            release: '',
            cpuUsage: 0,
            memoryUsage: 0,
            bytesSent: 0,
            bytesReceived: 0,
            loadAverage: [],
            websocket: null,
        };
    },
    created () {
        this.initWebSocket();
    },
    beforeUnmount () {
        if (this.websocket) {
            this.websocket.close();
        }
    },
    computed: {
        loadAverageMiddleValue () {
            const middleIndex = Math.floor(this.loadAverage.length / 2);
            return this.loadAverage[middleIndex];
        },
    },
    methods: {
        initWebSocket () {
            const protocol = location.protocol === "https:" ? "wss://" : "ws://";
            let BASE_WS_URL = "";
            if (process.env.VUE_APP_BASE_API.startsWith("http")) {
                BASE_WS_URL = process.env.VUE_APP_BASE_API.split("/")[2];
                console.log("VUE_APP_BASE_API:", BASE_WS_URL);
            } else {
                BASE_WS_URL = location.href.split("/")[2];
                console.log("WEB_DOMAIN_NAME:", BASE_WS_URL);
            }
            const socketURL = protocol + BASE_WS_URL + "/ws/systeminfo/"
            // const socketURL = 'ws://test-ezops.enterxai.com/ws/systeminfo/';
            this.websocket = new WebSocket(socketURL);
            this.websocket.onopen = this.websocketOnOpen;
            this.websocket.onmessage = this.websocketOnMessage;
            this.websocket.onclose = this.websocketOnClose;
            this.websocket.onerror = this.websocketOnError;
        },
        websocketOnOpen () {
            console.log('WebSocket connection opened');
        },
        websocketOnMessage (event) {
            const data = JSON.parse(event.data);
            this.system = data.system;
            this.release = data.release;
            this.cpuUsage = data.cpu_usage;
            this.memoryUsage = data.memory_usage;

            this.bytesSent = Array.isArray(data.network.bytes_sent) ? data.network.bytes_sent : [data.network.bytes_sent];
            this.bytesReceived = Array.isArray(data.network.bytes_received) ? data.network.bytes_received : [data.network.bytes_received];            
            // this.bytesSent = data.network.bytes_sent;
            // this.bytesReceived = data.network.bytes_received;
            this.loadAverage = data.load_average;

           
        },
        websocketOnClose () {
            console.log('WebSocket connection closed');
        },
        websocketOnError (error) {
            console.error('WebSocket error:', error);
        },
   


    },
};
</script>


<!-- dashboard/index.vue -->

<template>
    <div>
        <WebsocketMetrics />
    </div>
</template>

<script>
import WebsocketMetrics from './components/WebsocketMetrics';
import * as echarts from 'echarts';

export default {
    name: 'Dashboard',
    components: {
        WebsocketMetrics
    },
    
  ......