Proje: OkulUp · Hub: OkulUp — Architecture

Chat Real-Time Mimarisi

useRealtimeMessages Hook

const { isTyping, typingUserName } = useRealtimeMessages(conversationId);

subscribeToConversation(conversationId, callbacks) ile:

onNewMessage → React Query cache invalidate (conversation + conversations list)
onMessageRead → conversation cache invalidate
onTyping → typing indicator state

Typing Indicator

Backend: POST /api/conversations/:id/typing — kullanıcı yazıyor event’i
Frontend: 3 saniye sonra otomatik clear
TypingIndicator component — chat ekranında gösteriliyor

Chat Bileşenleri (`src/components/modules/chat/`)

MessageBubble — mesaj balonu (sent/received)
MessageBubbleAttachment — dosya/resim ekli mesajlar
MessageComposer — yazma alanı + gönder
ChatAttachmentButton — dosya/resim ekleme butonu
ChatAttachmentPreview — seçilen ek önizleme
ChatHeader — sohbet başlığı (karşı taraf bilgisi)
DateSeparator — tarih ayrımı
TypingIndicator — “yazıyor…” göstergesi

Messages List Bileşenleri (`src/components/modules/messages/`)

ChatListItem — konuşma listesi item
ChatListHeader — liste başlığı
ChatSearchBar — konuşma arama
ChatDateSection — tarih bazlı gruplama

Message Routes

app/(tabs)/messages.tsx — konuşma listesi
app/chat/[id].tsx — tek konuşma (gerçek zamanlı)
app/message-direct.tsx — yeni direkt mesaj
app/message-broadcast.tsx — sınıfa toplu mesaj (STAFF)

realtime-infrastructure — Echo/WebSocket client
messaging-system — mesajlaşma domain kuralları