הטמעת צ'אט חי: WebSocket, היסטוריה, קבצים, התראות Push

צ'אט לייב: החלטות ארכיטקטוניות הן המפתח

בניית צ'אט בזמן אמת היא משימה שבה בחירות ארכיטקטוניות קובעות הכל. לדוגמה, בחירה ב-REST על פני WebSocket עם 100+ משתמשים בו-זמנית מובילה לזמן אחזור גבוה ותעבורה מוגזמת. יישמנו למעלה מ-20 מערכות צ'אט — מתמיכה פנימית ועד פתרונות ייצור בקנה מידה גדול המטפלים בעד 10,000 חיבורים לכל מופע. צ'אט בזמן אמת לא רק משפר את חוויית המשתמש אלא גם מפחית את עומס התמיכה, ומאפשר טיפול בפניות מהר פי 3-4. צ'אט בסיסי מתחיל ב-$2,000; גרסה מלאה מ-$5,000. לקוחות בדרך כלל חוסכים 30% בעלויות תמיכה, מה שמתורגם לממוצע של $15,000 בשנה.

צ'אט מלא הוא יותר מסתם WebSocket עם טקסט. הוא כולל היסטוריית הודעות, מחוון הקלדה, אישורי קריאה, תמיכה בקבצים, עדכונים אופטימיים והתראות push. כל רכיב דורש פתרון ייעודי. בואו נסקור את המרכיבים המרכזיים באמצעות Socket.IO, React ו-Zustand כערימת הטכנולוגיות.

למה WebSocket הוא התקן לצ'אט לייב

WebSocket מספק תקשורת דו-כיוונית עם זמן אחזור מינימלי. בניגוד ל-long polling, הוא צורך 90% פחות תעבורה ואינו חוסם חיבורים. פרוטוקול WebSocket מוגדר ב-RFC 6455. לצורך קנה מידה, אנו משתמשים באדפטר Redis — כל מופעי השרת מסנכרנים חדרים באמצעות pub/sub. זה מאפשר טיפול בעשרות אלפי סשנים מקבילים. WebSocket עולה על SSE פי 10 בזמן אחזור: זמני תגובה אופייניים הם <50 אלפיות שנייה לעומת 200–500 אלפיות שנייה ל-SSE. בנוסף, עדכונים אופטימיים גורמים לממשק להרגיש מהיר פי 2 מגישות סינכרוניות מסורתיות.

מבנה נתוני הודעה

interface ChatRoom {
  id: string;
  type: 'direct' | 'group' | 'support';
  participants: string[]; // userIds
  name?: string; // для групп
  lastMessage?: Message;
  unreadCount: number;
}

interface Message {
  id: string;
  roomId: string;
  senderId: string;
  type: 'text' | 'image' | 'file' | 'system';
  content: string;
  attachments?: Attachment[];
  replyTo?: string; // id родительского сообщения
  editedAt?: Date;
  deletedAt?: Date;
  status: 'sending' | 'sent' | 'delivered' | 'read';
  createdAt: Date;
}

interface Attachment {
  id: string;
  type: 'image' | 'file';
  url: string;
  name: string;
  size: number;
  mimeType: string;
}

צד השרת עם Socket.IO

// server/chat.ts
import { Server, Socket } from 'socket.io';
import { db } from './db';
import { redisAdapter } from '@socket.io/redis-adapter';

