Svelte SDK Examples

<script>
  import { createChannelStore } from 'oddsockets-svelte-sdk/stores';
  import { onMount } from 'svelte';
  
  const { messages, presence, publish, subscribe } = createChannelStore('chat', {
    apiKey: 'ak_your_api_key_here',
    userId: 'user123'
  });
  
  let messageText = '';
  
  onMount(() => {
    subscribe();
  });
  
  async function sendMessage() {
    if (messageText.trim()) {
      await publish({
        type: 'chat',
        text: messageText,
        username: 'John Doe'
      });
      messageText = '';
    }
  }
</script>

<div class="chat-container">
  {#each $messages as message}
    <div class="message">
      <strong>{message.data.username}:</strong>
      {message.data.text}
    </div>
  {/each}
  
  <div class="presence">
    Online: {$presence.length} users
  </div>
  
  <input 
    bind:value={messageText} 
    placeholder="Type a message..."
    on:keydown={(e) => e.key === 'Enter' && sendMessage()}
  />
  <button on:click={sendMessage}>Send</button>
</div>

<script>
  import { createConnectionStore } from 'oddsockets-svelte-sdk/stores';
  import { onMount } from 'svelte';
  
  const { 
    connectionState, 
    isConnected, 
    reconnectAttempts,
    connectionDurationFormatted,
    connect,
    disconnect
  } = createConnectionStore({
    apiKey: 'ak_your_api_key_here'
  });
  
  onMount(() => {
    connect();
  });
</script>

<div class="status-panel">
  <div class="status-indicator" class:connected={$isConnected}>
    {$connectionState}
  </div>
  
  {#if $reconnectAttempts > 0}
    <div class="reconnect-info">
      Reconnection attempts: {$reconnectAttempts}
    </div>
  {/if}
  
  {#if $isConnected}
    <div class="uptime">
      Connected for: {$connectionDurationFormatted}
    </div>
  {/if}
  
  <button on:click={$isConnected ? disconnect : connect}>
    {$isConnected ? 'Disconnect' : 'Connect'}
  </button>
</div>

<script>
  import { createMultiChannelStore } from 'oddsockets-svelte-sdk/stores';
  import { onMount } from 'svelte';
  
  const { 
    channelStores,
    subscribeAll,
    publishToChannel,
    totalPresence
  } = createMultiChannelStore(['chat', 'notifications', 'updates'], {
    apiKey: 'ak_your_api_key_here'
  });
  
  onMount(() => {
    subscribeAll();
  });
  
  function sendToChat(message) {
    publishToChannel('chat', message);
  }
</script>

<div class="multi-channel-app">
  <div class="channel-tabs">
    {#each Object.keys(channelStores) as channelName}
      <button class="tab">
        {channelName}
        <span class="count">
          {$channelStores[channelName].messageCount}
        </span>
      </button>
    {/each}
  </div>
  
  <div class="total-presence">
    Total online: {$totalPresence}
  </div>
</div>

<!-- src/routes/chat/+page.svelte -->
<script>
  import { createChannelStore } from 'oddsockets-svelte-sdk/stores';
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';
  
  let channelStore;
  let messages = [];
  let presence = [];
  
  onMount(() => {
    if (browser) {
      channelStore = createChannelStore('chat', {
        apiKey: 'ak_your_api_key_here'
      });
      
      // Subscribe to reactive stores
      channelStore.messages.subscribe(value => {
        messages = value;
      });
      
      channelStore.presence.subscribe(value => {
        presence = value;
      });
      
      channelStore.subscribe();
    }
  });
</script>

<svelte:head>
  <title>Chat - SvelteKit App</title>
</svelte:head>

<div class="sveltekit-chat">
  {#if browser}
    <div class="messages">
      {#each messages as message}
        <div class="message">{message.data.text}</div>
      {/each}
    </div>
    
    <div class="presence">
      Online: {presence.length}
    </div>
  {:else}
    <div class="loading">Loading chat...</div>
  {/if}
</div>

<script>
  import { createPresenceStore } from 'oddsockets-svelte-sdk/stores';
  import { onMount } from 'svelte';
  
  const { 
    presence, 
    presenceCount, 
    subscribe,
    updatePresence
  } = createPresenceStore('lobby', {
    apiKey: 'ak_your_api_key_here',
    userId: 'user123'
  });
  
  onMount(() => {
    subscribe();
    
    // Update presence with user info
    updatePresence({
      status: 'online',
      avatar: '/avatar.jpg',
      lastSeen: new Date().toISOString()
    });
  });
</script>

<div class="presence-panel">
  <h3>Online Users ({$presenceCount})</h3>
  
  <div class="user-list">
    {#each $presence as user}
      <div class="user-item">
        <img src={user.avatar} alt={user.userId} />
        <span class="username">{user.userId}</span>
        <span class="status" class:online={user.status === 'online'}>
          {user.status}
        </span>
      </div>
    {/each}
  </div>
</div>

<script>
  import { createAnalyticsStore } from 'oddsockets-svelte-sdk/stores';
  import { onMount } from 'svelte';
  
  const { 
    messageStats,
    connectionStats,
    errorStats
  } = createAnalyticsStore({
    apiKey: 'ak_your_api_key_here'
  });
  
  onMount(() => {
    // Analytics store automatically tracks metrics
  });
</script>

<div class="analytics-dashboard">
  <div class="metric-card">
    <h3>Messages</h3>
    <div class="metric-value">
      {$messageStats.totalMessages}
    </div>
    <div class="metric-rate">
      {$messageStats.messagesPerSecond}/sec
    </div>
  </div>
  
  <div class="metric-card">
    <h3>Connections</h3>
    <div class="metric-value">
      {$connectionStats.totalConnections}
    </div>
    <div class="metric-uptime">
      Uptime: {Math.floor($connectionStats.uptime)}s
    </div>
  </div>
  
  <div class="metric-card">
    <h3>Errors</h3>
    <div class="metric-value">
      {$errorStats.totalErrors}
    </div>
    <div class="metric-rate">
      Rate: {$errorStats.errorRate.toFixed(2)}/sec
    </div>
  </div>
</div>