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

websocket hook created

This commit is contained in:
Kakabay 2025-01-05 23:32:06 +05:00
parent 2222275fc0
commit fb6ad9761f
3 changed files with 167 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
components/lottery/LotteryWinnersSection.tsx
View File

@ -1,46 +1,41 @@
'use client';
import { useState, useEffect, useRef } from "react";
import { useLotteryAuth } from "@/store/useLotteryAuth";
import { LotteryWinnerDataSimplified } from "@/typings/lottery/lottery.types";
import LotteryWinnersList from "./winners/LotteryWinnersList";
import LotterySlotCounter from "./slotCounter/LotterySlotCounter";
import ReactConfetti from "react-confetti";
import { useWindowSize } from "react-use";
import AnimatedText from "@/components/common/AnimatedText";
import { useWebsocketLottery } from "@/hooks/useWebSocketLottery";
import { useState, useEffect, useRef } from 'react';
import { useLotteryAuth } from '@/store/useLotteryAuth';
import { LotteryWinnerDataSimplified } from '@/typings/lottery/lottery.types';
import LotteryWinnersList from './winners/LotteryWinnersList';
import LotterySlotCounter from './slotCounter/LotterySlotCounter';
import ReactConfetti from 'react-confetti';
import { useWindowSize } from 'react-use';
import LotteryCountDownAllert from './countDown/countDownAllert/LotteryCountDownAllert';
import { AnimatePresence, motion } from 'framer-motion';
import AnimatedText from '@/components/common/AnimatedText';
const WEBSOCKET_URL = 'wss://sms.turkmentv.gov.tm/ws/lottery?dst=0506';
const PING_INTERVAL = 25000;
const WEBSOCKET_URL = "wss://sms.turkmentv.gov.tm/ws/lottery?dst=0506";
const SLOT_COUNTER_DURATION = 20000;
const RECONNECT_INTERVAL = 5000;
const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) => {
const LotteryWinnersSection = ({
lotteryStatus,
}: {
lotteryStatus: string;
}) => {
// UI States
const [winners, setWinners] = useState<LotteryWinnerDataSimplified[]>([]);
const [currentNumber, setCurrentNumber] = useState<string>('00-00-00-00-00');
const [currentNumber, setCurrentNumber] = useState<string>();
const [isConfettiActive, setIsConfettiActive] = useState(false);
const [wsStatus, setWsStatus] = useState<'connecting' | 'connected' | 'error'>('connecting');
const { width, height } = useWindowSize();
const { lotteryData } = useLotteryAuth();
const [isSlotCounterAnimating, setIsSlotCounterAnimating] = useState(false);
const [winnerSelectingStatus, setWinnerSelectingStatus] = useState<
'not-selected' | 'is-selecting' | 'selected'
>('not-selected');
const [pendingWinner, setPendingWinner] = useState<LotteryWinnerDataSimplified | null>(null);
// Add new state for display text
const [displayText, setDisplayText] = useState<string>('...');
const [winnerText, setWinnerText] = useState<string>('');
"not-selected" | "is-selecting" | "selected"
>("not-selected");
const [pendingWinner, setPendingWinner] =
useState<LotteryWinnerDataSimplified | null>(null);
const [displayText, setDisplayText] = useState<string>("...");
const [winnerText, setWinnerText] = useState<string>("");
// WebSocket Hook
const { wsStatus } = useWebsocketLottery(WEBSOCKET_URL);
const wsRef = useRef<WebSocket | null>(null);
const pingIntervalRef = useRef<NodeJS.Timeout | null>(null);
const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const mountedRef = useRef(false);
let reconnectAttempts: number;
// Initialize winners from lottery data
useEffect(() => {
if (lotteryData?.data.winners) {
const simplifiedWinners = lotteryData.data.winners.map((winner) => ({
@ -49,94 +44,31 @@ const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) =>
ticket: winner.ticket,
}));
setWinners(simplifiedWinners);
setCurrentNumber(lotteryData.data.winners.at(-1)?.ticket || '00-00-00-00-00');
setCurrentNumber(
lotteryData.data.winners.at(-1)?.ticket || "00-00-00-00-00"
);
}
}, [lotteryData]);
useEffect(() => {
mountedRef.current = true;
const handleWebSocketMessage = async (event: MessageEvent) => {
if (!event?.data) return;
const setupWebSocket = () => {
if (wsRef.current) return;
console.log("📩 Message received:", event.data);
try {
const socket = new WebSocket(WEBSOCKET_URL);
wsRef.current = socket;
socket.addEventListener('open', () => {
console.log('✅ WebSocket Connected');
setWsStatus('connected');
reconnectAttempts = 0; // Reset reconnect attempts
});
socket.addEventListener('message', handleWebSocketMessage);
socket.addEventListener('error', (error) => {
console.error('❌ WebSocket Error:', error);
setWsStatus('error');
});
socket.addEventListener('close', (event) => {
console.log('❌ WebSocket Closed:', event);
console.log(`Code: ${event.code}, Reason: ${event.reason}`);
setWsStatus('error');
// Only reconnect if closure is abnormal
if (event.code !== 1000) {
reconnectWebSocket();
}
});
} catch (error) {
console.error('❌ Error creating WebSocket:', error);
setWsStatus('error');
reconnectWebSocket();
}
};
const reconnectWebSocket = () => {
if (!mountedRef.current) return;
const delay = Math.min(1000 * 2 ** reconnectAttempts, 30000); // Exponential backoff
reconnectAttempts += 1;
console.log(`Reconnecting in ${delay / 1000} seconds...`);
reconnectTimeoutRef.current = setTimeout(() => {
setupWebSocket();
}, delay);
};
setupWebSocket();
return () => {
mountedRef.current = false;
if (pingIntervalRef.current) {
clearInterval(pingIntervalRef.current);
}
if (reconnectTimeoutRef.current) {
clearTimeout(reconnectTimeoutRef.current);
}
if (wsRef.current) {
wsRef.current.close();
wsRef.current = null;
}
};
}, []);
// WebSocket Message Handler
const handleWebSocketMessage = async (event: MessageEvent) => {
if (!mountedRef.current) return;
try {
const newWinner = JSON.parse(event.data);
if (!newWinner || !newWinner.phone || !newWinner.winner_no || !newWinner.ticket) {
throw new Error('Invalid data format received');
if (
!newWinner ||
!newWinner.phone ||
!newWinner.winner_no ||
!newWinner.ticket
) {
console.error("❌ Invalid data format received");
return;
}
console.log("🎉 New winner selected:", newWinner);
const winnerData = {
client: newWinner.phone,
winner_no: newWinner.winner_no,
@ -144,39 +76,72 @@ const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) =>
};
setDisplayText(`${winnerData.winner_no}-nji ýeňiji saýlanýar`);
setWinnerSelectingStatus('is-selecting');
setWinnerSelectingStatus("is-selecting");
setPendingWinner(winnerData);
setCurrentNumber(winnerData.ticket);
await new Promise((resolve) => setTimeout(resolve, SLOT_COUNTER_DURATION));
await new Promise((resolve) =>
setTimeout(resolve, SLOT_COUNTER_DURATION)
);
setDisplayText('The winner is');
setDisplayText("The winner is");
setWinnerText(winnerData.client);
setWinnerSelectingStatus('selected');
setWinnerSelectingStatus("selected");
setIsConfettiActive(true);
setWinners((prev) => [...prev, winnerData]);
setTimeout(() => {
if (mountedRef.current) {
setIsConfettiActive(false);
setWinnerSelectingStatus('not-selected');
setPendingWinner(null);
setDisplayText('...');
setWinnerText('');
}
setIsConfettiActive(false);
setWinnerSelectingStatus("not-selected");
setPendingWinner(null);
setDisplayText("...");
setWinnerText("");
}, 10000);
} catch (error) {
console.error('Error processing message:', error);
setDisplayText('Error processing winner');
};
if (wsStatus === "connected" && !wsRef.current) {
console.log("✅ WebSocket connected");
wsRef.current = new WebSocket(WEBSOCKET_URL);
wsRef.current.addEventListener("message", handleWebSocketMessage);
wsRef.current.addEventListener("error", (error) => {
console.error("❌ WebSocket error:", error);
});
wsRef.current.addEventListener("close", (event) => {
console.log("❌ WebSocket closed:", event);
});
// Set up ping to keep connection alive
const pingInterval = setInterval(() => {
if (wsRef.current?.readyState === WebSocket.OPEN) {
console.log("📤 Sending ping");
wsRef.current.send(JSON.stringify({ type: "ping" }));
}
}, RECONNECT_INTERVAL);
// Cleanup on unmount
return () => {
console.log("🔌 Cleaning up WebSocket connection");
if (wsRef.current) {
wsRef.current.close();
wsRef.current = null;
}
clearInterval(pingInterval);
};
} else if (wsStatus === "connecting") {
console.log("🔄 WebSocket connecting...");
} else if (wsStatus === "error") {
console.log("❗ WebSocket error detected");
}
};
}, [wsStatus]);
return (
<section>
{wsStatus === 'error' && (
{wsStatus === "error" && (
<div className="text-red-500 text-center mb-2">
Connection error. Please refresh the page.
Websocket connection error.
</div>
)}
{isConfettiActive && (
@ -188,25 +153,19 @@ const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) =>
numberOfPieces={1000}
tweenDuration={10000}
run={true}
colors={[
'linear-gradient(45deg, #5D5D72, #8589DE)',
'linear-gradient(45deg, #E1E0FF, #575992)',
'#8589DE',
'#575992',
'#E1E0FF',
'#BA1A1A',
]}
/>
</div>
)}
<div className="container">
<div
className="flex flex-col items-center rounded-[32px] gap-[40px]"
style={{ background: 'linear-gradient(180deg, #F0ECF4 0%, #E1E0FF 43.5%)' }}>
style={{
background: "linear-gradient(180deg, #F0ECF4 0%, #E1E0FF 43.5%)",
}}
>
<div className="flex items-center justify-center w-full min-h-[240px]">
{winnerSelectingStatus === 'not-selected' ||
winnerSelectingStatus === 'is-selecting' ? (
{winnerSelectingStatus === "not-selected" ||
winnerSelectingStatus === "is-selecting" ? (
<AnimatedText
text={displayText}
className="text-center flex items-center justify-center text-[100px] leading-[108px] text-[#E65E19]"
@ -227,7 +186,12 @@ const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) =>
)}
</div>
<div className="z-10">
<LotterySlotCounter numberString={currentNumber} isAnimating={isSlotCounterAnimating} />
{currentNumber && (
<LotterySlotCounter
numberString={currentNumber}
isAnimating={false}
/>
)}
</div>
<div className="flex gap-6 rounded-[12px] flex-1 w-full items-center justify-center sm:pb-[62px] pb-[32px] px-4">
<LotteryWinnersList winners={winners} />

35
components/lottery/slotCounter/LotterySlotCounter.tsx
View File

@ -1,24 +1,27 @@
'use client';
import Image from 'next/image';
import React, { useEffect, useState } from 'react';
import SlotCounter from 'react-slot-counter';
import { useMediaQuery } from 'usehooks-ts';
"use client";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import SlotCounter from "react-slot-counter";
import { useMediaQuery } from "usehooks-ts";
interface LotterySlotCounterProps {
numberString: string;
isAnimating: boolean;
}
const LotterySlotCounter = ({ numberString, isAnimating }: LotterySlotCounterProps) => {
const LotterySlotCounter = ({
numberString,
isAnimating,
}: LotterySlotCounterProps) => {
const [formattedNumber, setFormattedNumber] = useState(numberString);
useEffect(() => {
const formatted = numberString.replace(/-/g, ',');
const formatted = numberString.replace(/-/g, ",");
setFormattedNumber(formatted);
}, [numberString]);
const tablet = useMediaQuery('(max-width: 769px)');
const mobile = useMediaQuery('(max-width: 426px)');
const tablet = useMediaQuery("(max-width: 769px)");
const mobile = useMediaQuery("(max-width: 426px)");
return (
<div className="relative w-fit">
@ -62,21 +65,23 @@ const LotterySlotCounter = ({ numberString, isAnimating }: LotterySlotCounterPro
className="flex items-center h-fit md:max-w-[1132px] sm:max-w-[640px] max-w-[324px] w-full justify-center text-white md:py-4 md:px-6 rounded-full overflow-y-hidden overflow-x-visible relative border-4 border-lightPrimary"
style={{
background:
'linear-gradient(180deg, #454673 0%, #575992 10.5%, #575992 90%, #454673 100%)',
boxShadow: '0px 4px 4px 0px #00000040',
}}>
"linear-gradient(180deg, #454673 0%, #575992 10.5%, #575992 90%, #454673 100%)",
boxShadow: "0px 4px 4px 0px #00000040",
}}
>
{/* Highlight */}
<div
className="absolute top-[50%] -translate-y-1/2 left-0 w-full h-full"
style={{
background:
'linear-gradient(180deg, rgba(87, 89, 146, 0) 0%, #7274AB 50%, rgba(87, 89, 146, 0) 100%)',
}}></div>
"linear-gradient(180deg, rgba(87, 89, 146, 0) 0%, #7274AB 50%, rgba(87, 89, 146, 0) 100%)",
}}
></div>
<div className="z-10">
<SlotCounter
value={formattedNumber}
startValue={formattedNumber}
// startValue={formattedNumber}
startValueOnce
charClassName="rolling-number"
separatorClassName="slot-seperator"

45
hooks/useWebSocketLottery.ts Normal file
View File

@ -0,0 +1,45 @@
import { useState, useEffect, useRef } from "react";
export const useWebsocketLottery = (
url: string,
reconnectInterval: number = 20000
) => {
const [wsStatus, setWsStatus] = useState<
"connecting" | "connected" | "error"
>("connecting");
const wsRef = useRef<WebSocket | null>(null);
const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
useEffect(() => {
const setupWebSocket = () => {
const socket = new WebSocket(url);
wsRef.current = socket;
socket.addEventListener("open", () => setWsStatus("connected"));
socket.addEventListener("error", () => setWsStatus("error"));
socket.addEventListener("close", () => reconnectWebSocket());
};
const reconnectWebSocket = () => {
reconnectTimeoutRef.current = setTimeout(() => {
setupWebSocket();
}, reconnectInterval);
};
setupWebSocket();
return () => {
if (reconnectTimeoutRef.current)
clearTimeout(reconnectTimeoutRef.current);
if (wsRef.current) wsRef.current.close();
};
}, [url, reconnectInterval]);
const sendMessage = (message: string) => {
if (wsRef.current?.readyState === WebSocket.OPEN) {
wsRef.current.send(message);
}
};
return { wsStatus, sendMessage };
};