הטמעת צ'אט תוך-ועידה לאתרים

הטמעת צ'אט מובנה בוועידות וידאו לאתרים

בוועידת וידאו, לעיתים קרובות יש צורך בצ'אט טקסט מקביל: שאלה מהירה, קישור למסמך, תגובה מבלי להפריע לדובר. תרחיש טיפוסי: 100+ משתתפים בוובינר, הדובר מדבר, והצ'אט מוצף בהודעות. ללא צ'אט, המשתתפים פונים למסנג'רים חיצוניים, מאבדים הקשר ומוסחים. הפתרון הוא צ'אט טקסט מובנה שעובד במקביל לוידאו. אנו מיישמים צ'אט כזה על בסיס LiveKit Data Messages או Socket.IO, עם תמיכה בהודעות פרטיות, תגובות, קבצים ושמירת היסטוריה. הארכיטקטורה הטיפוסית: רכיב React בצד הלקוח, שרת Node.js (Nest.js) ל-webhook והיסטוריה, LiveKit לוידאו ונתונים. עם ניסיון של 5+ שנים ב-WebRTC ו-20+ אינטגרציות מוצלחות, חידדנו את הפתרון לביצועים יציבים תחת עומס. הצ'אט מעביר הודעות דרך WebRTC Data Channel או WebSocket. לאספקה מובטחת אנו משתמשים ב-reliable: true ב-LiveKit. השהייה אינה עולה על 50 אלפיות השנייה אפילו עם 100+ משתתפים. הודעות פרטיות מסומנות בשדה isPrivate ומועברות רק לנמען. ההיסטוריה מוצפנת עם TLS ובמידת הצורך נשמרת ב-PostgreSQL דרך webhook.

למה צ'אט טקסט הוא קריטי לוועידות וידאו

ללא צ'אט, המשתתפים נאלצים להשתמש במסנג'רים חיצוניים, ומאבדים הקשר. צ'אט בתוך הוועידה:

• מאפשר לשאול שאלה מבלי להפריע לדובר;
• משאיר קישורים וקוד בצורת טקסט;
• שומר היסטוריה עבור אלו שמצטרפים מאוחר יותר.

אילו בעיות טכניות אנו פותרים?

השהייה וסנכרון

הודעות חייבות להיות מועברות לכל המשתתפים בו-זמנית. אנו משתמשים ב-LiveKit Data Channel (עם מאפיין reliable: true) — הוא מבטיח סדר ואספקה. חלופה היא Socket.IO עם תור מותאם אישית. טעות טיפוסית: שליחת הודעות כ-unreliable — הן אובדות תחת עומס גבוה. ועידת הבדיקה שלנו עם 100+ משתתפים הראתה השהייה מתחת ל-50 אלפיות השנייה.

פרטיות ואבטחה

משתתפים אחרים לא צריכים לראות הודעות פרטיות. אנו מסמנים אותן בשדה isPrivate ושולחים רק למשתתף הנבחר דרך destinationIdentities. ההיסטוריה מוצפנת במהלך השידור (TLS). בנוסף, ניתן להגדיר סינון ניבולי פה.

שמירת היסטוריה

כברירת מחדל, LiveKit אינו שומר צ'אט. אנו נרשמים ל-webhook data_received וכותבים ל-PostgreSQL. זה מאפשר טעינת היסטוריה בעת חיבור מחדש או לאחר שיחה. ללא שמירה, הצ'אט קיים רק במהלך הוועידה.

איך אנחנו עושים את זה: LiveKit Data Messages לעומת Socket.IO

לפי תיעוד LiveKit, Data Channel מבטיח אספקה אמינה עם השהייה מתחת ל-50 אלפיות השנייה. LiveKit Data Messages מהירים פי 2 לאינטגרציה מאשר Socket.IO עם פונקציונליות דומה. כשאנו בוחרים ב-LiveKit: אם הוועידה כבר משתמשת ב-LiveKit לוידאו — הוספת צ'אט עולה יום אחד ללא שרת חדש. כשאנו בוחרים ב-Socket.IO: יש צורך בקצה אחורי מותאם אישית (סינון, ניהול, בוטים). אנו מקימים שירות Node.js נפרד.

טעויות נפוצות בעת אינטגרציה של צ'אט:

• שליחת הודעות כ-unreliable — אובדן מנות תחת עומס שיא.
• התעלמות מה-webhook לשמירת היסטוריה — הצ'אט לא משוחזר לאחר חיבור מחדש.
• אי התחשבות בפרטיות — הודעות פרטיות גלויות לכולם.