export function initChat(io: Server) {
  io.on('connection', async (socket: Socket) => {
    const userId = socket.data.userId;

    // Присоединение ко всем комнатам пользователя при подключении
    const rooms = await db.chatRoom.findMany({
      where: { participants: { has: userId } },
      select: { id: true },
    });
    rooms.forEach(({ id }) => socket.join(`room:${id}`));

    // Отправка сообщения
    socket.on('message:send', async (payload: {
      roomId: string;
      content: string;
      type: 'text' | 'image' | 'file';
      replyTo?: string;
      clientId: string; // временный id для оптимистичного обновления
    }, ack) => {
      // Проверяем доступ
      const room = await db.chatRoom.findFirst({
        where: { id: payload.roomId, participants: { has: userId } },
      });
      if (!room) return ack({ error: 'Access denied' });

      const message = await db.message.create({
        data: {
          roomId: payload.roomId,
          senderId: userId,
          type: payload.type,
          content: payload.content,
          replyToId: payload.replyTo,
          status: 'sent',
        },
      });

      // Broadcast в комнату
      io.to(`room:${payload.roomId}`).emit('message:new', message);

      // ACK отправителю с серверным id
      ack({ ok: true, message, clientId: payload.clientId });
    });

    // Typing indicator
    socket.on('typing:start', ({ roomId }) => {
      socket.to(`room:${roomId}`).emit('typing:update', { userId, roomId, isTyping: true });
    });
    socket.on('typing:stop', ({ roomId }) => {
      socket.to(`room:${roomId}`).emit('typing:update', { userId, roomId, isTyping: false });
    });

    // Прочтение сообщений
    socket.on('messages:read', async ({ roomId, upToMessageId }) => {
      await db.messageRead.upsert({
        where: { userId_roomId: { userId, roomId } },
        update: { lastReadMessageId: upToMessageId, readAt: new Date() },
        create: { userId, roomId, lastReadMessageId: upToMessageId, readAt: new Date() },
      });
      socket.to(`room:${roomId}`).emit('messages:read:update', { userId, roomId, upToMessageId });
    });

    // История сообщений (пагинация курсором)
    socket.on('messages:load', async ({ roomId, before, limit = 50 }, ack) => {
      const messages = await db.message.findMany({
        where: {
          roomId,
          ...(before ? { createdAt: { lt: new Date(before) } } : {}),
          deletedAt: null,
        },
        orderBy: { createdAt: 'desc' },
        take: limit + 1,
        include: { sender: { select: { id: true, name: true, avatar: true } } },
      });
      ack({
        messages: messages.slice(0, limit).reverse(),
        hasMore: messages.length > limit,
        nextCursor: messages.length > limit ? messages[limit - 1].createdAt.toISOString() : null,
      });
    });
  });
}

יישום לקוח

איך עובדים עדכונים אופטימיים?

ההודעה מופיעה מיד ללא המתנה לשרת. עם קבלת ACK, היא מוחלפת באובייקט האמיתי:

// store/chat.ts (Zustand)
interface ChatStore {
  messages: Map<string, Message[]>;
  pendingIds: Map<string, string>; // clientId -> roomId
  addOptimistic: (roomId: string, content: string) => string;
  confirmMessage: (clientId: string, serverMessage: Message) => void;
  failMessage: (clientId: string) => void;
}

const useChatStore = create<ChatStore>((set, get) => ({
  messages: new Map(),
  pendingIds: new Map(),
  addOptimistic(roomId, content) {
    const clientId = `pending-${Date.now()}-${Math.random()}`;
    const optimistic: Message = {
      id: clientId,
      roomId,
      senderId: currentUserId,
      type: 'text',
      content,
      status: 'sending',
      createdAt: new Date(),
    };
    set((s) => {
      const msgs = [...(s.messages.get(roomId) ?? []), optimistic];
      s.messages.set(roomId, msgs);
      s.pendingIds.set(clientId, roomId);
      return { messages: new Map(s.messages) };
    });
    return clientId;
  },
  confirmMessage(clientId, serverMessage) {
    set((s) => {
      const roomId = s.pendingIds.get(clientId)!;
      const msgs = s.messages.get(roomId) ?? [];
      const idx = msgs.findIndex((m) => m.id === clientId);
      if (idx !== -1) msgs[idx] = { ...serverMessage, status: 'sent' };
      s.pendingIds.delete(clientId);
      return { messages: new Map(s.messages) };
    });
  },
}));

// Отправка с оптимистичным обновлением
async function sendMessage(roomId: string, content: string) {
  const clientId = useChatStore.getState().addOptimistic(roomId, content);
  socket.emit(
    'message:send',
    { roomId, content, type: 'text', clientId },
    (response: { ok: boolean; message?: Message; clientId: string }) => {
      if (response.ok) {
        useChatStore.getState().confirmMessage(clientId, response.message!);
      } else {
        useChatStore.getState().failMessage(clientId);
      }
    }
  );
}

איך ליישם מחוון הקלדה והתראות Push?

// В компоненте ввода
const typingTimeout = useRef<ReturnType<typeof setTimeout>>();
function handleInput(value: string) {
  setDraft(value);
  socket.emit('typing:start', { roomId });
  clearTimeout(typingTimeout.current);
  typingTimeout.current = setTimeout(() => {
    socket.emit('typing:stop', { roomId });
  }, 2000);
}

