客服react

// import { useEffect, useState } from "react";

// export default function ceshi() {
//   const [value,setValue] = useState(2);
//   const [data,setData] = useState('');
//   const ws = new WebSocket('ws://124.222.224.186:8800');
// useEffect(()=>{

//   ws.onopen = () => {
//     console.log('服务器已连接');
//   };
//   ws.onmessage = (msg) => {
//     setData(msg.data)
//     // alert( msg.data)
//     console.log('来自服务器端的数据：' + msg.data); //监听接受来自服务端的信息
//   };
//   ws.onclose = () => {
//     console.log('服务器关闭');
//   };
// },[value])
//   const sendserver=()=> {
//     ws.send('65555555555555555555'); //向服务端发送信息
//     setValue(3);
//   }
//   return <div>
//     <div dangerouslySetInnerHTML={{__html:data}}></div>
//     <button onClick={sendserver}>发送</button>
//   </div>;
// }
import React, { useState, useRef, useLayoutEffect, useCallback } from 'react';
// import Header from './components/header';
// import './App.less';

const App = () => {
  const ws = useRef<WebSocket | null>(null);
  const [message, setMessage] = useState('');
  const [readyState, setReadyState] = useState('正在链接中');
  const [rdNum, SetRdNum] = useState<number>(0);

  /**
   * 伪随机函数，测试用
   *  */
  const getRandomInt = useCallback(() => {
    SetRdNum(Math.floor(Math.random() * Math.floor(999)));
  }, []);

  const webSocketInit = useCallback(() => {
    const stateArr = [
      '正在链接中',
      '已经链接并且可以通讯',
      '连接正在关闭',
      '连接已关闭或者没有链接成功',
    ];
    if (!ws.current || ws.current.readyState === 3) {
      ws.current = new WebSocket('ws://localhost:7070');
      ws.current.onopen = _e =>
        setReadyState(stateArr[ws.current?.readyState ?? 0]);
      ws.current.onclose = _e =>
        setReadyState(stateArr[ws.current?.readyState ?? 0]);
      ws.current.onerror = e =>
        setReadyState(stateArr[ws.current?.readyState ?? 0]);
      ws.current.onmessage = e => {
        setMessage(e.data);
      };
    }
  }, [ws]);

  /**
   * 初始化 WebSocket
   * 且使用 WebSocket 原声方法获取信息
   *  */
  useLayoutEffect(() => {
    getRandomInt();
    webSocketInit();
    return () => {
      ws.current?.close();
    };
  }, [ws, getRandomInt, webSocketInit]);

  console.log('ws.readyState', ws.current?.readyState);

  return (
    <div className='App'>
      {/* <Header status={readyState} /> */}
      <div className='container'>
        <div>{message}</div>
        {/* <div>{readyState}</div> */}
        <div
          onClick={() => {
            ws.current?.close();
          }}>
          Clone
        </div>
        <div
          onClick={() => {
            getRandomInt();
            webSocketInit();
          }}>
          start
        </div>
        <div
          onClick={() => {
            if (ws.current?.readyState !== 1) {
              console.log('尚未链接成功');
              setMessage('正在链接');
              return;
            }
            ws.current?.send(rdNum.toString());
          }}>
          ID:{rdNum}
        </div>
      </div>
    </div>
  );
};

export default App;