Skip to content
Zelta Docs

Real-time Chat

Real-time Chat

Section titled “Real-time Chat”

Summary

Section titled “Summary”

Real-time Chat enables Secret Santa matches to communicate anonymously before revealing identities, asking questions about gift preferences.

User Story

Section titled “User Story”

As a Secret Santa participant,
I want to message my match anonymously,
So that I can ask about their preferences without revealing my identity.

Acceptance Criteria

Section titled “Acceptance Criteria”
  • ✅ User can send messages to their match after raffle
  • ✅ Messages delivered instantly via WebSocket
  • ✅ User identity hidden until group date passes
  • ✅ Chat history persists across sessions
  • ✅ Unread message indicators
  • ✅ Typing indicators (future)

Inputs and Outputs

Section titled “Inputs and Outputs”

Inputs:

  • Message text (string, max 500 characters)
  • Group/conversation ID

Outputs:

  • Sent message with timestamp
  • Real-time message notifications
  • Chat history

Flow

Section titled “Flow”
User clicks "Message Match"
     │
     ▼
POST /groups/:groupId/conversation
  (creates conversation if not exists)
     │
     ▼
Navigate to /inbox/:conversationId
     │
     ▼
Load chat history
     │
     ▼
User types message and clicks Send
     │
     ▼
Send via WebSocket:
  {
    type: 'NEW_MESSAGE',
    conversationId: X,
    content: 'Hello!',
  }
     │
     ▼
Backend broadcasts to recipient
     │
     ▼
Recipient's WebSocket receives message
     │
     ▼
Redux adds message to chat slice
     │
     ▼
UI updates instantly

API/Contracts

Section titled “API/Contracts”

Create Conversation

Section titled “Create Conversation”

Request:

POST /groups/5/conversation
Authorization: Bearer {token}

Response:

{
  "success": true,
  "conversation": {
    "id": 10,
    "groupId": 5,
    "participants": [1, 5],
    "createdAt": "2025-10-29T12:00:00Z"
  }
}

WebSocket Message Format

Section titled “WebSocket Message Format”

Outgoing:

{
  "type": "NEW_MESSAGE",
  "conversationId": 10,
  "content": "Do you like blue or red?"
}

Incoming:

{
  "type": "NEW_MESSAGE",
  "conversationId": 10,
  "senderId": 5,
  "content": "I prefer blue!",
  "timestamp": "2025-10-29T12:05:00Z"
}

Example

Section titled “Example”
// Send message via WebSocket
const sendMessage = (content: string) => {
  const wsClient = WebSocketClient.getInstance();
  wsClient.sendMessage(JSON.stringify({
    type: 'NEW_MESSAGE',
    conversationId,
    content,
  }));


  // Optimistically add to Redux
  dispatch(addChatMessage({
    conversationId,
    content,
    senderId: currentUser.id,
    timestamp: new Date().toISOString(),
  }));
};

Further Reading

Section titled “Further Reading”