first commit

src/App.tsx

@@ -2,21 +2,32 @@ import { Outlet } from "react-router";
 import MyComponent from "./components/errorComp";
 // import MapUtl from "./components/map/mapUtil";
 import { useEffect } from "react";
-const { socket } = require("./util/socket");
-socket.init();
-socket.onmessage((e) => {
-  // const data = JSON.parse(e.data);
-  // if (data.type === "heartbeat") {
-  //   MapUtl.makerList[0].setPosition([103.55, 30.342]);
-  //   var m = MapUtl.amap;
-  //   var newIcon = new m.Icon({
-  //     image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png", //Icon 的图像
-  //     size: new m.Size(25, 34), // 图标大小
-  //     anchor: new m.Pixel(12, 32), // 图标锚点
-  //   });
-  //   MapUtl.makerList[0].setIcon(newIcon);
-  // }
-});
+// const SocketService = require("./util/socket");
+import SocketService from "./util/socket";
+const socketService = SocketService.getInstance();
+const onMessage = (data: any) => {
+  console.log("message", data);
+};
+socketService.on("message", onMessage);
+const onConnected = () => {
+  console.log("connected");
+};
+socketService.on("connected", onConnected);
+
+// socketService.
+// socket.onmessage((e) => {
+// const data = JSON.parse(e.data);
+// if (data.type === "heartbeat") {
+//   MapUtl.makerList[0].setPosition([103.55, 30.342]);
+//   var m = MapUtl.amap;
+//   var newIcon = new m.Icon({
+//     image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png", //Icon 的图像
+//     size: new m.Size(25, 34), // 图标大小
+//     anchor: new m.Pixel(12, 32), // 图标锚点
+//   });
+//   MapUtl.makerList[0].setIcon(newIcon);
+// }
+// });
 const App = () => {
   useEffect(() => {
     console.log("app mounted");

src/components/b_table.tsx

@@ -28,7 +28,7 @@ const BTable = (props: any) => {
       <Table
         style={{ height: "100%", overflow: "auto" }}
         pagination={false}
-        scroll={{ x: 'max-content' }}
+        // scroll={{ x: 'max-content' }}
         loading={store.listStatus}
         rowSelection={rowSelection}
         columns={props.columns}

src/components/layout/layout.tsx

@@ -13,6 +13,7 @@ const LayOut = (props: Store) => {
   const location = useLocation();
 
   useEffect(() => {
+    console.log("layout ",usrStore.isNeedLogin);
     if (usrStore.isNeedLogin) {
       nav("/login");
     }

src/pages/home/homeBottom/dispath.tsx

@@ -39,6 +39,8 @@ const Dispath = (props: Store) => {
   const [userList, setUserList] = useState<any>([]);
 
   useEffect(() => {
+   
+   try {
     trainingCatStore.getlist().then(() => {
       setStashList(trainingCatStore.list);
     });
@@ -50,6 +52,10 @@ const Dispath = (props: Store) => {
       });
       setUserList(data ?? []);
     });
+   } catch (error) {
+    console.log(error);
+    
+   }
   }, [trainingCatStore]);
 
   const onFinish = (values: any) => {

src/pages/politicalStudy/index.tsx

@@ -52,7 +52,9 @@ const PoliticalStudy = (props: Store) => {
       ...values,
       score:Number(values.score)
     }
-    data.file_url = "";
+    if (values.file_url){
+      data.file_url = values.file_url[0].url;
+    }
     if (!record?.id) {
       politicalStudyStore.add(data);
     } else {

src/util/socket.ts

@@ -1,38 +1,143 @@
-class Socket {
-    static socketUrl = "ws://localhost:12214/ws";
-    static ws: WebSocket;
-    init() {
-        try {
-            Socket.ws = new WebSocket(Socket.socketUrl);    
-            this.heartbeat();
-        } catch (error) {
-            console.log(error);
+export type AutoReconnectOptions = boolean | {
+    maxRetries?: number
+    retryInterval?: number
+    onMaxRetriesReached?: Function
   }
-    }
-    send(data: any) {
-        Socket.ws.send(data);
-    }
-    onmessage(callback: any) {
-        Socket.ws.onmessage = callback;
-    }
-    onclose(callback: any) {
-        Socket.ws.onclose = callback;
-    }
-    onopen(callback: any) {
-        Socket.ws.onopen = callback;
-    }
-    onerror(callback: any) {
-        Socket.ws.onerror = callback;
-    }
-    close() {
-        Socket.ws.close();
-    }
-    // 心跳
-    heartbeat() {
-        setInterval(() => {
-            Socket.ws.send(`{"type":"heartbeat"}`);
-        }, 1000*60);
-    }
-}
   
-export const socket = new Socket();
+  export enum ConnectionStatus {
+    Disconnected = 'DISCONNECTED',
+    Connected = 'CONNECTED',
+    Error = 'ERROR'
+  }
+  
+  class SocketService {
+    private static instance: SocketService | null = null
+    private ws: WebSocket | null = null
+    private listeners: Record<string, Function[]> = {}
+    private autoReconnect: AutoReconnectOptions = true
+    private times: any = null
+    private retries: number = 0
+    private connectionStatus: ConnectionStatus = ConnectionStatus.Disconnected
+  
+    private constructor() {
+      this.connect()
+    }
+  
+    public static getInstance(): SocketService {
+      if (!SocketService.instance) {
+        SocketService.instance = new SocketService()
+      }
+      return SocketService.instance
+    }
+  
+    public setAutoReconnectOptions(options: AutoReconnectOptions) {
+      this.autoReconnect = options
+    }
+  
+    public connect() {
+      this.ws = new WebSocket('ws://127.0.0.1:12214/ws?id=admin')
+      this.ws.onopen = () => {
+        this.connectionStatus = ConnectionStatus.Connected
+        this.emit('connected', null)
+        this.hert()
+      }
+      this.ws.onerror = () => {
+        this.connectionStatus = ConnectionStatus.Error
+        clearTimeout(this.times)
+        this.emit('error', null)
+      }
+      this.ws.onclose = () => {
+        this.connectionStatus = ConnectionStatus.Disconnected
+        clearTimeout(this.times)
+        this.emit('disconnected', null)
+        if (this.shouldReconnect()) {
+          setTimeout(() => this.connect(), this.getRetryInterval())
+        }
+      }
+      this.ws.onmessage = (event) => {
+        this.emit('message', event.data)
+      }
+    }
+    public hert(){
+        this.times = setTimeout(() => this.send({"type":"heartbeat"}), 3000)
+    }
+    private shouldReconnect(): boolean {
+      if (typeof this.autoReconnect === 'boolean') {
+        return this.autoReconnect
+      } else if (this.autoReconnect) {
+        const { maxRetries } = this.autoReconnect
+  
+        if (maxRetries !== undefined) {
+          if (this.retries < maxRetries) {
+            this.retries++
+            return true
+          } else if (this.retries >= maxRetries) {
+            this.autoReconnect.onMaxRetriesReached && this.autoReconnect.onMaxRetriesReached()
+            return false
+          }
+        }
+      }
+      return false
+    }
+  
+    private getRetryInterval(): number {
+      if (typeof this.autoReconnect === 'boolean') {
+        return 1000
+      } else if (this.autoReconnect && this.autoReconnect.retryInterval) {
+        return this.autoReconnect.retryInterval
+      }
+      return 1000
+    }
+  
+    public send(data: any) {
+      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+        this.ws.send(JSON.stringify(data))
+      } else {
+        console.error('WebSocket 连接未打开')
+      }
+    }
+  
+    public close() {
+      if (this.ws) {
+        this.ws.close()
+        SocketService.instance = null
+      }
+    }
+  
+    private emit(event: string, data: any) {
+      if (!this.listeners[event]) {
+        return
+      }
+      this.listeners[event].forEach((listener) => listener(data))
+    }
+  
+    public on(event: string, listener: Function) {
+      if (!this.listeners[event]) {
+        this.listeners[event] = []
+      }
+      this.listeners[event].push(listener)
+      if (event === 'connected' && this.connectionStatus === ConnectionStatus.Connected) {
+        listener()
+      }
+    }
+  
+    public off(event: string, listener: Function) {
+      if (!this.listeners[event]) {
+        return
+      }
+      this.listeners[event] = this.listeners[event].filter((l) => l !== listener)
+    }
+  
+    public getConnectionStatus(): ConnectionStatus {
+      return this.connectionStatus
+    }
+  
+    public watchConnectionStatus(callback: (status: ConnectionStatus) => void) {
+      this.on('connected', () => callback(ConnectionStatus.Connected))
+      this.on('disconnected', () => callback(ConnectionStatus.Disconnected))
+      this.on('error', () => callback(ConnectionStatus.Error))
+    }
+  }
+  
+  export default SocketService
+