לוח מחוונים בזמן אמת: WebSocket או SSE?

מצב טיפוסי: דשבורד React מתעדכן רק לאחר לחיצה על F5. מנהלים מאבדים עד 15% מההמרות בגלל סטטוסי הזמנות מיושנים. עם עיכוב של 5 שניות, ההפסדים יכולים להגיע ל-8% מההכנסות. אנו מפתחים דשבורדים עם עדכונים חיים באמצעות WebSocket או SSE — הנתונים מתרעננים באופן מיידי לאחר שינויים בשרת. בניסיון שלנו, השגנו זמן אספקת עדכון של 50 אלפיות השנייה תחת 1000 חיבורים מקבילים ויציבות של 99.9%. קבעו אבחון של הפתרון הנוכחי שלכם כדי להעריך חיסכון פוטנציאלי.

איך לבחור בין WebSocket ל-SSE?

WebSocket הוא דו-כיווני, מתאים לדשבורדים אינטראקטיביים עם פילטרים. SSE הוא חד-כיווני, פשוט יותר, עובד דרך HTTP/2, ומתחבר מחדש אוטומטית. לניטור פסיבי של מדדים, SSE הוא אופטימלי: פחות תקורה, קל יותר לקנה מידה.

לרוב הדשבורדים, SSE מספיק — זול יותר ליישום וקל יותר לתחזוקה. אנו משתמשים ב-WebSocket כאשר נדרשת תקשורת דו-כיוונית (למשל, צ'אטים או לוחות שיתופיים לעריכה).

למה Redis Pub/Sub הוא ברוקר אידיאלי לזמן אמת?

שימו לב: כאשר דשבורד צריך לקבל עדכונים ממספר מיקרוסרוויסים, דחיפה ישירה לחיבורי SSE מסבכת את הארכיטקטורה. Redis Pub/Sub פועל כאוטובוס קל משקל: כל שירות מפרסם אירוע לערוץ, ונקודת הקצה של SSE נרשמת לערוצים הרלוונטיים. זה מפחית את עומס השרת ומפשט את הניפוי. לפי תיעוד Redis, Pub/Sub מספק הפצת הודעות ללא אחסון.

רכיבים מרכזיים של דשבורד

נקודת קצה SSE

// GET /api/dashboard/stream
app.get('/api/dashboard/stream', authenticate, async (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.setHeader('X-Accel-Buffering', 'no'); // для nginx

  const sendEvent = (event: string, data: unknown) => {
    res.write(`event: ${event}\n`);
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  };

  // Отправить начальные данные
  const initial = await dashboardService.getMetrics(req.user.id);
  sendEvent('init', initial);

  // Подписаться на Redis pub/sub для обновлений
  const subscriber = redis.duplicate();
  await subscriber.subscribe(`dashboard:${req.user.id}`);
  subscriber.on('message', (channel, message) => {
    const update = JSON.parse(message);
    sendEvent(update.type, update.data);
  });

  // Heartbeat каждые 30 сек чтобы не закрылось соединение
  const heartbeat = setInterval(() => {
    res.write(':heartbeat\n\n');
  }, 30000);

  req.on('close', () => {
    clearInterval(heartbeat);
    subscriber.unsubscribe();
    subscriber.quit();
  });
});

React Hook עבור SSE

function useDashboardStream(userId: string) {
  const [metrics, setMetrics] = useState<DashboardMetrics | null>(null);
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    const eventSource = new EventSource('/api/dashboard/stream', {
      withCredentials: true
    });

    eventSource.addEventListener('init', (e) => {
      setMetrics(JSON.parse(e.data));
      setIsConnected(true);
    });

    eventSource.addEventListener('metrics:updated', (e) => {
      const update = JSON.parse(e.data);
      setMetrics(prev => prev ? { ...prev, ...update } : update);
    });

    eventSource.addEventListener('order:new', (e) => {
      const order = JSON.parse(e.data);
      setMetrics(prev => prev ? {
        ...prev,
        todayOrders: prev.todayOrders + 1,
        todayRevenue: prev.todayRevenue + order.total
      } : null);
    });

    eventSource.onerror = () => {
      setIsConnected(false);
      // EventSource автоматически переподключается
    };

    return () => eventSource.close();
  }, [userId]);

  return { metrics, isConnected };
}

