Skip to content

Commit df6c23a

Browse files
naibanaiba
committed
fix: websocket
1 parent fc1dc11 commit df6c23a

File tree

4 files changed

+81
-105
lines changed

4 files changed

+81
-105
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@
4343
"react-hook-form": "^7.53.1",
4444
"react-i18next": "^15.1.2",
4545
"react-router-dom": "^6.27.0",
46-
"react-use-websocket": "^4.10.1",
4746
"react-virtuoso": "^4.12.0",
4847
"sonner": "^1.6.1",
4948
"swr": "^2.2.5",

‎src/components/fm.tsx‎

Lines changed: 56 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
import { IconButton } from "./xui/icon-button"
1111
import { createFM } from "@/api/fm"
1212
import { ModelCreateFMResponse, FMEntry, FMOpcode, FMIdentifier, FMWorkerData, FMWorkerOpcode } from "@/types"
13-
import useWebSocket from "react-use-websocket"
1413
import { toast } from "sonner"
1514
import { ColumnDef } from "@tanstack/react-table"
1615
import { Folder, File } from "lucide-react"
@@ -174,70 +173,63 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
174173
}
175174
}
176175

177-
const { sendMessage, getWebSocket } = useWebSocket(wsUrl, {
178-
share: false,
179-
onOpen: () => {
180-
listFile();
181-
},
182-
onClose: (e) => {
183-
console.log('WebSocket connection closed:', e);
184-
},
185-
onError: (e) => {
186-
console.error(e);
187-
toast("Websocket" + " " + t("Error"), {
188-
description: t("Results.UnExpectedError"),
189-
})
190-
},
191-
onMessage: async (e) => {
192-
try {
193-
const buf: ArrayBufferLike = e.data;
194-
195-
if (firstChunk.current) {
196-
const identifier = new Uint8Array(buf, 0, 4);
197-
if (arraysEqual(identifier, FMIdentifier.file)) {
198-
worker.postMessage({ operation: 1, arrayBuffer: buf, fileName: currentBasename.current });
199-
firstChunk.current = false;
200-
} else if (arraysEqual(identifier, FMIdentifier.fileName)) {
201-
const { path, fmList } = await fm.parseFMList(buf);
202-
setPath(path);
203-
setFMEntries(fmList);
204-
} else if (arraysEqual(identifier, FMIdentifier.error)) {
205-
const errBytes = buf.slice(4);
206-
const errMsg = new TextDecoder('utf-8').decode(errBytes);
207-
throw new Error(errMsg);
208-
} else if (arraysEqual(identifier, FMIdentifier.complete)) {
209-
// Upload completed
210-
if (uOpen) setuOpen(false);
211-
listFile();
212-
} else {
213-
throw new Error(t("Results.UnknownIdentifier"));
214-
}
215-
} else {
216-
await waitForHandleReady();
217-
worker.postMessage({ operation: 2, arrayBuffer: buf, fileName: currentBasename.current });
218-
}
219-
} catch (error) {
220-
console.error('Error processing received data:', error);
221-
toast("FM" + " " + t("Error"), {
222-
description: t("Results.UnExpectedError"),
223-
})
224-
if (dOpen) setdOpen(false);
225-
if (uOpen) setuOpen(false);
226-
}
227-
}
228-
});
229-
230-
const socket = getWebSocket();
231-
useEffect(() => {
232-
if (socket && 'binaryType' in socket)
233-
socket.binaryType = 'arraybuffer';
234-
}, [socket])
235-
236176
const [currentPath, setPath] = useState('');
237177
useEffect(() => {
238178
listFile();
239179
}, [currentPath])
240180

181+
const ws = new WebSocket(wsUrl);
182+
ws.binaryType = 'arraybuffer';
183+
ws.onopen = () => {
184+
listFile();
185+
}
186+
ws.onclose = (e) => {
187+
console.log('WebSocket connection closed:', e);
188+
}
189+
ws.onerror = (e) => {
190+
console.error(e);
191+
toast("Websocket" + " " + t("Error"), {
192+
description: t("Results.UnExpectedError"),
193+
})
194+
}
195+
ws.onmessage = async (e) => {
196+
try {
197+
const buf: ArrayBufferLike = e.data;
198+
199+
if (firstChunk.current) {
200+
const identifier = new Uint8Array(buf, 0, 4);
201+
if (arraysEqual(identifier, FMIdentifier.file)) {
202+
worker.postMessage({ operation: 1, arrayBuffer: buf, fileName: currentBasename.current });
203+
firstChunk.current = false;
204+
} else if (arraysEqual(identifier, FMIdentifier.fileName)) {
205+
const { path, fmList } = await fm.parseFMList(buf);
206+
setPath(path);
207+
setFMEntries(fmList);
208+
} else if (arraysEqual(identifier, FMIdentifier.error)) {
209+
const errBytes = buf.slice(4);
210+
const errMsg = new TextDecoder('utf-8').decode(errBytes);
211+
throw new Error(errMsg);
212+
} else if (arraysEqual(identifier, FMIdentifier.complete)) {
213+
// Upload completed
214+
if (uOpen) setuOpen(false);
215+
listFile();
216+
} else {
217+
throw new Error(t("Results.UnknownIdentifier"));
218+
}
219+
} else {
220+
await waitForHandleReady();
221+
worker.postMessage({ operation: 2, arrayBuffer: buf, fileName: currentBasename.current });
222+
}
223+
} catch (error) {
224+
console.error('Error processing received data:', error);
225+
toast("FM" + " " + t("Error"), {
226+
description: t("Results.UnExpectedError"),
227+
})
228+
if (dOpen) setdOpen(false);
229+
if (uOpen) setuOpen(false);
230+
}
231+
}
232+
241233
const listFile = () => {
242234
const prefix = new Int8Array([FMOpcode.List]);
243235
const pathMsg = new TextEncoder().encode(currentPath);
@@ -246,7 +238,7 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
246238
msg.set(prefix);
247239
msg.set(pathMsg, prefix.length);
248240

249-
sendMessage(msg);
241+
ws.send(msg);
250242
}
251243

