ConnectHub Web SDK v3.2.0

The official ConnectHub JavaScript SDK for building modern, interactive social features directly into your web applications. Supports React, Vue, Svelte, and vanilla JS.

💡
Prerequisites

You need a ConnectHub Developer account and an active project with API credentials. Generate your keys in the Dashboard → Settings → API Keys.

Installation

Install the SDK via your preferred package manager:

npm
# npm npm install @connecthub/web-sdk # yarn yarn add @connecthub/web-sdk # pnpm pm install @connecthub/web-sdk

CDN Usage: For quick prototypes without a build step:

html
<script src="https://cdn.connecthub.dev/sdk/v3/connecthub.min.js" ></script>

Quick Start

Initialize the SDK in your application entry point:

javascript
import ConnectHub from '@connecthub/web-sdk'; // Initialize with your project credentials const hub = new ConnectHub({ clientId: 'your_client_id', environment: 'production', // or 'sandbox' debug: false }); // Listen for ready state hub.on('ready', () => { console.log('ConnectHub SDK initialized successfully'); });

Configuration Options

Option Type Default Description
clientId string Required Your unique project identifier from the dashboard.
environment string 'sandbox' Target environment. Use 'production' for live apps.
region string 'auto' API region endpoint. 'auto' detects closest edge.
timeout number 10000 Request timeout in milliseconds.
retryAttempts number 3 Automatic retry count for failed network requests.

Authentication

The SDK provides secure, OAuth2-compliant authentication flows with automatic token refresh:

javascript
// Redirect to ConnectHub hosted login await hub.auth.login({ provider: 'oauth2', redirectUri: 'https://yourapp.com/callback', scope: ['read:profile', 'write:posts', 'send:messages'] }); // Get current user session const user = await hub.auth.getSession(); console.log(user.id, user.username); // 'usr_8x92ka', '@devuser' // Handle token refresh automatically hub.auth.on('token:refresh', () => { console.log('Session renewed'); });
⚠️
Security Note

Never expose your clientSecret in client-side code. The Web SDK uses PKCE flow and never requires server-side secrets for authentication.

Feed & Content

Render personalized feeds with infinite scroll and real-time updates:

javascript
// Fetch user's main feed const feed = await hub.feed.getPosts({ type: 'following', // 'global', 'trending', 'saved' limit: 20, cursor: undefined // pagination token}); // Subscribe to real-time feed updates const subscription = hub.feed.subscribe('following', (updates) => { updates.forEach(post => { renderPost(post); }); }); // Create a new post with media const newPost = await hub.feed.create({ content: 'Building amazing things with ConnectHub! 🚀', media: [fileInput.files[0]], tags: ['dev', 'web3'] });

Event System

The SDK uses a robust EventEmitter pattern for lifecycle and state changes:

javascript
const events = [ 'ready', // SDK fully initialized 'auth:login', // User authenticated 'auth:logout', // Session cleared 'feed:updated', // New content available 'messaging:incoming',// New message received 'error' // SDK-level error ]; hub.on('messaging:incoming', (msg) => { if (msg.type === 'typing') showTypingIndicator(msg.sender); else appendMessage(msg); });

Best Practices

✅
Performance Optimization

Use hub.ui.render() for virtualized lists when displaying >100 items. Enable cache: true in fetch calls to reduce network overhead. Always wrap SDK calls in error boundaries.

FAQ & Troubleshooting

Why am I getting 401 Unauthorized?

This usually means your session token has expired or was invalidated. Call hub.auth.refresh() or trigger a re-login. Check that your redirectUri matches the one configured in the dashboard.

How do I debug SDK network requests?

Set debug: true during initialization. The SDK will log all outbound requests, responses, and state changes to the browser console with [ConnectHub] prefixes.

Does the SDK support SSR/Next.js?

Yes, but the SDK must only be instantiated on the client side. Wrap initialization in useEffect or if (typeof window !== 'undefined') guards to avoid hydration mismatches.

← Back to Installation Next: Real-time Messaging →