11.4 ווב סוקטים וזמן אמת תרגול
תרגול - ווב-סוקטים וזמן אמת¶
תרגיל 1 - Hook בסיסי ל-WebSocket¶
צרו custom hook בשם useWebSocket שמנהל חיבור WebSocket:
- מקבל URL כפרמטר
- מחזיר:
send,lastMessage,readyState,connectionStatus - תומך בחיבור מחדש אוטומטי עם exponential backoff
- מנקה את החיבור ב-cleanup
- ממיר הודעות JSON אוטומטית
צרו קומפוננטה פשוטה שמשתמשת ב-hook כדי להציג הודעות שמתקבלות מהשרת.
תרגיל 2 - אפליקציית צ'אט מלאה¶
בנו קומפוננטת צ'אט שכוללת:
- רשימת הודעות עם גלילה אוטומטית להודעה האחרונה
- שדה קלט לכתיבת הודעה
- שליחה בלחיצה על כפתור או Enter
- הבחנה ויזואלית בין הודעות שלי להודעות אחרים
- חותמת זמן בכל הודעה
- אינדיקציית "מקליד..." כשמשתמש אחר מקליד
- אינדיקציית סטטוס חיבור (מחובר/מנותק)
השתמשו ב-Socket.io client.
תרגיל 3 - התראות בזמן אמת עם SSE¶
צרו מערכת התראות בזמן אמת עם Server-Sent Events:
א. צרו API Route ב-Next.js שמחזיר SSE stream עם:
- אירוע notification - התראה חדשה
- אירוע heartbeat - כל 30 שניות לשמירת החיבור
ב. צרו hook בשם useNotifications שמתחבר ל-SSE ומנהל את ההתראות
ג. צרו קומפוננטת התראות שמציגה:
- פעמון עם מספר התראות שלא נקראו
- רשימת התראות (dropdown) עם זמן יחסי
- סימון התראה כנקראה
- אנימציה כשמגיעה התראה חדשה
תרגיל 4 - חדר צ'אט עם נוכחות¶
הרחיבו את הצ'אט מתרגיל 2 עם:
- רשימת חדרים (general, support, random)
- מעבר בין חדרים (הצטרפות ועזיבה)
- רשימת משתמשים מחוברים בכל חדר (presence)
- אינדיקציה של משתמשים שנכנסו/יצאו מהחדר
- מונה משתמשים בכל חדר
תרגיל 5 - לוח שיתופי בזמן אמת¶
צרו לוח משימות (kanban) שיתופי שמתעדכן בזמן אמת:
- שלוש עמודות: "לביצוע", "בתהליך", "הושלם"
- גרירת משימות בין עמודות
- כשמשתמש אחד מזיז משימה - כל המשתמשים רואים את העדכון
- אינדיקציה מי מעדכן את הלוח (סמן או גבול צבעוני)
- נעילה אופטימיסטית - אם שני משתמשים מנסים להזיז את אותה משימה
תרגיל 6 - סטטוס חיבור ו-Reconnection¶
צרו קומפוננטת Connection Manager שמנהלת:
- הצגת סטטוס חיבור גלובלי (banner בראש הדף)
- ספירה לאחור לניסיון חיבור הבא
- כפתור "נסה שוב" ידני
- תור הודעות (message queue) - הודעות שנשלחו בזמן ניתוק נשמרות ונשלחות כשהחיבור חוזר
- הצגת מספר ניסיונות החיבור
שאלות¶
- מה ההבדלים העיקריים בין WebSocket, SSE ו-Long Polling? מתי כדאי להשתמש בכל אחד?
- הסבירו מה זה Exponential Backoff ולמה הוא חשוב בחיבור מחדש.
- מה היתרון של Socket.io על פני WebSocket API רגיל?
- כיצד מטפלים במצב שבו המשתמש שולח הודעה כשהחיבור מנותק?
- מה ההבדל בין
emitל-broadcastב-Socket.io?