Chat alkalmazás

A Chat alkalmazás egy valós idejű üzenetküldő rendszer, amely lehetővé teszi a felhasználók közötti közvetlen kommunikációt. Socket.IO alapú real-time kapcsolattal és REST API fallback-kel rendelkezik.

Áttekintés

A Chat alkalmazás három fő részből áll:

Felhasználói lista (jobb oldali sidebar) - online/offline státusszal
Beszélgetések listája - olvasatlan üzenetek számával
Chat ablak - üzenetek megjelenítése és küldése

Főbb funkciók

Valós idejű üzenetküldés Socket.IO-val
Online/offline státusz követés
Gépelés jelzés (typing indicator)
Olvasatlan üzenetek számlálása
Automatikus fallback REST API-ra (dev mode)
Toast értesítések új üzenetekről
Beszélgetések automatikus rendezése (legfrissebb felül)

Fájl struktúra

apps/chat/
├── index.svelte              # Fő layout (sidebar + beszélgetések + chat ablak)
├── chat.remote.ts            # Server actions (üzenetek, beszélgetések)
├── components/
│   ├── UserList.svelte       # Felhasználói lista online/offline csoportosítással
│   ├── ConversationList.svelte  # Beszélgetések listája
│   └── ChatWindow.svelte     # Üzenetek megjelenítése és küldés
└── stores/
    └── chatStore.svelte.ts   # Chat állapotkezelés és Socket.IO kapcsolat

Server Actions

`chat.remote.ts`

A Chat alkalmazás 8 server action-t definiál:

1. `getChatUsers` (query)

Visszaadja az összes felhasználót (kivéve a jelenlegi felhasználót) chat indításához.

const result = await getChatUsers();
// { success: true, users: ChatUser[] }

2. `getConversations` (query)

Lekéri a felhasználó összes beszélgetését az utolsó üzenettel és olvasatlan számmal.

const result = await getConversations();
// { success: true, conversations: ConversationWithLastMessage[] }

3. `getMessages` (command)

Lekéri egy beszélgetés üzeneteit lapozással.

const result = await getMessages({
  conversationId: 1,
  limit: 50,      // opcionális, alapértelmezett: 50
  offset: 0       // opcionális, alapértelmezett: 0
});
// { success: true, messages: MessageWithSender[] }

Validáció:

conversationId: minimum 1
limit: 1-100 között
offset: minimum 0
Ellenőrzi, hogy a felhasználó tagja-e a beszélgetésnek

4. `sendMessage` (command)

Új üzenet küldése egy felhasználónak.

const result = await sendMessage({
  recipientId: 2,
  content: "Helló!"
});
// { success: true, message: MessageWithSender, conversationId: number }

Validáció:

recipientId: minimum 1
content: 1-5000 karakter között

Működés:

Lekéri vagy létrehozza a beszélgetést
Elmenti az üzenetet az adatbázisba
Visszaadja az üzenetet a küldő adataival

5. `markMessagesAsRead` (command)

Beszélgetés üzeneteinek olvasottá jelölése.

const result = await markMessagesAsRead({
  conversationId: 1
});
// { success: true }

6. `getUnreadCount` (query)

Összes olvasatlan üzenet számának lekérése.

const result = await getUnreadCount();
// { success: true, count: number }

7. `getCurrentUserId` (query)

Jelenlegi felhasználó ID-jának lekérése.

const result = await getCurrentUserId();
// { success: true, userId: number }

8. `getOrCreateConversation` (command)

Beszélgetés lekérése vagy létrehozása egy felhasználóval.

const result = await getOrCreateConversation({
  otherUserId: 2
});
// { success: true, conversationId: number }

ChatStore

A chatStore.svelte.ts kezeli a chat állapotot és a Socket.IO kapcsolatot.

Állapot

interface ChatState {
  conversations: ConversationWithLastMessage[];
  activeConversationId: number | null;
  messages: MessageWithSender[];
  unreadCount: number;
  isConnected: boolean;              // Socket.IO kapcsolat állapota
  onlineUsers: Set<number>;          // Online felhasználók ID-i
  typingUsers: Map<number, boolean>; // Gépelő felhasználók beszélgetésenként
}

Főbb metódusok

`connect(userId: number)`

Socket.IO kapcsolat inicializálása és event listener-ek beállítása.

const chatStore = getChatStore();
await chatStore.connect(userId);

Socket.IO események:

chat:new-message - Új üzenet érkezett
chat:user-online - Felhasználó online lett
chat:user-offline - Felhasználó offline lett
chat:online-users - Online felhasználók listája
chat:user-typing - Gépelés jelzés

Fallback működés:

Ha Socket.IO nem elérhető, 10 másodpercenként poll-oz
Dev mode-ban automatikusan polling-ot használ

`disconnect()`

Socket.IO kapcsolat bontása és polling leállítása.

chatStore.disconnect();

`loadConversations()`

Beszélgetések újratöltése az API-ból.

await chatStore.loadConversations();

`loadMessages(conversationId: number)`

Beszélgetés üzeneteinek betöltése és aktívvá tétele.

await chatStore.loadMessages(1);

Mellékhatások:

Beállítja az activeConversationId-t
Automatikusan olvasottá jelöli az üzeneteket
Frissíti az olvasatlan számot

`sendMessage(recipientId: number, content: string)`

Üzenet küldése Socket.IO-n keresztül.

const result = await chatStore.sendMessage(2, "Helló!");

Működés:

Meghívja a sendMessage server action-t
Elküldi Socket.IO-n keresztül (chat:send-message event)
Hozzáadja az üzenetet a helyi állapothoz (ha aktív beszélgetés)
Frissíti a beszélgetések listáját

