diff --git a/src/App.tsx b/src/App.tsx index 518d485..2248a4e 100644 --- a/src/App.tsx +++ b/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"); diff --git a/src/components/b_table.tsx b/src/components/b_table.tsx index f363abd..8cc90da 100644 --- a/src/components/b_table.tsx +++ b/src/components/b_table.tsx @@ -28,7 +28,7 @@ const BTable = (props: any) => { { const location = useLocation(); useEffect(() => { + console.log("layout ",usrStore.isNeedLogin); if (usrStore.isNeedLogin) { nav("/login"); } diff --git a/src/pages/home/homeBottom/dispath.tsx b/src/pages/home/homeBottom/dispath.tsx index f33f875..5ecd6c5 100644 --- a/src/pages/home/homeBottom/dispath.tsx +++ b/src/pages/home/homeBottom/dispath.tsx @@ -39,6 +39,8 @@ const Dispath = (props: Store) => { const [userList, setUserList] = useState([]); 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) => { diff --git a/src/pages/politicalStudy/index.tsx b/src/pages/politicalStudy/index.tsx index 5ecfb30..74e5e1b 100644 --- a/src/pages/politicalStudy/index.tsx +++ b/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 { diff --git a/src/util/socket.ts b/src/util/socket.ts index 2d4ac45..a0bc81f 100644 --- a/src/util/socket.ts +++ b/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 + } + + 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 = {} + 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) + } } - send(data: any) { - Socket.ws.send(data); + public hert(){ + this.times = setTimeout(() => this.send({"type":"heartbeat"}), 3000) } - onmessage(callback: any) { - Socket.ws.onmessage = callback; + 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 } - onclose(callback: any) { - Socket.ws.onclose = callback; + + private getRetryInterval(): number { + if (typeof this.autoReconnect === 'boolean') { + return 1000 + } else if (this.autoReconnect && this.autoReconnect.retryInterval) { + return this.autoReconnect.retryInterval + } + return 1000 } - onopen(callback: any) { - Socket.ws.onopen = callback; + + public send(data: any) { + if (this.ws && this.ws.readyState === WebSocket.OPEN) { + this.ws.send(JSON.stringify(data)) + } else { + console.error('WebSocket 连接未打开') + } } - onerror(callback: any) { - Socket.ws.onerror = callback; + + public close() { + if (this.ws) { + this.ws.close() + SocketService.instance = null + } } - close() { - Socket.ws.close(); + + private emit(event: string, data: any) { + if (!this.listeners[event]) { + return + } + this.listeners[event].forEach((listener) => listener(data)) } - // 心跳 - heartbeat() { - setInterval(() => { - Socket.ws.send(`{"type":"heartbeat"}`); - }, 1000*60); + + 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() + } } -} - -export const socket = new Socket(); \ No newline at end of file + + 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 + \ No newline at end of file