דוגמת יישום ב-React + LiveKit

להלן קוד רכיב צ'אט עובד. שליחת הודעות, קבלה, תגובות והודעות פרטיות.

// Отправка сообщения через LiveKit Data channel
async function sendChatMessage(
  room: Room,
  text: string,
  toParticipant?: string // undefined = всем
): Promise<void> {
  const message = {
    id: crypto.randomUUID(),
    type: 'chat',
    text,
    senderName: room.localParticipant.name,
    senderId: room.localParticipant.identity,
    timestamp: Date.now(),
    isPrivate: !!toParticipant,
  };

  const data = new TextEncoder().encode(JSON.stringify(message));

  if (toParticipant) {
    // Личное сообщение конкретному участнику
    const participant = [...room.remoteParticipants.values()]
      .find(p => p.identity === toParticipant);
    if (participant) {
      await room.localParticipant.publishData(data, {
        reliable: true,
        destinationIdentities: [toParticipant],
      });
    }
  } else {
    // Всем в комнате
    await room.localParticipant.publishData(data, {
      reliable: true,
    });
  }
}

// Получение сообщений
room.on('dataReceived', (payload: Uint8Array, participant?: RemoteParticipant) => {
  const message = JSON.parse(new TextDecoder().decode(payload));
  if (message.type === 'chat') {
    addMessage(message);
  }
  if (message.type === 'reaction') {
    addReaction(message.targetMessageId, message.emoji, participant?.name);
  }
});

interface ChatMessage {
  id: string;
  text: string;
  senderName: string;
  senderId: string;
  timestamp: number;
  isPrivate: boolean;
  reactions: Record<string, string[]>; // emoji → [userName]
}

