feat(tcp-server) display connected tcp client list

src/App.vue

@@ -13,6 +13,7 @@ import {globalNotify} from "@/composables/notification";
 import {isDevMode} from "@/composables/buildMode";
 import {ElMessageBox} from "element-plus";
 import {useSystemModule} from "@/composables/useSystemModule";
+import {useDataFlowModule} from "@/composables/useDataFlowModule";
 
 const wsState = useWsStore();
 
@@ -49,7 +50,9 @@ onMounted(() => {
   websocketService = getWebsocketService();
   websocketService.init(host, onServerMsg, onClientCtrl);
   changeFavicon();
+
   useSystemModule();
+  useDataFlowModule();
 });
 
 onUnmounted(() => {

src/api/apiDataFlow.ts

@@ -55,13 +55,26 @@ export interface ISocketInfo {
     local_port: number;
 }
 
-export interface IInstanceList extends ApiJsonMsg {
-    instances: {
+export interface InstanceInfo {
     ins_idx: number,
     mod_idx: number,
     mod_type: number,
     port_info: ISocketInfo | IPeriphInfo;
-    }[],
+}
+
+export interface IInstanceList extends ApiJsonMsg {
+    instances: InstanceInfo[],
+}
+
+export interface AttachInfo {
+    attach_idx: number,
+    s_ins_idx: number,
+    r_ins_idx: number,
+    data_type: 3 | 4,
+}
+
+export interface IAttachList extends ApiJsonMsg {
+    attaches: AttachInfo[],
 }
 
 export function wt_data_flow_get_instance_list() {

src/api/apiUart.ts

@@ -22,6 +22,8 @@ export enum WtUartCmd {
     SET_STATUS,      /* set specific uart port disable */
     GET_DATA_TYPE = 22, // 0x03 or 0x04
     SET_DATA_TYPE = 23, // 0x03 or 0x04
+
+    GET_DEFAULT_NUM = 24,
 }
 
 enum ANSI_ESCAPE_CODE {
@@ -44,6 +46,10 @@ export interface IUartMsgBaud extends ApiJsonMsg {
     baud: number;
 }
 
+export interface IUartMsgNum extends ApiJsonMsg {
+    num: number;
+}
+
 export function uart_send_msg(payload: Uint8Array, sub_mod: number) {
     /* hard code uart num for now */
     const msg: ApiBinaryMsg = {
@@ -94,3 +100,11 @@ export function uart_set_config(uart_config: IUartConfig, uart_num: number) {
     }
     sendJsonMsg(cmd);
 }
+
+export function uart_get_default_num() {
+    const cmd = {
+        cmd: WtUartCmd.GET_DEFAULT_NUM,
+        module: WtModuleID.UART,
+    }
+    sendJsonMsg(cmd);
+}

src/api/index.ts

@@ -31,11 +31,11 @@ export interface ServerMsg {
 }
 
 export enum WtModuleID {
+    SYSTEM = 0,
     WIFI = 1,
     DATA_FLOW = 2,
     UART = 4,
     OTA = 5,
-    SYSTEM = 6,
 }
 
 export function sendJsonMsg(apiJsonMsg: ApiJsonMsg) {

src/composables/useDataFlowModule.ts

@@ -0,0 +1,44 @@
+import {registerModule} from "@/router/msgRouter";
+import {type ApiJsonMsg, ControlEvent, type ControlMsg, ControlMsgType, WtModuleID} from "@/api";
+import {isDevMode} from "@/composables/buildMode";
+import {useDataFlowStore} from "@/stores/useDataFlowStore";
+import {type IInstanceList, WtDataFlowCmd} from "@/api/apiDataFlow";
+
+
+export function useDataFlowModule() {
+    const dfStore = useDataFlowStore()
+
+    function onClientCtrl(msg: ControlMsg) {
+        if (msg.type !== ControlMsgType.WS_EVENT) {
+            return
+        }
+    }
+
+    function onClientMsg(msg: ApiJsonMsg) {
+        switch (msg.cmd as WtDataFlowCmd) {
+            case WtDataFlowCmd.GET_INS_LIST: {
+                const insList = msg as IInstanceList;
+                dfStore.instanceList = insList.instances;
+                break;
+            }
+            case WtDataFlowCmd.GET_ATTACH_LIST: {
+                break;
+            }
+            default:
+                break;
+        }
+        if (isDevMode()) {
+            console.log(msg);
+        }
+    }
+
+    registerModule(WtModuleID.DATA_FLOW, {
+        ctrlCallback: onClientCtrl,
+        serverJsonMsgCallback: onClientMsg,
+        serverBinMsgCallback: () => {},
+    });
+}
+
+
+
+

src/router/msgRouter.ts

@@ -12,6 +12,9 @@ const moduleMap = new Map<number, IModuleCallback>();
 
 export function registerModule(moduleId: number, moduleCallback: IModuleCallback): boolean {
     if (moduleMap.has(moduleId)) {
+        if (isDevMode()) {
+            console.log("module ", moduleId, "already registered");
+        }
         return false;
     }
 

src/stores/useDataFlowStore.ts

@@ -0,0 +1,11 @@
+import {defineStore} from "pinia";
+import {type Ref, ref} from "vue";
+import type {AttachInfo, InstanceInfo} from "@/api/apiDataFlow";
+
+export const useDataFlowStore = defineStore('data_flow', () => {
+    const instanceList: Ref<InstanceInfo[]> = ref([]);
+
+    return {
+        instanceList,
+    }
+});

src/views/Uart.vue

@@ -65,8 +65,10 @@ import * as uart from '@/api/apiUart';
 import {
   type IUartMsgBaud,
   type IUartMsgConfig,
+  type IUartMsgNum,
   uart_get_baud,
   uart_get_config,
+  uart_get_default_num,
   uart_set_baud,
   uart_set_config,
   WtUartCmd
@@ -363,6 +365,11 @@ const onUartJsonMsg = (msg: api.ApiJsonMsg) => {
       store.uartConfig.parity = uartMsg.parity;
       break;
     }
+    case WtUartCmd.GET_DEFAULT_NUM:
+      uartStore.uartNum = (msg as IUartMsgNum).num;
+      uart_get_baud(uartStore.uartNum);
+      uart_get_config(uartStore.uartNum);
+      break;
     default:
       if (isDevMode()) {
         console.log("uart not treated", msg);
@@ -379,32 +386,6 @@ const onUartBinaryMsg = (msg: ApiBinaryMsg) => {
   store.addSegment(new Uint8Array(msg.payload), true);
 };
 
-const onDataFlowJsonMsg = (msg: api.ApiJsonMsg) => {
-  if (isDevMode()) {
-    console.log("Dflow Json", msg);
-  }
-
-  if (msg.cmd === df.WtDataFlowCmd.GET_INS_LIST) {
-    const instances = msg as df.IInstanceList;
-    if (instances.instances.length) {
-      if (instances.instances[0].mod_type === df.WtDataFlowType.UART) {
-        uartStore.uartNum = (instances.instances[0].port_info as df.IPeriphInfo).periph_num;
-        uart_get_baud(uartStore.uartNum);
-        uart_get_config(uartStore.uartNum);
-        if (isDevMode()) {
-          console.log("set UART num to ", uartStore.uartNum);
-        }
-      }
-    }
-  }
-};
-
-const onDataFlowBinaryMsg = (msg: ApiBinaryMsg) => {
-  if (isDevMode()) {
-    console.log("Dflow Bin", msg);
-  }
-};
-
 const onClientCtrl = (msg: api.ControlMsg) => {
   if (msg.type !== api.ControlMsgType.WS_EVENT) {
     return
@@ -420,7 +401,7 @@ const onClientCtrl = (msg: api.ControlMsg) => {
 
 function updateUartData() {
   /* TODO: hard code for the moment, 0 is UART instance id (can be changed in the future) */
-  df.wt_data_flow_get_instance_list();
+  uart_get_default_num();
   df.wt_data_flow_attach_cur_to_sender(0);
 }
 
@@ -439,12 +420,6 @@ onMounted(() => {
     serverBinMsgCallback: onUartBinaryMsg,
   });
 
-  registerModule(api.WtModuleID.DATA_FLOW, {
-    ctrlCallback: () => {},
-    serverJsonMsgCallback: onDataFlowJsonMsg,
-    serverBinMsgCallback: onDataFlowBinaryMsg,
-  });
-
   firstWinResizeRef.value.style.borderWidth = win1.borderSize + "px";
   thirdWinResizeRef.value.style.borderWidth = win2.borderSize + "px";
   updateCursors()

src/views/text-data-viewer/textDataConfig.vue

@@ -310,6 +310,24 @@
           </el-input>
         </div>
       </el-tab-pane>
+
+
+      <el-tab-pane label="透传" name="fourth" class="min-h-80">
+        <div class="flex flex-col gap-2">
+          <div class="border rounded bg-white p-2">
+            <span class="border-r px-2">TCP服务器端口</span>
+            <span class="px-2 cursor-not-allowed">1346</span>
+          </div>
+          <div>
+            <p><el-button @click="refreshTCPClientList" size="small" type="primary" :plain="true">刷新</el-button> 已连接的客户端：</p>
+
+            <el-table :data="dfStore.instanceList.filter((item) => (item.port_info as ISocketInfo).local_port === 1346)" empty-text="无客户端连接">
+              <el-table-column label="IP" prop="port_info.foreign_ip" />
+              <el-table-column label="端口" prop="port_info.foreign_port"/>
+            </el-table>
+          </div>
+        </div>
+      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
@@ -323,9 +341,13 @@ import {globalNotify} from "@/composables/notification";
 import {ControlEvent} from "@/api";
 import type {MoveEvent} from "sortablejs";
 import InlineSvg from "@/components/InlineSvg.vue";
+import {useDataFlowStore} from "@/stores/useDataFlowStore";
+import {wt_data_flow_get_instance_list, type ISocketInfo} from "@/api/apiDataFlow";
 
 const store = useDataViewerStore()
 const wsStore = useWsStore()
+const dfStore = useDataFlowStore()
+
 const collapseActiveName = ref(["1", "2", "3"])
 
 const uartCustomBaud = ref(114514)
@@ -387,6 +409,11 @@ function checkMove(event: MoveEvent) {
   return !!store.frameBreakRules[toIndex].draggable;
 }
 
+function refreshTCPClientList() {
+  dfStore.instanceList = [];
+  wt_data_flow_get_instance_list();
+}
+
 </script>
 
 <style scoped>