פיצ׳רים בזמן אמת בקנה מידה: WebSockets, אימות וביצועים

1import { WebSocketServer } from 'ws';
2import { createServer } from 'http';
3import jwt from 'jsonwebtoken';
4
5const server = createServer();
6const wss = new WebSocketServer({ server });
7
8// טיפול בחיבורים עם אימות
9wss.on('connection', async (ws, req) => {
10  // חילוץ token מפרמטרי ה-URL
11  const token = new URLSearchParams(req.url?.split('?')[1]).get('token');
12  
13  if (!token) {
14    ws.close(4001, 'חסר token אימות');
15    return;
16  }
17  
18  try {
19    // אימות JWT token (Clerk, Auth0, וכו')
20    const user = jwt.verify(token, process.env.JWT_SECRET!) as { userId: string };
21    (ws as any).userId = user.userId;
22    
23    console.log(`✅ משתמש ${user.userId} התחבר`);
24    
25    // שליחת הודעת welcome
26    ws.send(JSON.stringify({ type: 'connected', userId: user.userId }));
27    
28    // טיפול בהודעות נכנסות
29    ws.on('message', (data) => handleMessage(ws, data));
30    
31    // טיפול בניתוק
32    ws.on('close', () => {
33      console.log(`❌ משתמש ${user.userId} התנתק`);
34    });
35    
36  } catch (error) {
37    ws.close(4002, 'Token אימות לא תקין');
38  }
39});
40
41server.listen(3001, () => {
42  console.log('שרת WebSocket רץ על ws://localhost:3001');
43});

1import { Redis } from '@upstash/redis';
2import { WebSocket } from 'ws';
3
4const redis = new Redis({
5  url: process.env.UPSTASH_REDIS_REST_URL!,
6  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
7});
8
9// Redis Pub/Sub להתרחבות אופקית
10const subscriber = redis.duplicate();
11const publisher = redis.duplicate();
12
13interface ConnectedClient {
14  ws: WebSocket;
15  userId: string;
16  channels: Set<string>;
17}
18
19const clients = new Map<string, ConnectedClient>();
20
21// הרשמה לערוצי Redis
22subscriber.subscribe('notifications', 'messages', (message) => {
23  const data = JSON.parse(message);
24  
25  // שידור לכל הלקוחות המחוברים שרשומים לערוץ הזה
26  clients.forEach((client) => {
27    if (client.channels.has(data.channel)) {
28      client.ws.send(JSON.stringify(data));
29    }
30  });
31});
32
33// פרסום הודעה ל-Redis (עובד על פני מספר שרתים)
34export async function broadcastToChannel(channel: string, message: any) {
35  await publisher.publish(channel, JSON.stringify({ channel, ...message }));
36}
37
38// דוגמה: הודעה לכל המשתמשים על פוסט חדש
39export async function notifyNewPost(postId: string, title: string) {
40  await broadcastToChannel('notifications', {
41    type: 'new_post',
42    postId,
43    title,
44    timestamp: Date.now(),
45  });
46}

1import { useEffect, useRef, useState } from 'react';
2
3export function useWebSocket({ url, token, onMessage }: any) {
4  const [isConnected, setIsConnected] = useState(false);
5  const [reconnectAttempt, setReconnectAttempt] = useState(0);
6  const wsRef = useRef<WebSocket | null>(null);
7  
8  const connect = () => {
9    const ws = new WebSocket(`${url}?token=${token}`);
10    
11    ws.onopen = () => {
12      console.log('✅ WebSocket מחובר');
13      setIsConnected(true);
14      setReconnectAttempt(0);
15      
16      // שליחת heartbeat כל 30 שניות
17      const heartbeat = setInterval(() => {
18        if (ws.readyState === WebSocket.OPEN) {
19          ws.send(JSON.stringify({ type: 'ping' }));
20        }
21      }, 30000);
22      
23      ws.onclose = () => {
24        clearInterval(heartbeat);
25      };
26    };
27    
28    ws.onmessage = (event) => {
29      const data = JSON.parse(event.data);
30      if (data.type !== 'pong') {
31        onMessage?.(data);
32      }
33    };
34    
35    ws.onclose = () => {
36      console.log('❌ WebSocket התנתק');
37      setIsConnected(false);
38      
39      // ניסיון חיבור מחדש עם exponential backoff
40      if (reconnectAttempt < 5) {
41        const delay = 3000 * Math.pow(2, reconnectAttempt);
42        setTimeout(() => {
43          setReconnectAttempt(prev => prev + 1);
44          connect();
45        }, delay);
46      }
47    };
48    
49    wsRef.current = ws;
50  };
51  
52  useEffect(() => {
53    connect();
54    return () => wsRef.current?.close();
55  }, [url, token]);
56  
57  return { isConnected, send: (data: any) => wsRef.current?.send(JSON.stringify(data)) };
58}