`markAsRead(conversationId: number)`

Üzenetek olvasottá jelölése.

await chatStore.markAsRead(1);

`sendTypingIndicator(recipientId, conversationId, isTyping)`

Gépelés jelzés küldése Socket.IO-n keresztül.

chatStore.sendTypingIndicator(2, 1, true);  // Gépelés kezdése
chatStore.sendTypingIndicator(2, 1, false); // Gépelés vége

`isUserOnline(userId: number): boolean`

Ellenőrzi, hogy egy felhasználó online-e.

if (chatStore.isUserOnline(2)) {
  console.log('User is online');
}

`isUserTyping(conversationId: number): boolean`

Ellenőrzi, hogy valaki gépel-e egy beszélgetésben.

if (chatStore.isUserTyping(1)) {
  console.log('Other user is typing...');
}

Komponensek

UserList.svelte

Felhasználói lista online/offline csoportosítással és keresővel.

Funkciók:

Keresés név és felhasználónév alapján
Online/offline csoportok összecsukhatók
Státusz indikátor (zöld/szürke)
Kattintásra beszélgetés indítása

Használat:

<UserList />

ConversationList.svelte

Beszélgetések listája az utolsó üzenettel és olvasatlan számmal.

Funkciók:

Automatikus rendezés (legfrissebb felül)
Olvasatlan üzenetek badge-e
Aktív beszélgetés kiemelése
Frissítés gomb
Relatív időbélyeg (pl. “2 perce”)

Használat:

<ConversationList />

ChatWindow.svelte

Üzenetek megjelenítése és küldése.

Funkciók:

Üzenetek csoportosítása küldő szerint
Avatar megjelenítés
Gépelés jelzés animációval
Enter billentyűvel küldés
Automatikus görgetés új üzenethez
Üres állapot kezelés

Használat:

<ChatWindow currentUserId={userId} />

Props:

currentUserId: Jelenlegi felhasználó ID-ja (üzenetek megkülönböztetéséhez)

Socket.IO integráció

Szerver oldal

A Socket.IO szerver a server.js fájlban van konfigurálva (Express + Socket.IO).

Események (szerver → kliens):

chat:new-message - Új üzenet érkezett
chat:user-online - Felhasználó online lett
chat:user-offline - Felhasználó offline lett
chat:online-users - Online felhasználók listája
chat:user-typing - Gépelés jelzés

Események (kliens → szerver):

register - Felhasználó regisztrálása (userId)
chat:send-message - Üzenet küldése
chat:mark-read - Üzenetek olvasottá jelölése
chat:typing - Gépelés jelzés küldése

Kliens oldal

A ChatStore automatikusan kezeli a Socket.IO kapcsolatot:

// Kapcsolódás
const chatStore = getChatStore();
await chatStore.connect(userId);

// Automatikus újracsatlakozás
// - Végtelen újrapróbálkozás
// - 1-5 másodperc késleltetéssel
// - WebSocket + polling fallback

Toast értesítések

Új üzenet érkezésekor (ha nem az aktív beszélgetésben):

toast.info(senderName, {
  description: messagePreview,
  duration: 5000,
  action: {
    label: 'Megnyitás',
    onClick: () => openMessageInChat(conversationId)
  }
});

Működés:

Dinamikusan importálja a svelte-sonner toast-ot
Megjeleníti a küldő nevét és az üzenet előnézetét
“Megnyitás” gombbal megnyitja a beszélgetést

Adatbázis séma

`conversations` tábla

{
  id: number;
  participant1Id: number;
  participant2Id: number;
  lastMessageAt: Date | null;
  createdAt: Date;
}

`messages` tábla

{
  id: number;
  conversationId: number;
  senderId: number;
  content: string;
  isRead: boolean;
  readAt: Date | null;
  sentAt: Date;
}

ChatRepository

A chatRepository.ts kezeli az adatbázis műveleteket.

Főbb metódusok

`getOrCreateConversation(userId1, userId2)`

Lekéri vagy létrehozza a beszélgetést két felhasználó között.

const conversation = await chatRepository.getOrCreateConversation(1, 2);

Működés:

Ellenőrzi mindkét irányban (participant1 ↔ participant2)
Ha nem létezik, létrehozza

`getUserConversations(userId)`

Lekéri a felhasználó összes beszélgetését.

const conversations = await chatRepository.getUserConversations(1);

Visszaadja:

Beszélgetés adatok
Másik felhasználó neve és képe
Utolsó üzenet
Olvasatlan üzenetek száma

`getConversationMessages(conversationId, limit, offset)`

Lekéri egy beszélgetés üzeneteit.

const messages = await chatRepository.getConversationMessages(1, 50, 0);

Működés:

Lapozható (limit + offset)
Időrendi sorrendben (legrégebbi → legújabb)
Küldő neve és képe csatolva

`sendMessage(conversationId, senderId, content)`

Új üzenet mentése.

const message = await chatRepository.sendMessage(1, 2, "Helló!");

Mellékhatások:

Frissíti a beszélgetés lastMessageAt mezőjét

`markMessagesAsRead(conversationId, userId)`

Beszélgetés üzeneteinek olvasottá jelölése.

await chatRepository.markMessagesAsRead(1, 2);

Működés:

Csak a másik felhasználó üzeneteit jelöli olvasottá
Beállítja az isRead és readAt mezőket

`getUserUnreadCount(userId)`

Összes olvasatlan üzenet számának lekérése.

const count = await chatRepository.getUserUnreadCount(1);

Használati példák