From 8e2682e7c2f59667a726b6aacb247e80ed6fcbd0 Mon Sep 17 00:00:00 2001 From: sealday Date: Sat, 6 Apr 2024 02:35:31 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E7=9B=AE?= =?UTF-8?q?=E5=BD=95=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/danmu/page.tsx | 2 +- app/layout.tsx | 10 +- app/music/danmu.tsx | 166 +++++++++--------- app/music/page.tsx | 6 +- app/signin/page.tsx | 2 +- app/signup/page.tsx | 2 +- components/back-button.tsx | 21 +++ {app/components => components}/logo.tsx | 0 .../signout-button.tsx | 2 +- {app/lib => lib}/actions/auth.ts | 0 {app/lib => lib}/actions/lyrics.ts | 0 11 files changed, 118 insertions(+), 93 deletions(-) create mode 100644 components/back-button.tsx rename {app/components => components}/logo.tsx (100%) rename {app/components => components}/signout-button.tsx (89%) rename {app/lib => lib}/actions/auth.ts (100%) rename {app/lib => lib}/actions/lyrics.ts (100%) diff --git a/app/danmu/page.tsx b/app/danmu/page.tsx index 0e858d0..b201e02 100644 --- a/app/danmu/page.tsx +++ b/app/danmu/page.tsx @@ -1,7 +1,7 @@ /* eslint-disable no-console -- debug */ "use client"; import { useRef, useState, useEffect } from "react"; -import { query } from "@/app/lib/actions/lyrics"; +import { query } from "@/lib/actions/lyrics"; const useLyricsRunner = (runner: (lyric: string) => void, interval: number) => { const [lyrics, setLyrics] = useState([]); diff --git a/app/layout.tsx b/app/layout.tsx index 8a0904e..3d7a05a 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -3,6 +3,7 @@ import { Inter } from "next/font/google"; import "./globals.css"; import SignoutButton from "./components/signout-button"; import Logo from "./components/logo"; +import BackButton from "./components/back-button"; const inter = Inter({ subsets: ["latin"] }); @@ -42,7 +43,10 @@ export default function RootLayout({ 关于 - +
+ + +
{children}
@@ -56,9 +60,7 @@ export default function RootLayout({ 音乐弹幕 -

- 歌曲歌词到直播间 -

+

歌曲歌词到直播间

diff --git a/app/music/danmu.tsx b/app/music/danmu.tsx index 860e2f2..76502bf 100644 --- a/app/music/danmu.tsx +++ b/app/music/danmu.tsx @@ -1,96 +1,100 @@ -'use client'; +"use client"; import { useState, useEffect, useCallback } from "react"; -import useWebSocket, { ReadyState } from 'react-use-websocket'; +import useWebSocket, { ReadyState } from "react-use-websocket"; -const MOMO_IM_URL = 'wss://live-ws.immomo.com/ws/im' +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[]>([]); + //Public API that will echo messages sent to it back to the client + const [socketUrl, setSocketUrl] = useState(MOMO_IM_URL); + const [messageHistory, setMessageHistory] = useState[]>([]); - // { "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, - } - }); + // { "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 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 - }, + 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 (ReadyState.OPEN === readyState) { - sendMessage(JSON.stringify(data)); + useEffect(() => { + if (lastMessage !== null) { + if (lastMessage.data) { + const message = JSON.parse(lastMessage.data); + if (message.type === "pong") { + return; } - }, [readyState]) + setMessageHistory((prev) => prev.concat(message)); + } + } + }, [lastMessage]); + const connectionStatus = { + [ReadyState.CONNECTING]: "Connecting", + [ReadyState.OPEN]: "Open", + [ReadyState.CLOSING]: "Closing", + [ReadyState.CLOSED]: "Closed", + [ReadyState.UNINSTANTIATED]: "Uninstantiated", + }[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 ( -
- {messageHistory.map((message, idx) => ( - - ))} -
-
You underestimate my power!
-
-
- ); + return ( +
+ {messageHistory.map((message, idx) => ( + + ))} +
+
You underestimate my power!
+
+
+ ); }; -// TODO -const MessageDispatcher: React.FC = ({ message }) => { +const MessageDispatcher: React.FC<{ message: any }> = ({ message }) => { + const messageType = message?.groups?.[0]?.units?.[0]?.type; + let nick = "wait"; + let content = "wait"; - 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 (
-
{nick}: {content}
-
) - -}; \ No newline at end of file + if (messageType === "Message") { + nick = message?.groups?.[0]?.nick; + content = message?.groups?.[0]?.units?.[0]?.["Msg.Message.data"]?.text; + } + return ( +
+
+ {nick}: {content} +
+
+ ); +}; diff --git a/app/music/page.tsx b/app/music/page.tsx index e5eafd3..c957c1f 100644 --- a/app/music/page.tsx +++ b/app/music/page.tsx @@ -1,7 +1,5 @@ import { Danmu } from "./danmu"; export default function Page() { - return
hello world - -
-} \ No newline at end of file + return ; +} diff --git a/app/signin/page.tsx b/app/signin/page.tsx index db07bed..7d1cbf1 100644 --- a/app/signin/page.tsx +++ b/app/signin/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { signin } from "@/app/lib/actions/auth"; +import { signin } from "@/lib/actions/auth"; import Image from "next/image"; import Link from "next/link"; import { useFormState, useFormStatus } from "react-dom"; diff --git a/app/signup/page.tsx b/app/signup/page.tsx index 6594042..c42ad54 100644 --- a/app/signup/page.tsx +++ b/app/signup/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { signup } from "@/app/lib/actions/auth"; +import { signup } from "@/lib/actions/auth"; import Link from "next/link"; import { useFormState, useFormStatus } from "react-dom"; import signupSvg from "@/app/signup/signup.svg"; diff --git a/components/back-button.tsx b/components/back-button.tsx new file mode 100644 index 0000000..082965a --- /dev/null +++ b/components/back-button.tsx @@ -0,0 +1,21 @@ +"use client"; + +import { useRouter } from "next/navigation"; + +export default function BackButton({ + className, +}: { + className?: string | undefined; +}) { + const router = useRouter(); + return ( + + ); +} diff --git a/app/components/logo.tsx b/components/logo.tsx similarity index 100% rename from app/components/logo.tsx rename to components/logo.tsx diff --git a/app/components/signout-button.tsx b/components/signout-button.tsx similarity index 89% rename from app/components/signout-button.tsx rename to components/signout-button.tsx index 7c9f506..b0991cf 100644 --- a/app/components/signout-button.tsx +++ b/components/signout-button.tsx @@ -1,5 +1,5 @@ "use client"; -import { signout } from "@/app/lib/actions/auth"; +import { signout } from "@/lib/actions/auth"; import { usePathname } from "next/navigation"; export default function SignoutButton({ diff --git a/app/lib/actions/auth.ts b/lib/actions/auth.ts similarity index 100% rename from app/lib/actions/auth.ts rename to lib/actions/auth.ts diff --git a/app/lib/actions/lyrics.ts b/lib/actions/lyrics.ts similarity index 100% rename from app/lib/actions/lyrics.ts rename to lib/actions/lyrics.ts