Ilgeldi
/
turkmentv_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

websocket message types changed

This commit is contained in:
Kakabay 2025-01-25 18:40:18 +05:00
parent 00332b4648
commit 376ffa651a
4 changed files with 72 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/lottery/LotteryWinnersSection.tsx
View File

@ -3,8 +3,6 @@ import { useLotteryAuth } from "@/store/useLotteryAuth";
import { LotteryWinnerDataSimplified } from "@/typings/lottery/lottery.types"; import { LotteryWinnerDataSimplified } from "@/typings/lottery/lottery.types";
import LotteryWinnersList from "./winners/LotteryWinnersList"; import LotteryWinnersList from "./winners/LotteryWinnersList";
import LotterySlotCounter from "./slotCounter/LotterySlotCounter"; import LotterySlotCounter from "./slotCounter/LotterySlotCounter";
import ReactConfetti from "react-confetti";
import { useWindowSize } from "react-use";
import AnimatedText from "@/components/common/AnimatedText"; import AnimatedText from "@/components/common/AnimatedText";
import { useWebsocketLottery } from "@/hooks/useWebSocketLottery"; import { useWebsocketLottery } from "@/hooks/useWebSocketLottery";
import Confetti from "../common/Confetti"; import Confetti from "../common/Confetti";
@ -40,11 +38,11 @@ const LotteryWinnersSection = ({
`${WEBSOCKET_URL}${lotteryData?.data.sms_number}` `${WEBSOCKET_URL}${lotteryData?.data.sms_number}`
); );
// Simulate WebSocket messages for testing // Simulate WebSocket message for testing
const simulateMessage = () => { const simulateMessage = () => {
const dummyWinner: LotteryWinnerDataSimplified = { const dummyWinner: LotteryWinnerDataSimplified = {
client: `9936${Math.floor(10000000 + Math.random() * 90000000)}`, phone: `9936${Math.floor(10000000 + Math.random() * 90000000)}`, // Generate random client number
winner_no: winners.length + 1, winner_no: winners.length + 1, // Increment winner number
ticket: `${Math.floor(Math.random() * 99) ticket: `${Math.floor(Math.random() * 99)
.toString() .toString()
.padStart(2, "0")}-${Math.floor(Math.random() * 99) .padStart(2, "0")}-${Math.floor(Math.random() * 99)
@ -55,17 +53,28 @@ const LotteryWinnersSection = ({
.toString() .toString()
.padStart(2, "0")}-${Math.floor(Math.random() * 99) .padStart(2, "0")}-${Math.floor(Math.random() * 99)
.toString() .toString()
.padStart(2, "0")}`, .padStart(2, "0")}`, // Generate random ticket
}; };
console.log("📩 Simulated Message:", dummyWinner); // Log the simulated message
setMessageQueue((prevQueue) => [...prevQueue, dummyWinner]); setMessageQueue((prevQueue) => [...prevQueue, dummyWinner]);
}; };
// useEffect(() => {
// const interval = setInterval(() => {
// simulateMessage();
// }, 20000); // Trigger every 10 seconds
// return () => clearInterval(interval); // Clean up interval on unmount
// }, []);
// Initialize winners from lottery data // Initialize winners from lottery data
useEffect(() => { useEffect(() => {
console.log("🎟️ Lottery Data:", lotteryData);
if (lotteryData && lotteryData.data.winners.length > 0) { if (lotteryData && lotteryData.data.winners.length > 0) {
const simplifiedWinners = lotteryData.data.winners.map((winner) => ({ const simplifiedWinners = lotteryData.data.winners.map((winner) => ({
client: winner.client, phone: winner.client,
winner_no: winner.winner_no, winner_no: winner.winner_no,
ticket: winner.ticket, ticket: winner.ticket,
})); }));
@ -74,7 +83,7 @@ const LotteryWinnersSection = ({
const lastWinner = simplifiedWinners[simplifiedWinners.length - 1]; const lastWinner = simplifiedWinners[simplifiedWinners.length - 1];
setWinnerSelectingStatus("selected"); setWinnerSelectingStatus("selected");
setTopText(`${lastWinner.winner_no}-nji ýeňiji`); setTopText(`${lastWinner.winner_no}-nji ýeňiji`);
setBottomText(lastWinner.client); setBottomText(lastWinner.phone);
setIsConfettiActive(true); setIsConfettiActive(true);
} }
}, [lotteryData]); }, [lotteryData]);
@ -84,9 +93,13 @@ const LotteryWinnersSection = ({
const unsubscribe = subscribeToMessages((event) => { const unsubscribe = subscribeToMessages((event) => {
try { try {
const newWinner: LotteryWinnerDataSimplified = JSON.parse(event.data); const newWinner: LotteryWinnerDataSimplified = JSON.parse(event.data);
console.log("📩 WebSocket Message Received:", newWinner); // Log the parsed message
// Add new message to the queue // Add new message to the queue
setMessageQueue((prevQueue) => [...prevQueue, newWinner]); setMessageQueue((prevQueue) => {
console.log("📥 Adding to Queue:", newWinner);
return [...prevQueue, newWinner];
});
} catch (error) { } catch (error) {
console.error("Error parsing WebSocket message:", error); console.error("Error parsing WebSocket message:", error);
} }
@ -97,6 +110,8 @@ const LotteryWinnersSection = ({
// Process queue when a new message is added // Process queue when a new message is added
useEffect(() => { useEffect(() => {
console.log("📋 Current Message Queue:", messageQueue);
if (!isProcessing && messageQueue.length > 0) { if (!isProcessing && messageQueue.length > 0) {
processQueue(); processQueue();
} }
@ -109,6 +124,8 @@ const LotteryWinnersSection = ({
setIsProcessing(true); // Lock processing setIsProcessing(true); // Lock processing
const message = messageQueue[0]; // Get the first message in the queue const message = messageQueue[0]; // Get the first message in the queue
console.log("⚙️ Processing Message:", message); // Debug Log 4: Log the message being processed
try { try {
await handleMessage(message); // Process the message await handleMessage(message); // Process the message
} catch (error) { } catch (error) {
@ -121,6 +138,7 @@ const LotteryWinnersSection = ({
// Handle the logic for processing a single WebSocket message // Handle the logic for processing a single WebSocket message
const handleMessage = async (winner: LotteryWinnerDataSimplified) => { const handleMessage = async (winner: LotteryWinnerDataSimplified) => {
console.log("⬇️ Updating Top and Bottom Text:", winner); // Debug Log 5: Log winner data before setting states
setIsConfettiActive(false); setIsConfettiActive(false);
setTopText(`${winner.winner_no}-nji ýeňiji saýlanýar`); setTopText(`${winner.winner_no}-nji ýeňiji saýlanýar`);
setBottomText("..."); setBottomText("...");
@ -133,7 +151,9 @@ const LotteryWinnersSection = ({
// Finalize winner selection // Finalize winner selection
setTopText(`${winner.winner_no}-nji ýeňiji`); setTopText(`${winner.winner_no}-nji ýeňiji`);
setBottomText(winner.client); setBottomText(winner.phone);
console.log("⬇️ Finalized Bottom Text:", winner.phone); // Debug Log 6: Log the final bottomText update
setWinnerSelectingStatus("selected"); setWinnerSelectingStatus("selected");
setIsConfettiActive(true); setIsConfettiActive(true);

22
components/lottery/winners/LotteryWinnersList.tsx
View File

@ -1,9 +1,16 @@
import { LotteryWinnerData, LotteryWinnerDataSimplified } from '@/typings/lottery/lottery.types'; import {
import LotteryWinner from './LotteryWinner'; LotteryWinnerData,
import { motion, AnimatePresence } from 'framer-motion'; LotteryWinnerDataSimplified,
import { v4 } from 'uuid'; } from "@/typings/lottery/lottery.types";
import LotteryWinner from "./LotteryWinner";
import { motion, AnimatePresence } from "framer-motion";
import { v4 } from "uuid";
const LotteryWinnersList = ({ winners }: { winners: LotteryWinnerDataSimplified[] }) => { const LotteryWinnersList = ({
winners,
}: {
winners: LotteryWinnerDataSimplified[];
}) => {
return ( return (
<div className="flex flex-col gap-4 w-full max-w-[1028px]"> <div className="flex flex-col gap-4 w-full max-w-[1028px]">
<div className="flex flex-col gap-2 w-full pb-4 border-b border-[#CECCFF]"> <div className="flex flex-col gap-2 w-full pb-4 border-b border-[#CECCFF]">
@ -11,11 +18,12 @@ const LotteryWinnersList = ({ winners }: { winners: LotteryWinnerDataSimplified[
</div> </div>
<motion.div <motion.div
layout layout
className="grid min-[1025px]:grid-cols-3 min-[700px]:grid-cols-2 grid-cols-1 gap-x-2 gap-y-4 w-full lottery-winner-list"> className="grid min-[1025px]:grid-cols-3 min-[700px]:grid-cols-2 grid-cols-1 gap-x-2 gap-y-4 w-full lottery-winner-list"
>
{winners.map((item, index) => ( {winners.map((item, index) => (
<LotteryWinner <LotteryWinner
key={v4()} key={v4()}
phone={item.client} phone={item.phone}
ticket={item.ticket} ticket={item.ticket}
winnerNumber={item.winner_no} winnerNumber={item.winner_no}
isNew={index === winners.length - 1} isNew={index === winners.length - 1}

33
hooks/useWebSocketLottery.ts
View File

@ -1,4 +1,4 @@
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef, useCallback } from "react";
export const useWebsocketLottery = (url: string) => { export const useWebsocketLottery = (url: string) => {
const [wsStatus, setWsStatus] = useState< const [wsStatus, setWsStatus] = useState<
@ -14,15 +14,15 @@ export const useWebsocketLottery = (url: string) => {
const setupWebSocket = () => { const setupWebSocket = () => {
if (!isMounted) return; if (!isMounted) return;
console.log("🔄 Connecting to WebSocket..."); console.log("🔄 [WebSocket] Connecting...");
const socket = new WebSocket(url); const socket = new WebSocket(url);
wsRef.current = socket; wsRef.current = socket;
socket.onopen = () => { socket.onopen = () => {
if (!isMounted) return; if (!isMounted) return;
console.log("✅ WebSocket connected"); console.log("✅ [WebSocket] Connected");
console.log("WebSocket url", url); console.log("🔗 [WebSocket URL]:", url);
setWsStatus("connected"); setWsStatus("connected");
if (reconnectTimeoutRef.current) if (reconnectTimeoutRef.current)
clearTimeout(reconnectTimeoutRef.current); clearTimeout(reconnectTimeoutRef.current);
@ -31,21 +31,21 @@ export const useWebsocketLottery = (url: string) => {
socket.onmessage = (event) => { socket.onmessage = (event) => {
if (!isMounted) return; if (!isMounted) return;
console.log("📩 Message received:", event.data); console.log("📩 [WebSocket] Message received:", event.data);
messageListeners.current.forEach((listener) => listener(event)); messageListeners.current.forEach((listener) => listener(event));
}; };
socket.onerror = () => { socket.onerror = () => {
if (!isMounted) return; if (!isMounted) return;
console.error("❌ WebSocket error"); console.error("❌ [WebSocket] Error occurred");
setWsStatus("error"); setWsStatus("error");
}; };
socket.onclose = () => { socket.onclose = () => {
if (!isMounted) return; if (!isMounted) return;
console.log("❌ WebSocket closed"); console.log("❌ [WebSocket] Closed");
setWsStatus("closed"); setWsStatus("closed");
reconnectWebSocket(); reconnectWebSocket();
}; };
@ -54,7 +54,7 @@ export const useWebsocketLottery = (url: string) => {
const reconnectWebSocket = () => { const reconnectWebSocket = () => {
if (!isMounted) return; if (!isMounted) return;
console.log("🔄 Reconnecting to WebSocket..."); console.log("🔄 [WebSocket] Reconnecting in 5 seconds...");
reconnectTimeoutRef.current = setTimeout(() => { reconnectTimeoutRef.current = setTimeout(() => {
setupWebSocket(); setupWebSocket();
}, 5000); }, 5000);
@ -63,7 +63,7 @@ export const useWebsocketLottery = (url: string) => {
setupWebSocket(); setupWebSocket();
return () => { return () => {
console.log("🔌 Cleaning up WebSocket connection..."); console.log("🔌 [WebSocket] Cleaning up...");
isMounted = false; isMounted = false;
if (wsRef.current) { if (wsRef.current) {
@ -77,21 +77,26 @@ export const useWebsocketLottery = (url: string) => {
}; };
}, [url]); }, [url]);
const sendPing = () => { const sendPing = useCallback(() => {
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) { if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
console.log("📤 Sending ping"); console.log("📤 [WebSocket] Sending ping");
wsRef.current.send(JSON.stringify({ type: "ping" })); wsRef.current.send(JSON.stringify({ type: "ping" }));
} }
}; }, []);
const subscribeToMessages = (listener: (event: MessageEvent) => void) => { const subscribeToMessages = useCallback(
(listener: (event: MessageEvent) => void) => {
console.log("👂 [WebSocket] Subscribing to messages");
messageListeners.current.push(listener); messageListeners.current.push(listener);
return () => { return () => {
console.log("❌ [WebSocket] Unsubscribing from messages");
messageListeners.current = messageListeners.current.filter( messageListeners.current = messageListeners.current.filter(
(l) => l !== listener (l) => l !== listener
); );
}; };
}; },
[] // Empty array ensures it's memoized
);
return { wsStatus, sendPing, subscribeToMessages }; return { wsStatus, sendPing, subscribeToMessages };
}; };

4
typings/lottery/lottery.types.ts
View File

@ -23,9 +23,9 @@ export interface LotteryResponse {
} }
export interface LotteryWinnerDataSimplified { export interface LotteryWinnerDataSimplified {
client: string; phone: string;
winner_no: number; winner_no: number;
ticket: string; ticket: string;
} }
export type LotteryStatus = 'not-started' | 'started' | 'ended'; export type LotteryStatus = "not-started" | "started" | "ended";