// Отображение
const [typingUsers, setTypingUsers] = useState<Set<string>>(new Set());
socket.on('typing:update', ({ userId, isTyping }) => {
  setTypingUsers((prev) => {
    const next = new Set(prev);
    isTyping ? next.add(userId) : next.delete(userId);
    return next;
  });
});

// UI
{typingUsers.size > 0 && (
  <div className="typing-indicator">
    <span>{getUserNames(typingUsers)} печатает...</span>
    <BouncingDots />
  </div>
)}

// Push-уведомления для фоновых вкладок (service-worker.ts)
self.addEventListener('push', (event: PushEvent) => {
  const data = event.data?.json();
  event.waitUntil(
    self.registration.showNotification(data.senderName, {
      body: data.content,
      icon: data.senderAvatar,
      badge: '/badge.png',
      data: { roomId: data.roomId, url: `/chat/${data.roomId}` },
    })
  );
});

self.addEventListener('notificationclick', (event: NotificationEvent) => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url)
  );
});

Web Push API מאפשר התראות גם כשהאפליקציה סגורה.

העלאת קבצים באמצעות Presigned URLs

קבצים אינם נשלחים דרך WebSocket — הם מועלים תחילה ל-S3/MinIO, ולאחר מכן ה-URL מועבר בהודעה:

async function sendFile(roomId: string, file: File) {
  // Загрузка через presigned URL
  const { uploadUrl, fileUrl } = await api.post('/chat/upload-url', {
    filename: file.name,
    mimeType: file.type,
    size: file.size,
  });
  await fetch(uploadUrl, {
    method: 'PUT',
    body: file,
    headers: {
      'Content-Type': file.type,
    },
  });
  const clientId = useChatStore.getState().addOptimistic(roomId, file.name);
  socket.emit('message:send', {
    roomId,
    type: 'file',
    content: file.name,
    clientId,
    attachment: {
      url: fileUrl,
      name: file.name,
      size: file.size,
      mimeType: file.type,
    },
  }, (response) => {
    if (response.ok) {
      useChatStore.getState().confirmMessage(clientId, response.message!);
    }
  });
}

השוואה: WebSocket לעומת SSE לעומת Long Polling

WebSocket מספק זמן אחזור מינימלי וגמישות מלאה. לצ'אט, זו הבחירה מספר אחת. בפרויקט אחד, לקוח נתקל בעיכובים עם 500 נציגים בו-זמנית. העברנו מ-long polling ל-WebSocket, וזמן התגובה ירד מ-2 שניות ל-50 אלפיות שנייה.

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

כל פרויקט מספק:

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

תהליך ולוחות זמנים

שלבי פיתוח

1. ניתוח — בחירת פרוטוקול, הערכת עומס, פרופילינג.
2. עיצוב — סכמת מסד נתונים, חדרים, אירועים, עיצוב API.
3. יישום — קוד שרת ולקוח, אינטגרציית אחסון.
4. בדיקות — בדיקות עומס (k6), אימות התחברות מחדש, מקרי קצה (חדרים ריקים, קבצים מצורפים).
5. פריסה — הגדרת Docker, Nginx, Redis, Web Push subscriptions.

תוצאה

• קוד מקור לשרת ולקוח.
• Docker Compose להתחלה מהירה.
• תיעוד API (אירועים).
• הוראות פריסה.
• 30 ימי תמיכה טכנית לאחר המסירה.

צ'אט בסיסי (טקסט, היסטוריה, נוכחות) — 5–7 ימים. יישום מלא עם קבצים, התראות push, אישורי קריאה וחיפוש — 2–3 שבועות. פתרון הצ'אט הלייב שלנו מבטיח שהודעות נמסרות בזמן אמת. עם למעלה מ-20 פריסות צ'אט מוצלחות ו-5+ שנות ניסיון במערכות זמן אמת, המפתחים המוסמכים שלנו מבטיחים איכות. צרו קשר להערכה מדויקת — נכין הצעת מחיר תוך 1–2 ימים. קבלו את הצ'אט שלכם מפותח עם אבטחת איכות על ידי פנייה אלינו לדיון בפרויקט שלכם.