后端代码
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
},
......websocket 测试
http://www.jsons.cn/websocket/
