WebSocket API Reference

{
  "type": "auth",
  "api_key": "your_api_key_here"
}

{
  "type": "auth",
  "token": "your_jwt_token_here"
}

{
  "type": "subscribe",
  "channel": "projects.updates",
  "project_id": "proj_12345",
  "request_id": "req_abc123"
}

const socket = new WebSocket('wss://ws.myappapi.com/v1/');

socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  
  if (data.type === 'error') {
    console.error(`Error (${data.code}): ${data.message}`);
    
    // Handle specific error types
    switch (data.code) {
      case 'authentication_required':
        // Attempt to re-authenticate
        authenticateSocket();
        break;
        
      case 'invalid_subscription':
        // Fix subscription parameters and try again
        console.error('Subscription error details:', data.details);
        break;
        
      case 'rate_limit_exceeded':
        // Implement exponential backoff
        setTimeout(() => {
          retrySendMessage(data.request_id);
        }, calculateBackoff());
        break;
        
      case 'server_error':
        // Report to monitoring system
        reportServerError(data);
        break;
    }
  }
};

class WebSocketClient {
  constructor(url) {
    this.url = url;
    this.reconnectAttempts = 0;
    this.maxReconnectAttempts = 10;
    this.baseReconnectDelay = 1000; // 1 second
    this.maxReconnectDelay = 30000; // 30 seconds
    this.subscriptions = new Map();
    this.connect();
  }
  
  connect() {
    this.socket = new WebSocket(this.url);
    
    this.socket.onopen = () => {
      console.log('WebSocket connected');
      this.reconnectAttempts = 0;
      this.authenticate();
      this.restoreSubscriptions();
    };
    
    this.socket.onclose = (event) => {
      console.log(`WebSocket disconnected: ${event.code}`);
      this.scheduleReconnect();
    };
    
    this.socket.onerror = (error) => {
      console.error('WebSocket error:', error);
    };
    
    // Set up message handling
    this.socket.onmessage = this.handleMessage.bind(this);
  }
  
  scheduleReconnect() {
    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
      console.error('Maximum reconnection attempts reached');
      return;
    }
    
    this.reconnectAttempts++;
    
    // Exponential backoff with jitter
    const delay = Math.min(
      this.baseReconnectDelay * Math.pow(2, this.reconnectAttempts - 1),
      this.maxReconnectDelay
    );
    const jitter = delay * 0.1 * Math.random();
    const reconnectDelay = delay + jitter;
    
    console.log(`Reconnecting in ${reconnectDelay}ms (attempt ${this.reconnectAttempts})`);
    
    setTimeout(() => {
      this.connect();
    }, reconnectDelay);
  }
  
  authenticate() {
    this.sendMessage({
      type: 'auth',
      api_key: this.apiKey
    });
  }
  
  restoreSubscriptions() {
    // Re-subscribe to all previous subscriptions
    for (const [channel, params] of this.subscriptions.entries()) {
      this.subscribe(channel, params);
    }
  }
  
  // Other methods (subscribe, unsubscribe, sendMessage, etc.)
}

// Unsubscribe from all subscriptions first
function disconnect() {
  // Unsubscribe from all active subscriptions
  for (const subscriptionId of activeSubscriptions) {
    socket.send(JSON.stringify({
      type: 'unsubscribe',
      subscription_id: subscriptionId
    }));
  }
  
  // Wait a moment for unsubscribe messages to be processed
  setTimeout(() => {
    // Close the connection
    socket.close(1000, 'Client disconnecting');
  }, 500);
}

const API_KEY = 'your_api_key_here';
const PROJECT_ID = 'proj_12345';

// Connect to WebSocket
const socket = new WebSocket('wss://ws.myappapi.com/v1/');

// Track subscription IDs
let projectSubscriptionId = null;

// Set up event handlers
socket.onopen = () => {
  console.log('WebSocket connection established');
  
  // Authenticate
  socket.send(JSON.stringify({
    type: 'auth',
    api_key: API_KEY
  }));
};

socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Received message:', data);
  
  switch (data.type) {
    case 'auth_success':
      console.log('Authentication successful');
      
      // Subscribe to project updates
      socket.send(JSON.stringify({
        type: 'subscribe',
        channel: 'projects.updates',
        project_id: PROJECT_ID,
        request_id: 'req_project_updates'
      }));
      break;
      
    case 'subscription_success':
      console.log(`Subscribed to ${data.channel}`);
      
      if (data.request_id === 'req_project_updates') {
        projectSubscriptionId = data.subscription_id;
      }
      break;
      
    case 'event':
      if (data.channel === 'projects.updates') {
        handleProjectUpdate(data);
      }
      break;
      
    case 'error':
      console.error(`Error: ${data.message}`);
      break;
  }
};

socket.onerror = (error) => {
  console.error('WebSocket error:', error);
};

socket.onclose = (event) => {
  console.log(`WebSocket connection closed: ${event.code} - ${event.reason}`);
};

// Handle project update events
function handleProjectUpdate(data) {
  const { event, data: eventData } = data;
  
  switch (event) {
    case 'project.updated':
      console.log(`Project updated: ${eventData.name}`);
      updateProjectUI(eventData);
      break;
      
    case 'project.member_added':
      console.log(`New member added: ${eventData.user.name}`);
      updateMembersList(eventData);
      break;
      
    case 'project.deleted':
      console.log(`Project deleted`);
      redirectToProjectsList();
      break;
  }
}