252244
const downloadFile = (basename: string) => {
@@ -258,7 +250,7 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
258250
msg.set(prefix);
259251
msg.set(filePathMessage, prefix.length);
260252

261-
sendMessage(msg);
253+
ws.send(msg);
262254
}
263255

264256
const uploadFile = async (file: File) => {
@@ -267,13 +259,13 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
267259

268260
// Send header
269261
const header = fm.buildUploadHeader({ path: currentPath, file: file });
270-
sendMessage(header);
262+
ws.send(header);
271263

272264
// Send data chunks
273265
while (offset < file.size) {
274266
const chunk = file.slice(offset, offset + chunkSize);
275267
const arrayBuffer = await fm.readFileAsArrayBuffer(chunk);
276-
if (arrayBuffer) sendMessage(arrayBuffer);
268+
if (arrayBuffer) ws.send(arrayBuffer);
277269
offset += chunkSize;
278270
}
279271
}

‎src/components/terminal.tsx‎

Lines changed: 25 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import { AttachAddon } from "@xterm/addon-attach";
1212
import { FitAddon } from '@xterm/addon-fit';
1313
import { useRef, useEffect, useState } from "react";
1414
import { sleep } from "@/lib/utils";
15-
import useWebSocket from "react-use-websocket";
1615
import { IconButton } from "./xui/icon-button";
1716
import "@xterm/xterm/css/xterm.css";
1817
import { createTerminal } from "@/api/terminal";
@@ -30,24 +29,22 @@ interface XtermProps {
3029
const XtermComponent: React.FC<XtermProps & JSX.IntrinsicElements["div"]> = ({ wsUrl, setClose, ...props }) => {
3130
const terminalRef = useRef<HTMLDivElement>(null);
3231

33-
const { sendMessage, getWebSocket } = useWebSocket(wsUrl, {
34-
share: false,
35-
onOpen: () => {
36-
onResize();
37-
},
38-
onClose: () => {
39-
terminal.dispose();
40-
setClose(true);
41-
},
42-
onError: (e) => {
43-
console.error(e);
44-
toast("Websocket error", {
45-
description: "View console for details.",
46-
})
47-
},
48-
});
49-
50-
const socket = getWebSocket();
32+
const ws = new WebSocket(wsUrl);
33+
ws.binaryType = "arraybuffer";
34+
ws.onopen = () => {
35+
onResize();
36+
}
37+
ws.onclose = () => {
38+
terminal.dispose();
39+
setClose(true);
40+
}
41+
ws.onerror = (e) => {
42+
console.error(e);
43+
toast("Websocket error", {
44+
description: "View console for details.",
45+
})
46+
}
47+
5148
const terminal = useRef(
5249
new Terminal({
5350
cursorBlink: true,
@@ -76,7 +73,7 @@ const XtermComponent: React.FC<XtermProps & JSX.IntrinsicElements["div"]> = ({ w
7673
msg.set(prefix);
7774
msg.set(resizeMessage, prefix.length);
7875

79-
sendMessage(msg);
76+
ws.send(msg);
8077
}
8178
};
8279

@@ -95,25 +92,20 @@ const XtermComponent: React.FC<XtermProps & JSX.IntrinsicElements["div"]> = ({ w
9592
};
9693

9794
useEffect(() => {
98-
if (socket && "binaryType" in socket && terminalRef.current) {
99-
socket.binaryType = "arraybuffer";
100-
const attachAddon = new AttachAddon(socket);
101-
102-
terminal.loadAddon(attachAddon);
103-
terminal.loadAddon(fitAddon);
104-
105-
terminal.open(terminalRef.current);
106-
}
95+
if (!ws || !terminalRef.current) return;
10796

97+
const attachAddon = new AttachAddon(ws);
98+
terminal.loadAddon(attachAddon);
99+
terminal.loadAddon(fitAddon);
100+
terminal.open(terminalRef.current);
108101
window.addEventListener('resize', onResize);
109-
110102
return () => {
111103
window.removeEventListener('resize', onResize);
112-
if (socket) {
113-
socket.close();
104+
if (ws) {
105+
ws.close();
114106
}
115107
};
116-
}, [socket, terminal]);
108+
}, [ws, terminal]);
117109

118110
return <div ref={terminalRef} {...props} />;
119111
};

0 commit comments

Comments
 (0)