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";

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

export const Danmu: React.FC<{ 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 message = JSON.parse(lastMessage.data);
        if (message.type === "pong") {
          return;
        }
        console.log(message);
        setMessageHistory((prev) => prev.concat(message));
        if (ref.current) {
          setTimeout(() => {
            ref.current.scrollTop = ref.current.scrollHeight;
          }, 0);
        }
      }
    }
  }, [lastMessage]);

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