From d723fc6cda619fa6512e1d0f7f412dd15559a6a3 Mon Sep 17 00:00:00 2001
From: sealday <sealday@gmail.com>
Date: Sun, 7 Apr 2024 02:02:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/danmu/danmu.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/danmu/danmu.tsx b/app/danmu/danmu.tsx
index ce692d5..8eed021 100644
--- a/app/danmu/danmu.tsx
+++ b/app/danmu/danmu.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import useWebSocket, { ReadyState } from "react-use-websocket";
 import MessageDispatcher from "./message";
 import { Token } from "@/lib/types";
@@ -8,6 +8,7 @@ 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: {
@@ -57,12 +58,17 @@ export const Danmu: React.FC<{ token: Token }> = ({ token }) => {
         }
         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">
+    <div className="h-[50vh] overflow-auto" ref={ref}>
       {messageHistory.map((message, idx) => (
         <MessageDispatcher key={idx} message={message} />
       ))}