🦄 refactor: 优化ws实现代码(从ahokks引入改为使用原生代码)；

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){
+        setIpUrl((
-            webRef.current.connect();
+            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}

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>

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);
-
+  const wsRef=useRef(null);
-  useEffect(()=>{
-    if(termClassRef?.current){
-      termClassRef.current.write(latestMessage?.data+'\r\n\x1b[33m$\x1b[0m ');
-    }
-  },[latestMessage]);
 
   // 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,()=>({
+  useImperativeHandle(ref,()=>(
-    readyState,
+    wsRef.current  
-    sendMessage,
+    ));
-    latestMessage,
-    disconnect,
-    connect
-  }));
 
   return (
       <div className={materialName}>

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)=>{