// Clean up function
function cleanup() {
  if (projectSubscriptionId) {
    socket.send(JSON.stringify({
      type: 'unsubscribe',
      subscription_id: projectSubscriptionId
    }));
  }
  
  socket.close();
}

class ChatClient {
  constructor(apiKey, roomId) {
    this.apiKey = apiKey;
    this.roomId = roomId;
    this.socket = null;
    this.subscriptionId = null;
    this.messageCallbacks = [];
    this.userStatusCallbacks = [];
    this.connectionState = 'disconnected';
    
    this.connect();
  }
  
  connect() {
    this.connectionState = 'connecting';
    this.socket = new WebSocket('wss://ws.myappapi.com/v1/');
    
    this.socket.onopen = () => {
      console.log('Chat WebSocket connection established');
      this.connectionState = 'authenticating';
      
      // Authenticate
      this.socket.send(JSON.stringify({
        type: 'auth',
        api_key: this.apiKey
      }));
    };
    
    this.socket.onmessage = (event) => {
      const data = JSON.parse(event.data);
      
      switch (data.type) {
        case 'auth_success':
          this.connectionState = 'authenticated';
          this.subscribeToChat();
          break;
          
        case 'subscription_success':
          if (data.channel === 'chat.messages') {
            this.connectionState = 'connected';
            this.subscriptionId = data.subscription_id;
            this.notifyConnectionStatus(true);
          }
          break;
          
        case 'event':
          if (data.channel === 'chat.messages') {
            if (data.event === 'chat.message_received') {
              this.notifyNewMessage(data.data);
            } else if (data.event === 'chat.user_presence_changed') {
              this.notifyUserStatus(data.data);
            }
          }
          break;
          
        case 'error':
          console.error(`Chat WebSocket error: ${data.message}`);
          this.notifyError(data);
          break;
      }
    };
    
    this.socket.onerror = (error) => {
      console.error('Chat WebSocket error:', error);
      this.connectionState = 'error';
      this.notifyConnectionStatus(false, 'error');
    };
    
    this.socket.onclose = (event) => {
      console.log(`Chat WebSocket closed: ${event.code} - ${event.reason}`);
      this.connectionState = 'disconnected';
      this.notifyConnectionStatus(false, 'closed');
      
      // Attempt to reconnect after delay
      setTimeout(() => {
        if (this.connectionState === 'disconnected') {
          this.connect();
        }
      }, 5000);
    };
  }
  
  subscribeToChat() {
    this.socket.send(JSON.stringify({
      type: 'subscribe',
      channel: 'chat.messages',
      room_id: this.roomId,
      request_id: `chat_${this.roomId}`
    }));
  }
  
  sendMessage(message) {
    if (this.connectionState !== 'connected') {
      throw new Error('Not connected to chat');
    }
    
    // Send message via REST API
    return fetch('https://api.myappapi.com/v1/chats/messages', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-API-Key': this.apiKey
      },
      body: JSON.stringify({
        room_id: this.roomId,
        content: message
      })
    }).then(response => response.json());
  }
  
  onMessage(callback) {
    this.messageCallbacks.push(callback);
    return this;
  }
  
  onUserStatus(callback) {
    this.userStatusCallbacks.push(callback);
    return this;
  }
  
  onConnectionChange(callback) {
    this.connectionCallbacks.push(callback);
    return this;
  }
  
  notifyNewMessage(message) {
    this.messageCallbacks.forEach(callback => callback(message));
  }
  
  notifyUserStatus(status) {
    this.userStatusCallbacks.forEach(callback => callback(status));
  }
  
  notifyConnectionStatus(connected, reason) {
    this.connectionCallbacks.forEach(callback => callback(connected, reason));
  }
  
  notifyError(error) {
    this.errorCallbacks.forEach(callback => callback(error));
  }
  
  disconnect() {
    if (this.subscriptionId) {
      this.socket.send(JSON.stringify({
        type: 'unsubscribe',
        subscription_id: this.subscriptionId
      }));
    }
    
    this.socket.close(1000, 'User disconnected');
    this.connectionState = 'disconnected';
  }
}

// Usage example
const chatClient = new ChatClient('your_api_key_here', 'room_12345');

chatClient
  .onMessage(message => {
    console.log(`New message from ${message.user.name}: ${message.content}`);
    // Add message to UI
    addMessageToUI(message);
  })
  .onUserStatus(status => {
    console.log(`User ${status.user.name} is now ${status.status}`);
    // Update user status in UI
    updateUserStatusUI(status);
  });

// Send a message
document.getElementById('send-button').addEventListener('click', () => {
  const messageInput = document.getElementById('message-input');
  const message = messageInput.value.trim();
  
  if (message) {
    chatClient.sendMessage(message)
      .then(() => {
        messageInput.value = '';
      })
      .catch(error => {
        console.error('Error sending message:', error);
      });
  }
});

// Disconnect when leaving the page
window.addEventListener('beforeunload', () => {
  chatClient.disconnect();
});