fix: 构建群发邮件websocket测试页

config/routes.js

@@ -70,13 +70,13 @@ export default [
         component: './Customer/Business',
         access: 'authRouteFilter',
         validatePerm: true
+      },
+      {
+        path: '/customer/test',
+        name: 'test',
+        icon: 'icon-usd-circle',
+        component: './Customer/Test'
       }
-      // {
-      //   path: '/customer/test',
-      //   name: 'test',
-      //   icon: 'icon-usd-circle',
-      //   component: './Customer/Test'
-      // }
     ]
   },
   {

src/pages/Customer/Test/index.tsx

@@ -0,0 +1,64 @@
+import { Input } from 'antd'
+import { useRef, useEffect, useState } from 'react'
+
+enum ReadyState {
+  '0' = '连接中',
+  '1' = '正常',
+  '2' = '断开中',
+  '3' = '断开'
+}
+
+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
+  }, [])
+
+  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)
+      })
+    }
+  }, [ws.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>
+      </div>
+      <div className="ml-4 border w-400px h-800px border-gray-400">
+        {receviceMsg.map(item => (
+          <div key={item.mail}>
+            <span>{item.mail}</span>
+            <span>{item.status}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default Test