ווידג'טים

function DashboardPage() {
  const { metrics, isConnected } = useDashboardStream(user.id);
  return (
    <div className="dashboard-grid">
      <ConnectionIndicator isConnected={isConnected} />
      <MetricCard title="Заказы сегодня" value={metrics?.todayOrders ?? 0} delta={metrics?.ordersVsYesterday} />
      <MetricCard title="Выручка" value={formatCurrency(metrics?.todayRevenue ?? 0)} delta={metrics?.revenueVsYesterday} />
      <LiveOrderFeed orders={metrics?.recentOrders ?? []} />
      <RealtimeChart data={metrics?.hourlyRevenue ?? []} title="Выручка по часам" />
    </div>
  );
}

תהליך פיתוח דשבורד

אילו טעויות נפוצות בפיתוח דשבורדים בזמן אמת?

• חוסר ב-heartbeat: שרתי פרוקסי (Nginx, Cloudflare) סוגרים חיבורים לאחר 60–120 שניות של חוסר פעילות. Heartbeat כל 30 שניות פותר את הבעיה.
• ערבוב לוגיקה עסקית עם מטפל SSE: העבירו פרסום אירועים לשירות נפרד או ל-middleware.
• אחסון חיבורים בזיכרון של תהליך יחיד: לקנה מידה אופקי, השתמשו ב-Redis Pub/Sub או ברוקר מותאם אישית.

מה כלול בעבודה

• עיצוב ארכיטקטורה (בחירת תעבורה, ברוקר, פרוטוקול).
• פיתוח נקודת קצה SSE/WebSocket עם אימות ו-heartbeat.
• מודול backend לפרסום אירועים דרך Redis Pub/Sub.
• React hook עם מטפלים לכל סוגי האירועים והמצבים (מחובר, מתחבר מחדש, שגיאה).
• ערכת ווידג'טים (MetricCard, LiveFeed, RealtimeChart) עם פריסה רספונסיבית.
• אינטגרציה עם APIs קיימים (REST או GraphQL) לטעינת נתונים ראשונית.
• תיעוד קוד והוראות פריסה.
• בדיקות עומס (עד 1000 חיבורים מקבילים).
• העברת גישה ל-repository, staging וסביבות production.
• הכשרת צוות הלקוח לתחזוקת הדשבורד.

לוחות זמנים ועלות

גרסה בסיסית (SSE + Redis + React hook + 3–5 ווידג'טים) אורכת 1 עד 2 שבועות. דשבורד מלא עם פילטרים, ייצוא ומספר סוגי מדדים אורך 3–4 שבועות. העלות מחושבת באופן אישי לפי מורכבות הפרויקט. חיסכון בתעבורה מגיע עד 40% עם SSE, והפחתת עומס השרת עד 30%. עלויות תפעול מופחתות ב-25%.

למה לקוחות סומכים עלינו?

אנו מפתחים פתרונות בזמן אמת למסחר אלקטרוני ו-SaaS כבר למעלה מ-5 שנים. הפורטפוליו שלנו כולל 50+ פרויקטים עם דשבורדים למרקטפלייסים גדולים ומערכות לוגיסטיקה. אנו מבטיחים יציבות חיבור (99.9% uptime), עדכוני נתונים בתוך 50 אלפיות השנייה, והפחתת עומס שרת עד 30% באמצעות בחירת תעבורה אופטימלית. צרו קשר כדי להעריך את הפרויקט שלכם — נציע ארכיטקטורה סוהר.