feat: 支持切换房间

app/danmu/danmu.tsx

@@ -1,15 +1,17 @@
 "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";
 
 export default function Danmu({ token }: { token: Token }) {
   const [messageHistory, setMessageHistory] = useState<MessageEvent<any>[]>([]);
   const ref = useRef<HTMLDivElement>(null);
+  const { liveId, liveName } = useContext(DanmuContext);
 
   const { sendMessage, lastMessage, readyState } = useWebSocket(MOMO_IM_URL, {
     heartbeat: {
@@ -27,28 +29,31 @@ 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([]);
+      }
     }
-  }, [readyState]);
+  }, [readyState, roomId, momoId, momoToken]);
 
   useEffect(() => {
     if (lastMessage !== null) {