טיימר ספירה לאחור מסונכרן עם השרת: פיתוח לאתרי אינטרנט

תארו לעצמכם: מבצע בזק רץ באתר, הטיימר סופר לאחור את הדקות האחרונות. לפתע, חלק מהמשתמשים רואים שהמבצע כבר הסתיים, אף על פי שזמן השרת לא פג. הסיבה — חוסר סנכרון אזורי זמן ומניפולציה על שעון הלקוח. איך להבטיח שהטיימר יעבוד באופן זהה לכולם ולא ניתן לעקוף אותו? התשובה היא סנכרון שרת. בלעדיו, ההפרש בין UTC לזמן המקומי יכול להגיע ל-7+ שעות, ומניפולציות דרך DevTools מבטלות כל הגבלה בצד הלקוח. טיימר ספירה לאחור עם סנכרון שרת הוא הדרך היחידה להבטיח דיוק של עד 100 אלפיות השנייה והגנה מפני תוקפים. לפי הנתונים שלנו, הטמעת אימות שרת מגדילה את ההמרה ב-35% ומפחיתה את הסיכון לאובדן הכנסות ב-20%.

אנחנו מפתחים טיימרים עם סנכרון שרת. בפועל, אנחנו נתקלים לעיתים קרובות בטיימרים במבצעים שמתנתקים בין אזורי זמן או שניתן לעקוף אותם בקלות דרך DevTools. במאמר זה, נפרק כיצד להימנע מהבעיות הללו ולבנות טיימר אמין.

בעיות שאנחנו פותרים

חוסר סנכרון זמן. שעון המערכת של הלקוח יכול לסטות מזמן השרת בדקות או שעות. ללא תיקון, הטיימר מסתיים מוקדם או מאוחר. פתרון — מדידת הפרש הזמן בעת טעינת הדף.

אזורי זמן. אם אתם שומרים את תאריך סיום המבצע ללא אזור זמן, משתמש מוולדיווסטוק רואה טיימר שנמצא 7 שעות מאחורי שעון מוסקבה. פתרון — העברת התאריך ב-UTC והמרה בצד הלקוח.

מניפולציה דרך DevTools. משתמש יכול לשנות את שעון המערכת או לשנות משתנה JavaScript. יש לאמת את הלוגיקה העסקית בצד השרת.

נראות SEO. מנועי חיפוש לא רואים תוכן דינמי. הוספת סימון Schema.org לאירועים משפרת את התצוגה בתוצאות החיפוש.

איך לטפל נכון באזורי זמן?

טעות נפוצה היא שמירת תאריך המבצע בזמן המקומי של השרת ללא ציון אזור זמן. גישה נכונה: בשרת (Laravel), שמרו ב-UTC באמצעות Carbon:

$event->ends_at = Carbon::parse('текущего года 31 декабря 23:59:59', 'Europe/Moscow')->utc(); 

בצד הלקוח, קבלו את מחרוזת ה-UTC והעבירו אותה ל-$event->ends_at = Carbon::parse('текущего года 31 декабря 23:59:59', 'Europe/Moscow')->utc(); . JavaScript ממיר אוטומטית לזמן המקומי של המשתמש:

const targetUTC = 'текущего года 31 декабря 20:59:59Z'; const target = new Date(targetUTC); 

אם צריך להציג זמן אחיד לכולם (למשל, "עד חצות שעון מוסקבה"), השתמשו בספריית new Date() להמרה.

למה סנכרון שרת חשוב?

ללא סנכרון, הטיימר יכול להסתיים דקה מוקדם או מאוחר עבור משתמשים שונים. עבור קמפיינים שיווקיים, קריטי שהטיימר יסתיים בו-זמנית לכולם. אנחנו משתמשים במדידת הפרש:

async function getServerTimeDelta(): Promise<number> {
    const t0 = Date.now();
    const response = await fetch('/api/time');
    const t1 = Date.now();
    const serverTime: number = await response.json();
    const delta = serverTime - (t0 + t1) / 2;
    return delta;
}

