danmu-sim/app/music/danmu.tsx

"use client";
import { useState, useEffect, useCallback } from "react";
import useWebSocket, { ReadyState } from "react-use-websocket";

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

export const Danmu: React.FC = () => {
  //Public API that will echo messages sent to it back to the client
  const [socketUrl, setSocketUrl] = useState(MOMO_IM_URL);
  const [messageHistory, setMessageHistory] = useState<MessageEvent<any>[]>([]);

  // { "msg_id": 1, "client_time": 1712305590234, "type": "Sauth", "data": { "momoid": "404821828", "roomid": "14515460054", "role": 6, "isVisitor": false, "token": "97e721d0bd3bf2e63a9797f9daf50919", "ua": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36" } }
  const { sendMessage, lastMessage, readyState } = useWebSocket(socketUrl, {
    heartbeat: {
      message: () => {
        const pingMessage = {
          msg_id: 2,
          client_time: Date.now(),
          type: "Ping",
          data: {},
        };
        return JSON.stringify(pingMessage);
      },
      interval: 5000,
    },
  });

  const momoId = "404821828";
  const roomId = "14515460054";
  const momoToken = "97e721d0bd3bf2e63a9797f9daf50919";

  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;
        }
        setMessageHistory((prev) => prev.concat(message));
      }
    }
  }, [lastMessage]);

  const connectionStatus = {
    [ReadyState.CONNECTING]: "Connecting",
    [ReadyState.OPEN]: "Open",
    [ReadyState.CLOSING]: "Closing",
    [ReadyState.CLOSED]: "Closed",
    [ReadyState.UNINSTANTIATED]: "Uninstantiated",
  }[readyState];

  return (
    <div>
      {messageHistory.map((message, idx) => (
        <MessageDispatcher key={idx} message={message} />
      ))}
      <div className="chat chat-end">
        <div className="chat-bubble">You underestimate my power!</div>
      </div>
    </div>
  );
};

const MessageDispatcher: React.FC<{ message: any }> = ({ message }) => {
  const messageType = message?.groups?.[0]?.units?.[0]?.type;
  let nick = "wait";
  let content = "wait";

  if (messageType === "Message") {
    nick = message?.groups?.[0]?.nick;
    content = message?.groups?.[0]?.units?.[0]?.["Msg.Message.data"]?.text;
  }
  return (
    <div className="chat chat-start">
      <div className="chat-bubble">
        {nick}: {content}
      </div>
    </div>
  );
};