Buriburizaemon/admin-frontend-domain
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/admin-frontend-domain.git synced 2026-02-04 04:30:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: websocket

Browse Source
This commit is contained in:
naiba
2024-12-02 22:10:07 +08:00
parent fc1dc1128b
commit df6c23af89
4 changed files with 80 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",

44
src/components/fm.tsx
View File

@@ -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,21 +173,26 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
}
}
const { sendMessage, getWebSocket } = useWebSocket(wsUrl, {
share: false,
onOpen: () => {
const [currentPath, setPath] = useState('');
useEffect(() => {
listFile();
},
onClose: (e) => {
}, [currentPath])
const ws = new WebSocket(wsUrl);
ws.binaryType = 'arraybuffer';
ws.onopen = () => {
listFile();
}
ws.onclose = (e) => {
console.log('WebSocket connection closed:', e);
},
onError: (e) => {
}
ws.onerror = (e) => {
console.error(e);
toast("Websocket" + " " + t("Error"), {
description: t("Results.UnExpectedError"),
})
},
onMessage: async (e) => {
}
ws.onmessage = async (e) => {
try {
const buf: ArrayBufferLike = e.data;
@@ -225,18 +229,6 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
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 listFile = () => {
const prefix = new Int8Array([FMOpcode.List]);
@@ -246,7 +238,7 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ 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<FMProps & JSX.IntrinsicElements["div"]> = ({ 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<FMProps & JSX.IntrinsicElements["div"]> = ({ 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;
}
}

36
src/components/terminal.tsx
View File

@@ -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<XtermProps & JSX.IntrinsicElements["div"]> = ({ wsUrl, setClose, ...props }) => {
const terminalRef = useRef<HTMLDivElement>(null);
const { sendMessage, getWebSocket } = useWebSocket(wsUrl, {
share: false,
onOpen: () => {
const ws = new WebSocket(wsUrl);
ws.binaryType = "arraybuffer";
ws.onopen = () => {
onResize();
},
onClose: () => {
}
ws.onclose = () => {
terminal.dispose();
setClose(true);
},
onError: (e) => {
}
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<XtermProps & JSX.IntrinsicElements["div"]> = ({ w
msg.set(prefix);
msg.set(resizeMessage, prefix.length);
sendMessage(msg);
ws.send(msg);
}
};
@@ -95,25 +92,20 @@ const XtermComponent: React.FC<XtermProps & JSX.IntrinsicElements["div"]> = ({ w
};
useEffect(() => {
if (socket && "binaryType" in socket && terminalRef.current) {
socket.binaryType = "arraybuffer";
const attachAddon = new AttachAddon(socket);
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 <div ref={terminalRef} {...props} />;
};