From fc681c510c67a64012279d6ca9190ba91ac60687 Mon Sep 17 00:00:00 2001
From: chaiying <chaiying@smartvision.cn>
Date: Mon, 22 Apr 2024 10:57:45 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=84=20refactor:=20=E4=BC=98=E5=8C=96ws?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E4=BB=A3=E7=A0=81(=E4=BB=8Eahokks=E5=BC=95?=
 =?UTF-8?q?=E5=85=A5=E6=94=B9=E4=B8=BA=E4=BD=BF=E7=94=A8=E5=8E=9F=E7=94=9F?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81)=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../material/src/centerLink/CenterLink.tsx    | 17 +++---
 .../centerLink/components/TerminalForm.tsx    |  9 ++-
 .../src/centerLink/components/WebTerminal.tsx | 57 ++++++++++++-------
 .../material/src/centerLink/demo/basic.tsx    |  2 +-
 4 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/packages/material/src/centerLink/CenterLink.tsx b/packages/material/src/centerLink/CenterLink.tsx
index 2adb726..862b4ec 100644
--- a/packages/material/src/centerLink/CenterLink.tsx
+++ b/packages/material/src/centerLink/CenterLink.tsx
@@ -1,8 +1,7 @@
-import React,{useRef} from 'react'
+import React,{useRef,useState} from 'react'
 import TerminalForm from './components/TerminalForm'
 import WebTerminal from './components/WebTerminal'
 import './index.less';
