WebSocket Messaging

{
  "type": "message",
  "conversation_id": "uuid",
  "payload": {
    "message_id": "client-generated-uuid",
    "content": "Hello, world!",
    "message_type": "text"
  }
}

const messageId = crypto.randomUUID();

ws.send(JSON.stringify({
  type: 'message',
  conversation_id: 'conv-123',
  payload: {
    message_id: messageId,
    content: 'Hello, everyone!',
    message_type: 'text'
  }
}));

{
  "type": "message",
  "conversation_id": "uuid",
  "payload": {
    "message_id": "uuid",
    "sender_id": "user-uuid",
    "sender_type": "sdk",
    "content": "Hello, world!",
    "message_type": "text",
    "sent_at": "2024-01-01T00:00:00Z",
    "metadata": {}
  }
}

1. Client sends message → message_id generated client-side
2. Server validates & persists → Publishes to Redis
3. Server broadcasts to room → All members receive
4. Recipient receives → Delivery receipt sent
5. Recipient reads → Read receipt sent

function sendMessage(conversationId, content) {
  const messageId = crypto.randomUUID();
  
  // Optimistic update - show message immediately
  displayMessage({
    id: messageId,
    content,
    status: 'sending'
  });
  
  // Send to server
  ws.send(JSON.stringify({
    type: 'message',
    conversation_id: conversationId,
    payload: {
      message_id: messageId,
      content,
      message_type: 'text'
    }
  }));
}

// When server echo arrives, update status
ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  if (msg.type === 'message') {
    updateMessageStatus(msg.payload.message_id, 'sent');
  }
};

const seenMessages = new Set();

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  
  if (msg.type === 'message') {
    const messageId = msg.payload.message_id;
    
    if (seenMessages.has(messageId)) {
      // Already seen, might be reconciling optimistic message
      updateMessageStatus(messageId, 'sent');
    } else {
      seenMessages.add(messageId);
      displayMessage(msg.payload);
    }
  }
};

{
  "type": "message",
  "conversation_id": "uuid",
  "payload": {
    "message_id": "uuid",
    "content": "Hello!",
    "message_type": "text"
  }
}

{
  "type": "message",
  "conversation_id": "uuid",
  "payload": {
    "message_id": "uuid",
    "content": "User joined the conversation",
    "message_type": "system"
  }
}

class MessageHandler {
  constructor(ws) {
    this.ws = ws;
    this.seenMessages = new Set();
    this.pendingMessages = new Map();
    
    this.ws.onmessage = this.handleMessage.bind(this);
  }
  
  send(conversationId, content) {
    const messageId = crypto.randomUUID();
    
    // Track pending message
    this.pendingMessages.set(messageId, {
      content,
      status: 'sending',
      timestamp: Date.now()
    });
    
    // Notify UI
    this.onMessage?.({
      id: messageId,
      content,
      status: 'sending',
      isOptimistic: true
    });
    
    // Send to server
    this.ws.send(JSON.stringify({
      type: 'message',
      conversation_id: conversationId,
      payload: {
        message_id: messageId,
        content,
        message_type: 'text'
      }
    }));
    
    return messageId;
  }
  
  handleMessage(event) {
    const msg = JSON.parse(event.data);
    
    if (msg.type !== 'message') return;
    
    const payload = msg.payload;
    const messageId = payload.message_id;
    
    // Check if this is a reconciliation of our pending message
    if (this.pendingMessages.has(messageId)) {
      this.pendingMessages.delete(messageId);
      this.seenMessages.add(messageId);
      
      this.onMessage?.({
        id: messageId,
        ...payload,
        status: 'sent',
        isOptimistic: false
      });
      return;
    }
    
    // Check for duplicates
    if (this.seenMessages.has(messageId)) {
      return;
    }
    
    this.seenMessages.add(messageId);
    
    // New message from another user
    this.onMessage?.({
      id: messageId,
      ...payload,
      status: 'sent',
      isOptimistic: false
    });
  }
}

// Usage
const handler = new MessageHandler(ws);

handler.onMessage = (message) => {
  console.log(`[${message.status}] ${message.sender_id}: ${message.content}`);
};

handler.send('conv-123', 'Hello, world!');

{
  "type": "error",
  "error": "conversation_id is required"
}

{
  "type": "error",
  "error": "Not a member of this conversation"
}

{
  "type": "error",
  "error": "message_id is required"
}