feat: 完成

app/danmu/controls.tsx

@@ -71,7 +71,7 @@ interface LyricItem {
 export default function Controls(): JSX.Element {
   const ref = useRef<HTMLDialogElement | null>(null);
   const [history, setHistory] = useState<LyricItem[]>([]);
-  const { songId, songName, songArtist } = useContext(DanmuContext);
+  const { songId, songName, songArtist, listener } = useContext(DanmuContext);
 
   const { start, resume, pause, setLyrics, offset, setOffset } =
     useLyricsRunner((line) => {
@@ -82,6 +82,12 @@ export default function Controls(): JSX.Element {
         },
         ...items,
       ]);
+      if (listener) {
+        // 测试用
+        // listener('666');
+        // 实际输出歌词
+        listener(line.slice(0, 10));
+      }
       console.log(line);
     }, 200);
 

app/danmu/danmu.tsx

@@ -1,15 +1,34 @@
 "use client";
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, useContext } from "react";
 import useWebSocket, { ReadyState } from "react-use-websocket";
 import MessageDispatcher from "./message";
 import { Token } from "@/lib/types";
 import dayjs from "dayjs";
+import { DanmuContext } from "./provider";
 
 const MOMO_IM_URL = "wss://live-ws.immomo.com/ws/im";
 
+const useGenMessage = () => {
+  const [msgId, setMsgId] = useState(3);
+  return {
+    genMessage(text: string) {
+      const msg = {
+        msg_id: msgId,
+        client_time: Date.now(),
+        type: "Bili",
+        data: { text },
+      };
+      setMsgId(msgId + 1);
+      return msg;
+    },
+  };
+};
+
 export default function Danmu({ token }: { token: Token }) {
   const [messageHistory, setMessageHistory] = useState<MessageEvent<any>[]>([]);
   const ref = useRef<HTMLDivElement>(null);
+  const { liveId, dispatch } = useContext(DanmuContext);
+  const { genMessage } = useGenMessage();
 
   const { sendMessage, lastMessage, readyState } = useWebSocket(MOMO_IM_URL, {
     heartbeat: {
@@ -27,28 +46,40 @@ export default function Danmu({ token }: { token: Token }) {
   });
 
   const momoId = token.uid;
-  const roomId = "1476810196216";
+  const roomId = liveId;
   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));
+      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,
+        },
+      };
+      if (roomId) {
+        sendMessage(JSON.stringify(data));
+        console.log("重新连接...");
+        setMessageHistory([]);
+        dispatch({
+          type: "listener",
+          payload: {
+            listener: (msg: string) => {
+              const data = genMessage(msg);
+              sendMessage(JSON.stringify(data));
+            },
+          },
+        });
+      }
     }
-  }, [readyState]);
+  }, [readyState, roomId, momoId, momoToken]);
 
   useEffect(() => {
     if (lastMessage !== null) {

app/danmu/provider.tsx

@@ -7,6 +7,7 @@ export interface DanmuPayload {
   songId?: string;
   songName?: string;
   songArtist?: string;
+  listener?: (msg: string) => void;
 }
 
 export interface DanmuAction {
@@ -30,6 +31,8 @@ const reducer = (state: DanmuPayload, action: DanmuAction): DanmuPayload => {
       };
     case "lives":
       return { ...state, liveId: payload.liveId, liveName: payload.liveName };
+    case "listener":
+      return { ...state, listener: payload.listener };
     default:
       throw new Error("not support action");
   }