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,9 +29,11 @@ export default function Danmu({ token }: { token: Token }) {
   });
 
   const momoId = token.uid;
-  const roomId = "1476810196216";
+  const roomId = liveId;
   const momoToken = token.token;
 
+  useEffect(() => {
+    if (ReadyState.OPEN === readyState) {
       const clientTime = Date.now();
       const data = {
         msg_id: 1,
@@ -43,12 +47,13 @@ export default function Danmu({ token }: { token: Token }) {
           token: momoToken,
         },
       };
-
-  useEffect(() => {
-    if (ReadyState.OPEN === readyState) {
+      if (roomId) {
         sendMessage(JSON.stringify(data));
+        console.log('重新连接...');
+        setMessageHistory([]);
       }
-  }, [readyState]);
+    }
+  }, [readyState, roomId, momoId, momoToken]);
 
   useEffect(() => {
     if (lastMessage !== null) {