cldV2react/src/pages/Customer/Test/index.tsx

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