From 72876dfceb4b79d3eb7c10b85b94ab9e638e9410 Mon Sep 17 00:00:00 2001 From: armorse Date: Mon, 4 Nov 2024 16:54:33 +0800 Subject: [PATCH] Add autoscroll function --- src/App2.js | 204 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 204 insertions(+) create mode 100644 src/App2.js diff --git a/src/App2.js b/src/App2.js new file mode 100644 index 0000000..5a06184 --- /dev/null +++ b/src/App2.js @@ -0,0 +1,204 @@ +import React, { useState, useEffect } from "react"; +import { Button, Input, List, Avatar, Card } from "antd"; +import "antd/dist/reset.css"; +import "./App.css"; +import io from "socket.io-client"; + +const socket = io("http://34.69.85.229:3001", { + transports: ["websocket"], +}); + +function App() { + const [messages, setMessages] = useState([]); + const [gifts, setGifts] = useState([]); + const [loading, setLoading] = useState(false); + const [username, setUsername] = useState(""); + const [connected, setConnected] = useState(false); + const [showDisconnect, setShowDisconnect] = useState(false); + const [timer, setTimer] = useState(0); + const [intervalId, setIntervalId] = useState(null); + const [totalGiftValue, setTotalGiftValue] = useState(0); + + useEffect(() => { + socket.on("connect", () => { + console.log("Socket.IO connected:", socket.id); + }); + + socket.on("disconnect", () => { + console.log("Socket.IO disconnected"); + }); + + socket.on("chatMessage", (message) => { + const newMessage = { type: "chat", ...message }; + console.log("Chat message received:", message); + setMessages((prevMessages) => [newMessage, ...prevMessages]); + setLoading(false); + setConnected(true); + }); + + socket.on("likeMessage", (likeData) => { + const newLike = { type: "like", ...likeData }; + console.log("Like message received:", likeData); + setMessages((prevMessages) => [newLike, ...prevMessages]); + setLoading(false); + setConnected(true); + }); + + socket.on("giftMessage", (giftData) => { + console.log("gift message received:", giftData); + setGifts((prevGifts) => [giftData, ...prevGifts]); + setTotalGiftValue((prevValue) => prevValue + (giftData.giftValue || 0)); + setLoading(false); + setConnected(true); + }); + + return () => { + socket.off("chatMessage"); + socket.off("likeMessage"); + socket.off("giftMessage"); + }; + }, []); + + const handleConnect = () => { + if (username.trim() && !connected) { + console.log("Connecting to TikTok with username:", username); + setLoading(true); + socket.emit("connectToTikTok", username); + setShowDisconnect(true); + + const id = setInterval(() => { + setTimer((prev) => prev + 1); + }, 1000); + setIntervalId(id); + } + }; + + const handleDisconnect = () => { + socket.emit("disconnectTikTok"); + setConnected(false); + setMessages([]); + setGifts([]); + setShowDisconnect(false); + setLoading(false); + clearInterval(intervalId); + setIntervalId(null); + setTimer(0); + setTotalGiftValue(0); + }; + + const formatTime = (seconds) => { + const hours = Math.floor(seconds / 3600) + .toString() + .padStart(2, "0"); + const mins = Math.floor((seconds % 3600) / 60) + .toString() + .padStart(2, "0"); + const secs = (seconds % 60).toString().padStart(2, "0"); + return `${hours}:${mins}:${secs}`; + }; + + return ( +
+

+ Tiktok Live Explorer +

+
+ setUsername(e.target.value)} + style={{ + width: "300px", + marginRight: "10px", + display: "inline-block", + }} + disabled={connected || loading} + /> + + {showDisconnect && ( + + )} +
+
+ {connected && ( +
+ + Connected Time: {formatTime(timer)} + +
+ )} + {connected && ( +
+ + Gift Total Value: {totalGiftValue.toFixed(2)} + +
+ )} +
+
+ + ( + +
+
{item.time}
+ +
+ {item.username} + {item.type === "chat" ? ( +

{item.comment}

+ ) : ( +

+ Sent {item.likeCount} likes (Total: {item.totalLikes}) +

+ )} +
+
+ + )} + /> + + + + ( + +
+
{item.time}
+ +
+ {item.username} +

{item.giftName}

+

({item.giftId})

+

({item.giftValue})

+ +
+
+ + )} + /> + +
+
+ ); +} + +export default App;