-import style from 'packages/meta/src/badge/style';
 
 interface CenterLinkProps{
     websocketUrl:string; // websocket服务地址
@@ -22,8 +21,8 @@ const materialName='center-link';
 
 const CenterLink:React.FC<CenterLinkProps>=(props:CenterLinkProps)=>{
     const {
-        websocketUrl,
         ip,
+        websocketUrl,
         token,
         terminalStyle,
         onConnect,
@@ -35,22 +34,24 @@ const CenterLink:React.FC<CenterLinkProps>=(props:CenterLinkProps)=>{
         style
     }=props;
     const webRef=useRef(null);
+    const [ipUrl,setIpUrl]=useState<string>(ip);
 
     // 处理开始连接服务器ip的事件
     const handleConnectClick=(values:any)=>{
         const {ip}=values;
-        if(ip&&token&&websocketUrl&&webRef.current){
-            webRef.current.connect();
-        }
+        setIpUrl((
+            pre
+        )=>(ip))
         onConnect&&onConnect(values);
     }
+
   return (
     <div className={materialName} style={style}>
-        <TerminalForm onConnect={handleConnectClick} onExportLogs={onExportLogs} />
+        <TerminalForm ip={ipUrl}  onConnect={handleConnectClick} onExportLogs={onExportLogs} />
         <WebTerminal 
             ref={webRef}
+            ip={ipUrl}
             websocketUrl={websocketUrl}
-            ip={ip}
             token={token}
             terminalStyle={terminalStyle}
             onOpen={onOpen}
diff --git a/packages/material/src/centerLink/components/TerminalForm.tsx b/packages/material/src/centerLink/components/TerminalForm.tsx
index 9472a9b..f5640b9 100644
--- a/packages/material/src/centerLink/components/TerminalForm.tsx
+++ b/packages/material/src/centerLink/components/TerminalForm.tsx
@@ -1,20 +1,27 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button, Form, Input,FormProps } from '@zhst/meta';
 import '../index.less';
 
 const materialName='terminal-form';
 
 export interface  TerminalFormProps{
+    ip:string; // ip地址
     onConnect:FormProps['onFinish']; // 开始连接事件
     onExportLogs:()=>void; // 导出日志事件
 }
 
 const TerminalForm:React.FC<TerminalFormProps>=(props:TerminalFormProps)=> {
     const { 
+        ip,
         onConnect,
         onExportLogs,
         }=props;
     const [form] = Form.useForm();
+    useEffect(()=>{
+        form.setFieldsValue({
+            ip,
+        });
+    },[])
   return (
     <div className={materialName}>
         <h1>连接中心服务器</h1>
diff --git a/packages/material/src/centerLink/components/WebTerminal.tsx b/packages/material/src/centerLink/components/WebTerminal.tsx
index 4beafaf..7adb349 100644
--- a/packages/material/src/centerLink/components/WebTerminal.tsx
+++ b/packages/material/src/centerLink/components/WebTerminal.tsx
@@ -1,7 +1,6 @@
 
 import React,{useRef,useEffect, useImperativeHandle,
     forwardRef,} from 'react';
-import { useWebSocket } from '@zhst/hooks';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import 'xterm/css/xterm.css';
@@ -56,21 +55,10 @@ const WebTerminal:React.FC<WebTerminalProps&WebsocketOptions>=forwardRef((props:
     onMessage,
     onError,
     }=props;
-  const { readyState, sendMessage, latestMessage, disconnect, connect }:WebsocketResult = useWebSocket(
-    `${websocketUrl}?ip=${ip}&Authorization=${token}`,{manual:true,reconnectLimit:0,onOpen,
-      onClose,
-      onMessage,
-      onError}
-  );
   const termRef = useRef(null);
   const termClassRef=useRef(null)
   // const currLine=useRef(null);
-
-  useEffect(()=>{
-    if(termClassRef?.current){
-      termClassRef.current.write(latestMessage?.data+'\r\n\x1b[33m$\x1b[0m ');
-    }
-  },[latestMessage]);
+  const wsRef=useRef(null);
 
   // terminal初始化
   useEffect(()=>{
@@ -113,14 +101,43 @@ const WebTerminal:React.FC<WebTerminalProps&WebsocketOptions>=forwardRef((props:
     
   },[]);
 
+  useEffect(()=>{
+    if(ip&&websocketUrl&&token){
+    const ws=new WebSocket(`${websocketUrl}?ip=${ip}&Authorization=${token}`);
+    wsRef.current=ws;
+      if(wsRef?.current){
+        wsRef.current.onopen=(event: WebSocketEventMap['open'], instance: WebSocket)=>{
+          if(onOpen){
+            onOpen(event,instance);
+          }
+        }
+        wsRef.current.onclose=(event: WebSocketEventMap['close'], instance: WebSocket)=>{
+          if(onClose){
+            onClose(event,instance);
+          }
+        }
+        wsRef.current.onmessage=(message: WebSocketEventMap['message'], instance: WebSocket)=>{
+          if(termClassRef.current){
+            termClassRef.current.write(message?.data+'\r\n\x1b[33m$\x1b[0m ');
+          }
+          if(onMessage){
+            onMessage(message,instance);
+          }
+        }
+        wsRef.current.onerror=(event: WebSocketEventMap['error'], instance: WebSocket)=>{
+          if(onError){
+            onError(event,instance);
+          }
+        }
+    }
+    
+    }
+  },[ip,websocketUrl,token])
+
   // 自定义暴露给父组件的实例
-  useImperativeHandle(ref,()=>({
-    readyState,
-    sendMessage,
-    latestMessage,
-    disconnect,
-    connect
-  }));
+  useImperativeHandle(ref,()=>(
+    wsRef.current  
+    ));
 
   return (
       <div className={materialName}>
diff --git a/packages/material/src/centerLink/demo/basic.tsx b/packages/material/src/centerLink/demo/basic.tsx
index 2f33cda..10ff6ff 100644
--- a/packages/material/src/centerLink/demo/basic.tsx
+++ b/packages/material/src/centerLink/demo/basic.tsx
@@ -6,7 +6,7 @@ const demo = () => {
       <CenterLink
         style={{width:'100%',height:'600px'}}
         websocketUrl={'ws://10.0.0.7:50051/active'}
-        token={'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MTM1OTI2NDYsImp0aSI6ImFkbWluIn0._mVU216h0q8va8bZ8PCKfGOKslYJWdRLFvLzUdvGDN4'}
+        token={'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MTM4NDAxOTAsImp0aSI6ImFkbWluIn0.KAcgU8r-AIQ2GEu5g2o-YANstqisy5WT6rz5fbMjdcs'}
         ip={'127.0.0.1'}
         terminalStyle={{width:'100%',height:'calc(100% - 180px)'}}
         onConnect={(values)=>{