OddSockets Svelte SDK

Official Svelte SDK with reactive stores and components for OddSockets real-time messaging

npm ready Reactive Stores SvelteKit Ready High Performance JavaScript SDK Core

Overview & Features

The OddSockets Svelte SDK provides reactive stores and components built on top of the JavaScript SDK, offering seamless integration with Svelte's reactive system for automatic UI updates.

Reactive Stores

Automatic UI updates with Svelte's reactive system. Messages, presence, and connection state update automatically.

SvelteKit Ready

Full SSR and hydration support with proper client-side initialization and cleanup.

JavaScript SDK Core

Built on the JavaScript SDK as single source of truth for all WebSocket functionality.

High Performance

Optimized reactive updates with efficient store subscriptions and automatic cleanup.

Pre-built Components

Ready-to-use Svelte components for common real-time messaging patterns.

Automatic Cleanup

Built-in lifecycle management with automatic cleanup on component destroy.

Installation

bash

npm install oddsockets-svelte-sdk

bash

yarn add oddsockets-svelte-sdk

bash

pnpm add oddsockets-svelte-sdk

Quick Start

Basic Chat with Reactive Stores

svelte

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

<!-- Reactive UI updates automatically -->
<div class="chat-container">
  <div class="messages">
    {#each $messages as message}
      <div class="message">
        <strong>{message.data.username}:</strong>
        {message.data.text}
      </div>
    {/each}
  </div>
  
  <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>

Connection Status

svelte