From df6c23af89306b561ac1b0888a8094a6b6ed2f8a Mon Sep 17 00:00:00 2001 From: naiba Date: Mon, 2 Dec 2024 22:10:07 +0800 Subject: [PATCH] fix: websocket --- package-lock.json | 7 --- package.json | 1 - src/components/fm.tsx | 120 +++++++++++++++++------------------- src/components/terminal.tsx | 56 ++++++++--------- 4 files changed, 80 insertions(+), 104 deletions(-) diff --git a/package-lock.json b/package-lock.json index 650c495..95df345 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,7 +40,6 @@ "react-hook-form": "^7.53.1", "react-i18next": "^15.1.2", "react-router-dom": "^6.27.0", - "react-use-websocket": "^4.10.1", "react-virtuoso": "^4.12.0", "sonner": "^1.6.1", "swr": "^2.2.5", @@ -5604,12 +5603,6 @@ } } }, - "node_modules/react-use-websocket": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/react-use-websocket/-/react-use-websocket-4.10.1.tgz", - "integrity": "sha512-PrZbKj3BSy9kRU9otKEoMi0FOcEVh1abyYxJDzB/oL7kMBDBs+ZXhnWWed/sc679nPHAWMOn1gotoV04j5gJUw==", - "license": "MIT" - }, "node_modules/react-virtuoso": { "version": "4.12.0", "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.12.0.tgz", diff --git a/package.json b/package.json index aafe0b0..d3a1059 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,6 @@ "react-hook-form": "^7.53.1", "react-i18next": "^15.1.2", "react-router-dom": "^6.27.0", - "react-use-websocket": "^4.10.1", "react-virtuoso": "^4.12.0", "sonner": "^1.6.1", "swr": "^2.2.5", diff --git a/src/components/fm.tsx b/src/components/fm.tsx index cfc0bb4..5998905 100644 --- a/src/components/fm.tsx +++ b/src/components/fm.tsx @@ -10,7 +10,6 @@ import { import { IconButton } from "./xui/icon-button" import { createFM } from "@/api/fm" import { ModelCreateFMResponse, FMEntry, FMOpcode, FMIdentifier, FMWorkerData, FMWorkerOpcode } from "@/types" -import useWebSocket from "react-use-websocket" import { toast } from "sonner" import { ColumnDef } from "@tanstack/react-table" import { Folder, File } from "lucide-react" @@ -174,70 +173,63 @@ const FMComponent: React.FC = ({ wsUrl, } } - const { sendMessage, getWebSocket } = useWebSocket(wsUrl, { - share: false, - onOpen: () => { - listFile(); - }, - onClose: (e) => { - console.log('WebSocket connection closed:', e); - }, - onError: (e) => { - console.error(e); - toast("Websocket" + " " + t("Error"), { - description: t("Results.UnExpectedError"), - }) - }, - onMessage: async (e) => { - try { - const buf: ArrayBufferLike = e.data; - - if (firstChunk.current) { - const identifier = new Uint8Array(buf, 0, 4); - if (arraysEqual(identifier, FMIdentifier.file)) { - worker.postMessage({ operation: 1, arrayBuffer: buf, fileName: currentBasename.current }); - firstChunk.current = false; - } else if (arraysEqual(identifier, FMIdentifier.fileName)) { - const { path, fmList } = await fm.parseFMList(buf); - setPath(path); - setFMEntries(fmList); - } else if (arraysEqual(identifier, FMIdentifier.error)) { - const errBytes = buf.slice(4); - const errMsg = new TextDecoder('utf-8').decode(errBytes); - throw new Error(errMsg); - } else if (arraysEqual(identifier, FMIdentifier.complete)) { - // Upload completed - if (uOpen) setuOpen(false); - listFile(); - } else { - throw new Error(t("Results.UnknownIdentifier")); - } - } else { - await waitForHandleReady(); - worker.postMessage({ operation: 2, arrayBuffer: buf, fileName: currentBasename.current }); - } - } catch (error) { - console.error('Error processing received data:', error); - toast("FM" + " " + t("Error"), { - description: t("Results.UnExpectedError"), - }) - if (dOpen) setdOpen(false); - if (uOpen) setuOpen(false); - } - } - }); - - const socket = getWebSocket(); - useEffect(() => { - if (socket && 'binaryType' in socket) - socket.binaryType = 'arraybuffer'; - }, [socket]) - const [currentPath, setPath] = useState(''); useEffect(() => { listFile(); }, [currentPath]) + const ws = new WebSocket(wsUrl); + ws.binaryType = 'arraybuffer'; + ws.onopen = () => { + listFile(); + } + ws.onclose = (e) => { + console.log('WebSocket connection closed:', e); + } + ws.onerror = (e) => { + console.error(e); + toast("Websocket" + " " + t("Error"), { + description: t("Results.UnExpectedError"), + }) + } + ws.onmessage = async (e) => { + try { + const buf: ArrayBufferLike = e.data; + + if (firstChunk.current) { + const identifier = new Uint8Array(buf, 0, 4); + if (arraysEqual(identifier, FMIdentifier.file)) { + worker.postMessage({ operation: 1, arrayBuffer: buf, fileName: currentBasename.current }); + firstChunk.current = false; + } else if (arraysEqual(identifier, FMIdentifier.fileName)) { + const { path, fmList } = await fm.parseFMList(buf); + setPath(path); + setFMEntries(fmList); + } else if (arraysEqual(identifier, FMIdentifier.error)) { + const errBytes = buf.slice(4); + const errMsg = new TextDecoder('utf-8').decode(errBytes); + throw new Error(errMsg); + } else if (arraysEqual(identifier, FMIdentifier.complete)) { + // Upload completed + if (uOpen) setuOpen(false); + listFile(); + } else { + throw new Error(t("Results.UnknownIdentifier")); + } + } else { + await waitForHandleReady(); + worker.postMessage({ operation: 2, arrayBuffer: buf, fileName: currentBasename.current }); + } + } catch (error) { + console.error('Error processing received data:', error); + toast("FM" + " " + t("Error"), { + description: t("Results.UnExpectedError"), + }) + if (dOpen) setdOpen(false); + if (uOpen) setuOpen(false); + } + } + const listFile = () => { const prefix = new Int8Array([FMOpcode.List]); const pathMsg = new TextEncoder().encode(currentPath); @@ -246,7 +238,7 @@ const FMComponent: React.FC = ({ wsUrl, msg.set(prefix); msg.set(pathMsg, prefix.length); - sendMessage(msg); + ws.send(msg); } const downloadFile = (basename: string) => { @@ -258,7 +250,7 @@ const FMComponent: React.FC = ({ wsUrl, msg.set(prefix); msg.set(filePathMessage, prefix.length); - sendMessage(msg); + ws.send(msg); } const uploadFile = async (file: File) => { @@ -267,13 +259,13 @@ const FMComponent: React.FC = ({ wsUrl, // Send header const header = fm.buildUploadHeader({ path: currentPath, file: file }); - sendMessage(header); + ws.send(header); // Send data chunks while (offset < file.size) { const chunk = file.slice(offset, offset + chunkSize); const arrayBuffer = await fm.readFileAsArrayBuffer(chunk); - if (arrayBuffer) sendMessage(arrayBuffer); + if (arrayBuffer) ws.send(arrayBuffer); offset += chunkSize; } } diff --git a/src/components/terminal.tsx b/src/components/terminal.tsx index 319da29..4739114 100644 --- a/src/components/terminal.tsx +++ b/src/components/terminal.tsx @@ -12,7 +12,6 @@ import { AttachAddon } from "@xterm/addon-attach"; import { FitAddon } from '@xterm/addon-fit'; import { useRef, useEffect, useState } from "react"; import { sleep } from "@/lib/utils"; -import useWebSocket from "react-use-websocket"; import { IconButton } from "./xui/icon-button"; import "@xterm/xterm/css/xterm.css"; import { createTerminal } from "@/api/terminal"; @@ -30,24 +29,22 @@ interface XtermProps { const XtermComponent: React.FC = ({ wsUrl, setClose, ...props }) => { const terminalRef = useRef(null); - const { sendMessage, getWebSocket } = useWebSocket(wsUrl, { - share: false, - onOpen: () => { - onResize(); - }, - onClose: () => { - terminal.dispose(); - setClose(true); - }, - onError: (e) => { - console.error(e); - toast("Websocket error", { - description: "View console for details.", - }) - }, - }); + const ws = new WebSocket(wsUrl); + ws.binaryType = "arraybuffer"; + ws.onopen = () => { + onResize(); + } + ws.onclose = () => { + terminal.dispose(); + setClose(true); + } + ws.onerror = (e) => { + console.error(e); + toast("Websocket error", { + description: "View console for details.", + }) + } - const socket = getWebSocket(); const terminal = useRef( new Terminal({ cursorBlink: true, @@ -76,7 +73,7 @@ const XtermComponent: React.FC = ({ w msg.set(prefix); msg.set(resizeMessage, prefix.length); - sendMessage(msg); + ws.send(msg); } }; @@ -95,25 +92,20 @@ const XtermComponent: React.FC = ({ w }; useEffect(() => { - if (socket && "binaryType" in socket && terminalRef.current) { - socket.binaryType = "arraybuffer"; - const attachAddon = new AttachAddon(socket); - - terminal.loadAddon(attachAddon); - terminal.loadAddon(fitAddon); - - terminal.open(terminalRef.current); - } + if (!ws || !terminalRef.current) return; + const attachAddon = new AttachAddon(ws); + terminal.loadAddon(attachAddon); + terminal.loadAddon(fitAddon); + terminal.open(terminalRef.current); window.addEventListener('resize', onResize); - return () => { window.removeEventListener('resize', onResize); - if (socket) { - socket.close(); + if (ws) { + ws.close(); } }; - }, [socket, terminal]); + }, [ws, terminal]); return
; };