Skip to content

V
vue_django_test
Commit 271ea62f by 周田
Options

feat：获取device发过来的数据，实时更新到web页面上

parent 02be7add
Showing with 51 additions and 20 deletions
chat/consumers.py
...@@ -72,10 +72,10 @@ class ChatConsumer(AsyncWebsocketConsumer): ...@@ -72,10 +72,10 @@ class ChatConsumer(AsyncWebsocketConsumer):
# Receive message from room group # Receive message from room group
async def chat_message(self, event): async def chat_message(self, event):
message = event["message"] message = dict(event["message"])
# Send message to WebSocket # Send message to WebSocket
await self.send(text_data=json.dumps({"message": message})) await self.send(text_data=json.dumps({"message": [message], "column": list(message.keys())}))
# await self.send(bytes_data=message) # await self.send(bytes_data=message)
frontend/src/App.vue
<script setup lang="ts"> <script setup lang="ts">
// import Chat from '@/views/Chat' import Chat from '@/views/Chat'
// import FileDown from './views/FileDown.vue'; // import FileDown from './views/FileDown.vue';
// import Upload from './views/Upload.vue'; // import Upload from './views/Upload.vue';
import Tabs from './views/Tabs.vue'; // import Tabs from './views/Tabs.vue';
</script> </script>
<template> <template>
<!-- <chat /> --> <chat />
<!-- <FileDown /> --> <!-- <FileDown /> -->
<!-- <Upload /> --> <!-- <Upload /> -->
<Tabs /> <!-- <Tabs /> -->
</template> </template>
frontend/src/views/Chat.vue
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, watch } from 'vue'; import { ref, onMounted, watch } from 'vue';
import { ElScrollbar, ElInput, ElButton } from 'element-plus'; import { ElScrollbar, ElInput, ElButton, ElTable } from 'element-plus';
const innerRef = ref<HTMLDivElement>(); const innerRef = ref<HTMLDivElement>();
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>(); const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();
const input = ref(''); const input = ref('');
const items = ref<string[]>([ const items = ref<string[]>([]);
'{"interface_id":"IID_OAM_Server_HistoryPerformance","dst_suid":285540352,"src_suid":285474816,"priority":100,"ts":"2023-08-08T08:16:14.224831Z","parameters":[{"@type":"type.googleapis.com/RequireHistoryPerformance","station_id":286261248,"start_time":"2023-07-17 02:27:44","end_time":"2023-07-17 02:39:07"}],"forward_flag":0,"request_index":"0","operations_type":0}',
'{"interface_id":"IID_OAM_Server_HistoryPerformance","dst_suid":285540352,"src_suid":285474816,"priority":100,"ts":"2023-08-08T08:16:14.224831Z","parameters":[{"@type":"type.googleapis.com/RequireHistoryPerformance","station_id":286261248,"start_time":"2023-07-17 02:27:44","end_time":"2023-07-17 02:39:07"}],"forward_flag":0,"request_index":"0","operations_type":0}',
'{"interface_id":"IID_OAM_Server_HistoryPerformance","dst_suid":285540352,"src_suid":285474816,"priority":100,"ts":"2023-08-08T08:16:14.224831Z","parameters":[{"@type":"type.googleapis.com/RequireHistoryPerformance","station_id":286261248,"start_time":"2023-07-17 02:27:44","end_time":"2023-07-17 02:39:07"}],"forward_flag":0,"request_index":"0","operations_type":0}',
'{"interface_id":"IID_OAM_Server_HistoryPerformance","dst_suid":285540352,"src_suid":285474816,"priority":100,"ts":"2023-08-08T08:16:14.224831Z","parameters":[{"@type":"type.googleapis.com/RequireHistoryPerformance","station_id":286261248,"start_time":"2023-07-17 02:27:44","end_time":"2023-07-17 02:39:07"}],"forward_flag":0,"request_index":"0","operations_type":0}',
'{"interface_id":"IID_OAM_Server_HistoryPerformance","dst_suid":285540352,"src_suid":285474816,"priority":100,"ts":"2023-08-08T08:16:14.224831Z","parameters":[{"@type":"type.googleapis.com/RequireHistoryPerformance","station_id":286261248,"start_time":"2023-07-17 02:27:44","end_time":"2023-07-17 02:39:07"}],"forward_flag":0,"request_index":"0","operations_type":0}',
'{"interface_id":"IID_OAM_Server_HistoryPerformance","dst_suid":285540352,"src_suid":285474816,"priority":100,"ts":"2023-08-08T08:16:14.224831Z","parameters":[{"@type":"type.googleapis.com/RequireHistoryPerformance","station_id":286261248,"start_time":"2023-07-17 02:27:44","end_time":"2023-07-17 02:39:07"}],"forward_flag":0,"request_index":"0","operations_type":0}',
'{"interface_id":"IID_OAM_Server_HistoryPerformance","dst_suid":285540352,"src_suid":285474816,"priority":100,"ts":"2023-08-08T08:16:14.224831Z","parameters":[{"@type":"type.googleapis.com/RequireHistoryPerformance","station_id":286261248,"start_time":"2023-07-17 02:27:44","end_time":"2023-07-17 02:39:07"}],"forward_flag":0,"request_index":"0","operations_type":0}',
]);
const flag = ref<boolean>(false); const flag = ref<boolean>(false);
let chatSocket: WebSocket | null = null; let chatSocket: WebSocket | null = null;
...@@ -58,6 +50,30 @@ onMounted(() => { ...@@ -58,6 +50,30 @@ onMounted(() => {
console.error('Chat socket closed unexpectedly', e); console.error('Chat socket closed unexpectedly', e);
}; };
}) })
// =========================================================
type tableColumnType = string[]
type tableDataType = Map<string, string>[]
const tableColumn = ref<tableColumnType>([]);
const tableData = ref<tableDataType>([]);
onMounted(() => {
let table_websocket = new WebSocket(
'ws://' + window.location.host + '/ws/chat/table/'
)
table_websocket.onmessage = (e) => {
// console.log(e.data);
tableColumn.value = JSON.parse(e.data).column
tableData.value = JSON.parse(e.data).message
}
table_websocket.onclose = (e) => {
console.error('Table socket closed unexpectedly', e);
}
})
</script> </script>
<template> <template>
...@@ -73,6 +89,10 @@ onMounted(() => { ...@@ -73,6 +89,10 @@ onMounted(() => {
<el-input v-model="input" placeholder="Please input" @keyup.enter="send"></el-input> <el-input v-model="input" placeholder="Please input" @keyup.enter="send"></el-input>
<el-button @click="send">Send</el-button> <el-button @click="send">Send</el-button>
<br/> <br/>
<el-table :data="tableData" class="w-full">
<el-table-column v-for="item in tableColumn" :label="item" :prop="item" width="100"/>
</el-table>
</template> </template>
<style scoped> <style scoped>
......
mqtt/mqtt.py
...@@ -34,7 +34,8 @@ def on_message(mqtt_client, userdata, msg): ...@@ -34,7 +34,8 @@ def on_message(mqtt_client, userdata, msg):
data = parse_proto(msg.payload) data = parse_proto(msg.payload)
# data = msg.payload.decode('utf-8') # data = msg.payload.decode('utf-8')
print(f'Received message on topic: {msg.topic} with payload: {data}') print(f'Received message on topic: {msg.topic} with payload: {data}')
# send_websocket_message(data) send_websocket_message(data)
send_websocket_message(data, group_name="chat_table")
client = mqtt.Client() client = mqtt.Client()
......
mqtt/utils.py
import json import json
from .auto_generate_python import TDSCmd_pb2, OAM_datastruct_pb2, Device_datastruct_pb2 from .auto_generate_python import TDSCmd_pb2, OAM_datastruct_pb2, Device_datastruct_pb2
from .auto_generate_python.Device_datastruct_pb2 import TDSXDC_Device_cmd
from google.protobuf.json_format import MessageToJson from google.protobuf.json_format import MessageToJson
def parse_proto(data: bytes) -> str: def parse_proto(data: bytes) -> dict:
cmd = TDSCmd_pb2.TDSCmd() cmd = TDSCmd_pb2.TDSCmd()
cmd.ParseFromString(data) cmd.ParseFromString(data)
data = MessageToJson(cmd,
device_cmd = TDSXDC_Device_cmd()
cmd.parameters[0].Unpack(device_cmd)
data = MessageToJson(device_cmd,
including_default_value_fields=True, including_default_value_fields=True,
preserving_proto_field_name=True) preserving_proto_field_name=True)
return json.dumps(json.loads(data), separators=(',', ':'))
device_cmd_dict = json.loads(data)
data = {item.get('fieldName'): item.get('value')
for item in device_cmd_dict['fields']}
# return json.dumps(json.loads(data), separators=(',', ':'))
return data
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment