feat: 1

package.json

@@ -66,6 +66,7 @@
     "lodash-es": "^4.17.21",
     "omit.js": "^2.0.2",
     "qs": "^6.9.4",
+    "rc-queue-anim": "^2.0.0",
     "rc-util": "^5.16.1",
     "react": "17.0.2",
     "react-copy-to-clipboard": "^5.0.4",

pnpm-lock.yaml

@@ -67,6 +67,7 @@ specifiers:
   pro-download: 1.0.1
   puppeteer-core: ^5.0.0
   qs: ^6.9.4
+  rc-queue-anim: ^2.0.0
   rc-util: ^5.16.1
   react: 17.0.2
   react-copy-to-clipboard: ^5.0.4
@@ -104,6 +105,7 @@ dependencies:
   lodash-es: registry.npmmirror.com/lodash-es/4.17.21
   omit.js: registry.npmmirror.com/omit.js/2.0.2
   qs: registry.npmmirror.com/qs/6.10.3
+  rc-queue-anim: registry.npmmirror.com/rc-queue-anim/2.0.0_react-dom@17.0.2+react@17.0.2
   rc-util: registry.npmmirror.com/rc-util/5.18.1_react-dom@17.0.2+react@17.0.2
   react: registry.npmmirror.com/react/17.0.2
   react-copy-to-clipboard: registry.npmmirror.com/react-copy-to-clipboard/5.0.4_react@17.0.2
@@ -9820,6 +9822,12 @@ packages:
       d3-color: registry.npmmirror.com/d3-color/1.4.1
     dev: false
 
+  registry.npmmirror.com/d3-polygon/1.0.6:
+    resolution: {integrity: sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/d3-polygon/-/d3-polygon-1.0.6.tgz}
+    name: d3-polygon
+    version: 1.0.6
+    dev: false
+
   registry.npmmirror.com/d3-quadtree/2.0.0:
     resolution: {integrity: sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/d3-quadtree/-/d3-quadtree-2.0.0.tgz}
     name: d3-quadtree
@@ -11790,6 +11798,19 @@ packages:
     version: 1.0.3
     deprecated: flatten is deprecated in favor of utility frameworks such as lodash.
 
+  registry.npmmirror.com/flubber/0.4.2:
+    resolution: {integrity: sha512-79RkJe3rA4nvRCVc2uXjj7U/BAUq84TS3KHn6c0Hr9K64vhj83ZNLUziNx4pJoBumSPhOl5VjH+Z0uhi+eE8Uw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/flubber/-/flubber-0.4.2.tgz}
+    name: flubber
+    version: 0.4.2
+    dependencies:
+      d3-array: registry.npmmirror.com/d3-array/1.2.4
+      d3-polygon: registry.npmmirror.com/d3-polygon/1.0.6
+      earcut: registry.npmmirror.com/earcut/2.2.3
+      svg-path-properties: registry.npmmirror.com/svg-path-properties/0.2.2
+      svgpath: registry.npmmirror.com/svgpath/2.5.0
+      topojson-client: registry.npmmirror.com/topojson-client/3.1.0
+    dev: false
+
   registry.npmmirror.com/fmin/0.0.2:
     resolution: {integrity: sha512-sSi6DzInhl9d8yqssDfGZejChO8d2bAGIpysPsvYsxFe898z89XhCZg6CPNV3nhUhFefeC/AXZK2bAJxlBjN6A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/fmin/-/fmin-0.0.2.tgz}
     name: fmin
@@ -16701,7 +16722,6 @@ packages:
     resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/performance-now/-/performance-now-2.1.0.tgz}
     name: performance-now
     version: 2.1.0
-    dev: true
 
   registry.npmmirror.com/picocolors/0.2.1:
     resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/picocolors/-/picocolors-0.2.1.tgz}
@@ -17728,7 +17748,6 @@ packages:
     version: 3.4.1
     dependencies:
       performance-now: registry.npmmirror.com/performance-now/2.1.0
-    dev: true
 
   registry.npmmirror.com/railroad-diagrams/1.0.0:
     resolution: {integrity: sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz}
@@ -18147,6 +18166,21 @@ packages:
       react: registry.npmmirror.com/react/17.0.2
       react-dom: registry.npmmirror.com/react-dom/17.0.2_react@17.0.2
 
+  registry.npmmirror.com/rc-queue-anim/2.0.0_react-dom@17.0.2+react@17.0.2:
+    resolution: {integrity: sha512-tojpP72NbaWkwzmR/7x4gFpTBCYR/8I3Jb+KwSdOWpRIDrlmsA4ARAqSElG92GJ7CXAIjxavIGulcqJhXfzHYQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/rc-queue-anim/-/rc-queue-anim-2.0.0.tgz}
+    id: registry.npmmirror.com/rc-queue-anim/2.0.0
+    name: rc-queue-anim
+    version: 2.0.0
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.17.2
+      react: registry.npmmirror.com/react/17.0.2
+      react-dom: registry.npmmirror.com/react-dom/17.0.2_react@17.0.2
+      tween-one: registry.npmmirror.com/tween-one/1.0.58
+    dev: false
+
   registry.npmmirror.com/rc-rate/2.9.1_react-dom@17.0.2+react@17.0.2:
     resolution: {integrity: sha512-MmIU7FT8W4LYRRHJD1sgG366qKtSaKb67D0/vVvJYR0lrCuRrCiVQ5qhfT5ghVO4wuVIORGpZs7ZKaYu+KMUzA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/rc-rate/-/rc-rate-2.9.1.tgz}
     id: registry.npmmirror.com/rc-rate/2.9.1
@@ -20947,6 +20981,12 @@ packages:
       inline-style-parser: registry.nlark.com/inline-style-parser/0.1.1
     dev: false
 
+  registry.npmmirror.com/style-utils/0.3.4:
+    resolution: {integrity: sha512-7hUxeI95H6J0REP/7Y4WTPj0YsRrKljWIz0Q3Tex1nzzba9xAgGOnm3dr5qwsvEbAHcgu0V/sXfZDdqZ/tDtfg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/style-utils/-/style-utils-0.3.4.tgz}
+    name: style-utils
+    version: 0.3.4
+    dev: false
+
   registry.npmmirror.com/stylelint-config-css-modules/2.3.0_stylelint@13.13.1:
     resolution: {integrity: sha512-nSxwaJMv9wBrTAi+O4qXubyi1AR9eB36tJpY0uaFhKgEc3fwWGUzUK1Edl8AQHAoU7wmUeKtsuYjblyRP/V7rw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/stylelint-config-css-modules/-/stylelint-config-css-modules-2.3.0.tgz}
     id: registry.npmmirror.com/stylelint-config-css-modules/2.3.0
@@ -21168,12 +21208,30 @@ packages:
     version: 1.0.0
     engines: {node: '>= 0.4'}
 
+  registry.npmmirror.com/svg-path-properties/0.2.2:
+    resolution: {integrity: sha512-GmrB+b6woz6CCdQe6w1GHs/1lt25l7SR5hmhF8jRdarpv/OgjLyuQygLu1makJapixeb1aQhP/Oa1iKi93o/aQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/svg-path-properties/-/svg-path-properties-0.2.2.tgz}
+    name: svg-path-properties
+    version: 0.2.2
+    dev: false
+
+  registry.npmmirror.com/svg-path-properties/1.0.11:
+    resolution: {integrity: sha512-Wo6SjzONZPL9UAgrnwcCkDGRYP9CbHJGkNcPFIgEVRjiOiJxSd/AtwnGk/4N4iOLGUoas57TMxY0xASDeb9YJg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/svg-path-properties/-/svg-path-properties-1.0.11.tgz}
+    name: svg-path-properties
+    version: 1.0.11
+    dev: false
+
   registry.npmmirror.com/svg-tags/1.0.0:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/svg-tags/-/svg-tags-1.0.0.tgz}
     name: svg-tags
     version: 1.0.0
     dev: true
 
+  registry.npmmirror.com/svgpath/2.5.0:
+    resolution: {integrity: sha512-o/vohwqjUO9nDAh4rcjE3KaW/v//At8UJu2LJMybXidf5QLQLVA4bxH0//4YCsr+1H4Gw1Wi/Jc62ynzSBYidw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/svgpath/-/svgpath-2.5.0.tgz}
+    name: svgpath
+    version: 2.5.0
+    dev: false
+
   registry.npmmirror.com/swr/0.5.7_react@17.0.2:
     resolution: {integrity: sha512-Jh1Efgu8nWZV9rU4VLUMzBzcwaZgi4znqbVXvAtUy/0JzSiN6bNjLaJK8vhY/Rtp7a83dosz5YuehfBNwC/ZoQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/swr/-/swr-0.5.7.tgz}
     id: registry.npmmirror.com/swr/0.5.7
@@ -21772,7 +21830,19 @@ packages:
     resolution: {integrity: sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tween-functions/-/tween-functions-1.2.0.tgz}
     name: tween-functions
     version: 1.2.0
-    dev: true
+
+  registry.npmmirror.com/tween-one/1.0.58:
+    resolution: {integrity: sha512-CE50CO5QQHnvjUqBRrQTfwNCDfPgO/0wOOUWWnxR6JJ6/8gdogYvdENouZu/P/szLW+TNOgbS5L26PjuKf9wzQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tween-one/-/tween-one-1.0.58.tgz}
+    name: tween-one
+    version: 1.0.58
+    dependencies:
+      '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.17.2
+      flubber: registry.npmmirror.com/flubber/0.4.2
+      raf: registry.npmmirror.com/raf/3.4.1
+      style-utils: registry.npmmirror.com/style-utils/0.3.4
+      svg-path-properties: registry.npmmirror.com/svg-path-properties/1.0.11
+      tween-functions: registry.npmmirror.com/tween-functions/1.2.0
+    dev: false
 
   registry.npmmirror.com/tweetnacl/0.14.5:
     resolution: {integrity: sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tweetnacl/-/tweetnacl-0.14.5.tgz}

src/pages/Customer/Test/index.tsx

@@ -1,5 +1,7 @@
-import { Input } from 'antd'
-import { useRef, useEffect, useState } from 'react'
+import { useWebSocket } from 'ahooks'
+import { Button } from 'antd'
+import { useRef, useEffect, useMemo } from 'react'
+import QueueAnim from 'rc-queue-anim'
 
 enum ReadyState {
   '0' = '连接中',
@@ -9,54 +11,46 @@ enum ReadyState {
 }
 
 const Test = () => {
-  const [state, setState] = useState({
-    address: 'ws://192.168.1.26:9000/m/v1/mail/fanout/progress',
-    status: ''
-  })
-  const [receviceMsg, setReceviceMsg] = useState([])
-  const ws = useRef(null)
-  useEffect(() => {
-    const websokcet = new WebSocket(state.address)
-    ws.current = websokcet
-  }, [])
+  const { readyState, latestMessage, disconnect, connect } = useWebSocket(
+    'ws://192.168.1.26:9000/m/v1/mail/fanout/progress'
+  )
+  const messageHistory = useRef([])
+  const messageBox = useRef<HTMLElement>(null)
+  messageHistory.current = useMemo(() => {
+    if (latestMessage?.data) {
+      const data = JSON.parse(latestMessage.data)
+      return messageHistory.current.concat(data)
+    }
+    return messageHistory.current
+  }, [latestMessage])
 
   useEffect(() => {
-    if (ws.current) {
-      ws.current.addEventListener('open', () => {
-        setState({ ...state, status: ReadyState[1] })
-      })
-      ws.current.addEventListener('close', () => {
-        setState({ ...state, status: ReadyState[3] })
-      })
-
-      ws.current.addEventListener('message', msg => {
-        const newMsg = JSON.parse(msg.data)
-        const newMsgList = [...receviceMsg, newMsg]
-        setReceviceMsg(newMsgList)
-      })
+    if (
+      messageBox.current.scrollHeight - messageBox.current.clientHeight >
+      messageBox.current.scrollTop
+    ) {
+      messageBox.current?.scroll({ top: messageBox.current?.scrollHeight })
     }
-  }, [ws.current])
+  }, [messageHistory.current])
 
   return (
     <div className="w-full h-full bg-hex-cccccc p-4 flex flex-row">
       <div>
-        <Input
-          placeholder="请输入ws地址"
-          style={{ width: '450px' }}
-          defaultValue="ws://192.168.1.26:9000/m/v1/mail/fanout/progress"
-          onChange={e => setState({ ...state, address: e.target.value })}
-        />
-
-        <div>当前连接状态：{state.status}</div>
+        <Button onClick={() => connect()}>连接</Button>
+        <Button onClick={() => disconnect()}>断开</Button>
+        <div>当前连接状态：{ReadyState[readyState]}</div>
       </div>
-      <div className="ml-4 border w-400px h-800px border-gray-400">
-        {receviceMsg.map(item => (
+      <QueueAnim
+        className="ml-4 border w-400px h-400px border-gray-400 overflow-y-auto overflow-x-hidden"
+        ref={messageBox}
+      >
+        {messageHistory.current?.map(item => (
           <div key={item.mail}>
             <span>{item.mail}</span>
             <span>{item.status}</span>
           </div>
         ))}
-      </div>
+      </QueueAnim>
     </div>
   )
 }