客服

import { useEffect, useState } from 'react';
import './index.less';
import { membersList, messageList } from '@/services/info/info-api';
export default function Info() {
  const [membersLeft, setMembersLeft] = useState<any[]>([]);
  const [messageRight, setMessageRight] = useState<any[]>([]);
  const [sendFunc, setSendFunc] = useState<any>();
  const [data, setDate] = useState<any>();
  let ws: any = null;
  const userName = 'yy';
  const connectWebSocket = (
    userNames: any,
    toName: string,
    lists: any,
    memberList: any,
    getnowMessageUser: any
  ) => {
    if ('WebSocket' in window) {
      ws = new WebSocket(`ws://192.168.2.35:8009/admin/fisp/websocket/${userNames}`);
      setSendFunc(ws);
      ws.onopen = () => {
        console.log('服务器已连接');
      };
      ws.onmessage = (msg: any) => {
        // alert( msg.data)
        let data = JSON.parse(msg.data);
        alert(data.msg);
        // console.log('来自服务器端的数据：' +data.msg,msg.data); //监听接受来自服务端的信息
      };
      ws.onclose = () => {
        console.log('服务器关闭');
      };
    } else {
      alert('当前浏览器不支持Websocket');
    }
  };
  const sendserver = () => {
    const socketMsg = {
      msg: '123',
      typeMsg: 'text',
      toUser: data.senderName,
      showName: data.showName,
      type: 1,
      fromUser: data.userName,
      userId: data.userId,
      senderId: data.senderId
    };
    console.log(socketMsg);

    sendFunc.send(JSON.stringify(socketMsg));
  };
  const leftMembersList = async () => {
    const data: any = {
      username: userName
    };
    await membersList(data).then((res) => {
      console.log(res);
      setMembersLeft(res.data);
      connectWebSocket(userName, userName, res.data, membersLeft, 10);
    });
  };
  const getNowMessageList = async (data: any) => {
    await messageList(data).then((res: any) => {
      if (res.success) {
        console.log('右边信息', res.data);
        setMessageRight(res.data);
      }
    });
  };
  const handleLift = (record: any) => {
    console.log(record);
    const datas: any = {
      socketMsg: {
        type: record.type,
        toUser: record.userName,
        fromUser: record.senderName,
        msg: '',
        senderId: record.senderId,
        userId: record.userId
      }
    };
    setDate(record);
    console.log(datas);

    getNowMessageList(datas);
  };
  useEffect(() => {
    leftMembersList();
  }, []);

  return (
    <div className="info-page">
      <div className="info-left">
        {membersLeft.map((item, index) => {
          return (
            <div className="cardlist" onClick={() => handleLift(item)} key={index}>
              {item.showName}
            </div>
          );
        })}
      </div>
      <div className="info-right">
        <div className="info-right-header"></div>
        <div className="info-right-main">
          {messageRight.map((i, v) => {
            return (
              <div key={v}>
                {i.toName}--{i.fromName}
              </div>
            );
          })}
        </div>
        <div className="info-right-footer">
          <button onClick={sendserver}>发送</button>
        </div>
      </div>
    </div>
  );
}