danmu-sim/app/danmu/danmu.tsx

"use client";
import { useState, useEffect, useCallback, useRef } from "react";
import useWebSocket, { ReadyState } from "react-use-websocket";
import MessageDispatcher from "./message";
import { Token } from "@/lib/types";
import dayjs from "dayjs";

const MOMO_IM_URL = "wss://live-ws.immomo.com/ws/im";

export default function Danmu({ token }: { token: Token }) {
  const [messageHistory, setMessageHistory] = useState<MessageEvent<any>[]>([]);
  const ref = useRef<HTMLDivElement>(null);

  const { sendMessage, lastMessage, readyState } = useWebSocket(MOMO_IM_URL, {
    heartbeat: {
      message: () => {
        const pingMessage = {
          msg_id: 2,
          client_time: Date.now(),
          type: "Ping",
          data: {},
        };
        return JSON.stringify(pingMessage);
      },
      interval: 5000,
    },
  });

  const momoId = token.uid;
  const roomId = "1476810196216";
  const momoToken = token.token;

  const clientTime = Date.now();
  const data = {
    msg_id: 1,
    client_time: clientTime,
    type: "Sauth",
    data: {
      momoid: momoId,
      roomid: roomId,
      role: 6,
      isVisitor: false,
      token: momoToken,
    },
  };

  useEffect(() => {
    if (ReadyState.OPEN === readyState) {
      sendMessage(JSON.stringify(data));
    }
  }, [readyState]);

  useEffect(() => {
    if (lastMessage !== null) {
      if (lastMessage.data) {
        const current = dayjs().format("HH:mm:ss");
        const message = JSON.parse(lastMessage.data);
        if (message.type === "pong") {
          return;
        }
        if (message.type === "group") {
          message.groups.forEach((group: any) => {
            group.current = current;
            setMessageHistory((prev) => prev.concat(group));
            setTimeout(() => {
              if (ref.current) {
                ref.current.scrollTop = ref.current.scrollHeight;
              }
            }, 0);
          });
        } else {
          message.current = current;
          setMessageHistory((prev) => prev.concat(message));
          setTimeout(() => {
            if (ref.current) {
              ref.current.scrollTop = ref.current.scrollHeight;
            }
          }, 0);
        }
      }
    }
  }, [lastMessage]);

  return (
    <div className="h-[60vh] md:h-[40vh] overflow-auto" ref={ref}>
      {messageHistory.map((message, idx) => (
        <MessageDispatcher key={idx} message={message} />
      ))}
    </div>
  );
}