Getting Started with Stream Sync Engage

Stream Sync Engage (SSE) makes it easy to add real-time, intelligent notifications to your application. This guide will walk you through the basics of integrating SSE and sending your first notification.

What You’ll Build

By the end of this tutorial, you’ll have:

A working SSE client integrated into your application
The ability to receive real-time notifications
An understanding of how to handle both user-facing and functional events

Prerequisites

Before you begin, make sure you have:

Node.js 16+ installed
Basic familiarity with TypeScript/JavaScript
An SSE API key (contact us for access)

Installation

Install the Stream Sync Engage client library via npm:

npm install @streamsyncengage/client

Or with yarn:

yarn add @streamsyncengage/client

Quick Start

1. Initialize the Client

Create a new SSE client instance with your endpoint and authentication token:

import { SSEClient } from '@streamsyncengage/client';

const client = new SSEClient({
  endpoint: 'wss://api.streamsyncengage.com',
  token: 'your-api-token-here'
});

2. Listen for Notifications

Set up event listeners to handle incoming notifications:

// Listen for user-facing notifications
client.on('notification', (event) => {
  console.log('New notification:', event.message);

  // Display notification to user
  showNotification(event.message, event.title);

  // Play sound if specified
  if (event.audio) {
    playSound(event.audio);
  }

  // Trigger haptic feedback
  if (event.haptic) {
    vibrate(event.haptic);
  }
});

3. Handle Functional Events

Functional events let you control app behavior remotely:

// Listen for functional events
client.on('functional', (event) => {
  if (event.type === 'feature-toggle') {
    // Toggle a feature flag
    toggleFeature(event.featureName, event.enabled);
  }

  if (event.type === 'config-update') {
    // Update app configuration
    updateConfig(event.config);
  }
});

4. Connect to the Server

Establish the connection to start receiving events:

await client.connect();
console.log('Connected to Stream Sync Engage!');

Handling Connection States

Monitor connection state changes to provide feedback to users:

client.on('connected', () => {
  console.log('Connected to SSE');
  updateConnectionStatus('online');
});

client.on('disconnected', () => {
  console.log('Disconnected from SSE');
  updateConnectionStatus('offline');
});

client.on('reconnecting', () => {
  console.log('Reconnecting to SSE...');
  updateConnectionStatus('reconnecting');
});

Offline Recovery

SSE automatically handles offline scenarios. When a client reconnects after being offline, missed events are automatically delivered:

client.on('sync', (events) => {
  console.log(`Received ${events.length} missed events`);

  // Process missed events
  events.forEach(event => {
    processEvent(event);
  });
});

User Segmentation

Target specific users or groups with segmented events:

// When initializing the client, specify user segments
const client = new SSEClient({
  endpoint: 'wss://api.streamsyncengage.com',
  token: 'your-api-token-here',
  segments: ['premium-users', 'beta-testers']
});

Best Practices

1. Handle Errors Gracefully

Always implement error handling:

client.on('error', (error) => {
  console.error('SSE Error:', error);
  // Log to your error tracking service
  logError(error);
});

2. Clean Up on Unmount

Disconnect the client when your component unmounts:

// React example
useEffect(() => {
  client.connect();

  return () => {
    client.disconnect();
  };
}, []);

3. Implement Rate Limiting

Avoid overwhelming users with too many notifications:

const notificationQueue = [];
let lastNotification = 0;
const MIN_INTERVAL = 3000; // 3 seconds

client.on('notification', (event) => {
  const now = Date.now();

  if (now - lastNotification < MIN_INTERVAL) {
    // Queue for later
    notificationQueue.push(event);
  } else {
    showNotification(event);
    lastNotification = now;
  }
});

Next Steps

Now that you have SSE integrated, explore these advanced features:

AI-Powered Routing: Learn how to use AI agents to intelligently route notifications
Custom Event Types: Create your own event types for specific use cases
Analytics Integration: Track notification delivery and engagement
Advanced Targeting: Use complex segmentation rules for precise targeting

Need Help?

Check out our API Reference for detailed documentation
Join our Community Forum to ask questions
Contact support@streamsyncengage.com for assistance

Complete Example

Here’s a complete example putting it all together:

import { SSEClient } from '@streamsyncengage/client';

// Initialize client
const client = new SSEClient({
  endpoint: 'wss://api.streamsyncengage.com',
  token: process.env.SSE_API_TOKEN,
  segments: ['premium-users']
});

// User-facing notifications
client.on('notification', (event) => {
  const notification = new Notification(event.title, {
    body: event.message,
    icon: event.icon,
    badge: event.badge
  });

  if (event.audio) {
    new Audio(event.audio).play();
  }
});

// Functional events
client.on('functional', (event) => {
  switch (event.type) {
    case 'feature-toggle':
      featureFlags.set(event.featureName, event.enabled);
      break;
    case 'config-update':
      appConfig.update(event.config);
      break;
  }
});

// Connection management
client.on('connected', () => console.log('✓ Connected'));
client.on('disconnected', () => console.log('✗ Disconnected'));
client.on('error', (err) => console.error('Error:', err));

// Offline sync
client.on('sync', (events) => {
  console.log(`Synced ${events.length} missed events`);
});

// Connect
await client.connect();

You’re now ready to build real-time, intelligent engagement into your application with Stream Sync Engage!

Tagged With

#getting-started #integration #real-time #notifications #typescript