function ConferenceChat({ room }: { room: Room }) {
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [text, setText] = useState('');
  const [privateTo, setPrivateTo] = useState<string | null>(null);
  const bottomRef = useRef<HTMLDivElement>(null);

  const addMessage = useCallback((msg: ChatMessage) => {
    setMessages(prev => [...prev, { ...msg, reactions: {} }]);
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, []);

  const addReaction = useCallback((messageId: string, emoji: string, senderName: string) => {
    setMessages(prev => prev.map(m => {
      if (m.id !== messageId) return m;
      const existing = m.reactions[emoji] ?? [];
      return {
        ...m,
        reactions: {
          ...m.reactions,
          [emoji]: [...existing, senderName],
        },
      };
    }));
  }, []);

  useEffect(() => {
    const handler = (payload: Uint8Array) => {
      const msg = JSON.parse(new TextDecoder().decode(payload));
      if (msg.type === 'chat') addMessage(msg);
      if (msg.type === 'reaction') addReaction(msg.targetMessageId, msg.emoji, msg.senderName);
    };
    room.on('dataReceived', handler);
    return () => {
      room.off('dataReceived', handler);
    };
  }, [room, addMessage, addReaction]);

  const send = async () => {
    if (!text.trim()) return;
    await sendChatMessage(room, text, privateTo ?? undefined);
    setText('');
  };

  const sendReaction = async (messageId: string, emoji: string) => {
    const data = new TextEncoder().encode(JSON.stringify({
      type: 'reaction',
      targetMessageId: messageId,
      emoji,
      senderName: room.localParticipant.name,
    }));
    await room.localParticipant.publishData(data, { reliable: true });
    addReaction(messageId, emoji, room.localParticipant.name ?? '');
  };

  return (
    <div className="flex flex-col h-full bg-white border-l border-gray-200">
      {/* Сообщения */}
      <div className="flex-1 overflow-y-auto p-4 space-y-3">
        {messages.map(msg => (
          <MessageBubble
            key={msg.id}
            message={msg}
            isOwnMessage={msg.senderId === room.localParticipant.identity}
            onReact={(emoji) => sendReaction(msg.id, emoji)}
          />
        ))}
        <div ref={bottomRef} />
      </div>

      {/* Выбор получателя */}
      {privateTo && (
        <div className="px-4 py-1 bg-yellow-50 border-t border-yellow-200 flex justify-between">
          <span className="text-sm text-yellow-700">Личное сообщение → {privateTo}</span>
          <button onClick={() => setPrivateTo(null)} className="text-yellow-600 text-sm">✕</button>
        </div>
      )}

      {/* Ввод */}
      <div className="p-4 border-t border-gray-200 flex gap-2">
        <input
          value={text}
          onChange={e => setText(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && !e.shiftKey && (e.preventDefault(), send())}
          placeholder={privateTo ? `Личное сообщение...` : 'Сообщение всем...'}
          className="flex-1 border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button
          onClick={send}
          disabled={!text.trim()}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm disabled:opacity-50"
        >
          ↑
        </button>
      </div>
    </div>
  );
}

function MessageBubble({ message, isOwnMessage, onReact }) {
  const REACTIONS = ['👍', '❤️', '😂', '👏', '🎉'];
  return (
    <div className={`flex flex-col ${isOwnMessage ? 'items-end' : 'items-start'}`}>
      {!isOwnMessage && (
        <span className="text-xs text-gray-500 mb-1">{message.senderName}</span>
      )}
      <div className={`max-w-xs px-3 py-2 rounded-2xl text-sm ${
        message.isPrivate
          ? 'bg-yellow-100 border border-yellow-300'
          : isOwnMessage
            ? 'bg-blue-600 text-white'
            : 'bg-gray-100'
      }`}>
        {message.text}
        {message.isPrivate && (
          <span className="text-xs ml-2 opacity-60">🔒</span>
        )}
      </div>
      {/* Реакции */}
      <div className="flex gap-1 mt-1">
        {Object.entries(message.reactions).map(([emoji, users]) => (
          <span
            key={emoji}
            className="text-xs bg-gray-100 rounded-full px-2 py-0.5"
            title={users.join(', ')}
          >
            {emoji} {users.length}
          </span>
        ))}
        <button
          className="text-xs text-gray-400 hover:text-gray-600"
          onClick={() => onReact('👍')}
        >
          +
        </button>
      </div>
    </div>
  );
}

איך לשמור היסטוריית צ'אט?

אם יש צורך בהיסטוריה לאחר השיחה, אנו שומרים אותה למסד נתונים דרך webhook:

// Сервер слушает события LiveKit webhook
app.post('/api/webhooks/livekit', async (req, res) => {
  const event = receiver.receive(req.body, req.headers['authorization']);
  if (event.event === 'data_received') {
    const msg = JSON.parse(new TextDecoder().decode(event.data));
    if (msg.type === 'chat') {
      await db.chatMessages.create({
        roomName: event.room.name,
        senderId: event.participant.identity,
        text: msg.text,
        isPrivate: msg.isPrivate,
        timestamp: new Date(msg.timestamp),
      });
    }
  }
  res.status(200).end();
});

תהליך אינטגרציית הצ'אט לשירות שלך

1. ניתוח הארכיטקטורה הנוכחית — לבדוק אם כבר נעשה שימוש ב-LiveKit או וידאו אחר, לקבוע דרישות להיסטוריה ופרטיות.
2. בחירת מחסנית טכנולוגית — LiveKit Data Messages או Socket.IO + PostgreSQL.
3. אינטגרציית לקוח — להטמיע את רכיב ה-React בממשק שלך, להגדיר אימות.
4. חלק שרת — webhook להיסטוריה, API לטעינת הודעות קודמות.
5. בדיקות — לוודא תחת עומס (100+ משתתפים), השהייה, פרטיות.
6. פריסה — מתארח בשרת שלך או בענן.

מה כלול בתוצאה?

• רכיב צ'אט React עם תמיכה בהודעות פרטיות, תגובות וקבצים.
• חלק שרת לשמירת היסטוריה (אם נדרש).
• תיעוד מפורט של API ורכיב.
• תמיכה ל-30 יום לאחר ההשקה.
• הדרכה לצוות שלך.

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

גרסה בסיסית (ללא היסטוריה) — בין 1 ל-2 ימים, החל מ-$499. גרסה עם היסטוריה והודעות פרטיות — בין 2 ל-4 ימים, החל מ-$899. התמחור מחושב באופן אישי, בהתאם למורכבות האינטגרציה. חיסכון בתשתית בהשוואה לשרת צ'אט נפרד מגיע עד 30%. צור קשר להערכת פרויקט — נשלח הצעה מסחרית תוך יום. קבל ייעוץ אינטגרציה. הזמן אינטגרציית צ'אט לשירות שלך.

המומחיות שלנו — 5+ שנים בפיתוח יישומי ווב, 20+ פרויקטים מוצלחים עם LiveKit ו-WebRTC, 99% שביעות רצון לקוחות. אנו מבטיחים ביצועים יציבים של הצ'אט תחת עומס.