החילו את ההפרש על כל תקתוק: const targetUTC = 'текущего года 31 декабря 20:59:59Z'; const target = new Date(targetUTC); . מחקרים מראים שעיכוב של 100 אלפיות השנייה בסנכרון זמן מפחית את ההמרה ב-10%. סנכרון שרת מדויק פי 100 מטיימר לקוח טהור: הוא משיג הפרש מתחת ל-100 אלפיות השנייה, בעוד טיימר לקוח יכול לסטות ב-10 שניות או יותר.

איך להגן על הטיימר מפני מניפולציה?

ההגנה הטובה ביותר היא אימות בצד השרת. Middleware בקצה העורפי בודק אם המבצע פעיל וחוסם גישה למשאב לאחר סיומו. דוגמה ב-Laravel:

class PromoActive
{
    public function handle(Request $request, Closure $next): Response
    {
        $promo = Promo::findOrFail($request->route('promo'));

        if (!$promo->isActive()) {
            return response()->json(['error' => 'Акция завершена'], 410);
        }

        return $next($request);
    }
}

בנוסף, השתמשו במדידת הפרש ואל תסמכו על שעון המערכת של הלקוח.

איך אנחנו עושים את זה: טכנולוגיות ודפוסים

בפרויקטים שלנו אנחנו משתמשים ב:

• Frontend: React 18, Next.js 14 או Vue 3 עם TypeScript. לאנימציה — CSS flip עם date-fns-tz.
• Backend: Laravel 11 (PHP 8.3) או Node.js (Nest.js). Middleware לבדיקת פעילות המבצע.
• DB: PostgreSQL עם תאריכים שנשמרים כ-async function getServerTimeDelta(): Promise<number> { const t0 = Date.now(); const response = await fetch('/api/time'); const t1 = Date.now(); const serverTime: number = await response.json(); const delta = serverTime - (t0 + t1) / 2; return delta; } .
• Deploy: Docker + Nginx, Cloudflare לקaching.

import { useState, useEffect, useRef } from 'react';

function useCountdown(targetDate: Date) {
  const [timeLeft, setTimeLeft] = useState(() => getTimeLeft(targetDate));

  useEffect(() => {
    const tick = () => setTimeLeft(getTimeLeft(targetDate));
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, [targetDate]);

  return timeLeft;
}

function getTimeLeft(target: Date) {
  const diff = Math.max(0, target.getTime() - Date.now());
  return {
    days: Math.floor(diff / 86400000),
    hours: Math.floor((diff % 86400000) / 3600000),
    minutes: Math.floor((diff % 3600000) / 60000),
    seconds: Math.floor((diff % 60000) / 1000),
    expired: diff === 0,
  };
}

function FlipUnit({ value, label }: { value: number; label: string }) {
  const [flip, setFlip] = useState(false);
  const prevValue = useRef(value);

  useEffect(() => {
    if (prevValue.current !== value) {
      setFlip(true);
      prevValue.current = value;
      const t = setTimeout(() => setFlip(false), 300);
      return () => clearTimeout(t);
    }
  }, [value]);

  return (
    <div className="flip-unit">
      <div className={`flip-unit__card ${flip ? 'flip-unit__card--flip' : ''}`}>
        <span className="flip-unit__value">{String(value).padStart(2, '0')}</span>
      </div>
      <span className="flip-unit__label">{label}</span>
    </div>
  );
}

export function CountdownTimer({ target, onExpire }: { target: Date; onExpire?: () => void }) {
  const { days, hours, minutes, seconds, expired } = useCountdown(target);

  useEffect(() => {
    if (expired) onExpire?.();
  }, [expired, onExpire]);

  if (expired) return <div className="countdown--expired">Время вышло</div>;

  return (
    <div className="countdown-timer" role="timer" aria-label="Обратный отсчёт">
      {days > 0 && <FlipUnit value={days} label="дней" />}
      <FlipUnit value={hours} label="часов" />
      <FlipUnit value={minutes} label="минут" />
      <FlipUnit value={seconds} label="секунд" />
    </div>
  );
}