Stream Chat JavaScript SDK

The extension works by injecting simulator.js into the active tab's main world using chrome.scripting.executeScript({ world: 'MAIN' }). This allows the simulator to access the page's window and React tree.

Simulation Logic

• User Pool: Builds a pool of fake users to simulate multi-user activity.
• Event Generation:
  • Generates message.new events with varied text (3–50 words, emojis, URLs, line breaks) to force realistic layout work.
  • Generates reaction.new events targeting the newly created messages. It pre-applies latest_reactions, reaction_counts, reaction_scores, and reaction_groups to the event.message so channel_state.addReaction functions correctly.
• Routing: Each event is routed through client.handleEvent({ data: jsonString }) to exercise the cost of JSON.parse on the WebSocket frame.
• Pacing: Events are dispatched based on the ratePerSec setting, or all at once in a single requestAnimationFrame tick if the rate is 0.

Since version 9.0.0, the SDK uses TypeScript module augmentation instead of Generics to allow developers to add custom properties to Stream entities (like CustomMessageData or CustomUserData). This provides full type safety and code-completion for custom fields in your application.

To implement this:

1. Create a .d.ts declaration file.
2. Import stream-chat.
3. Use declare module 'stream-chat' to extend the relevant interfaces.
4. Ensure the declaration file is loaded by your TypeScript configuration.

// stream-custom-data.d.ts
import 'stream-chat';

declare module 'stream-chat' {
  interface CustomMessageData {
    custom_property?: number;
  }
  interface CustomUserData {
    profile_picture?: string;
  }
}

// index.ts
// Now 'profile_picture' and 'custom_property' are type-safe and autocompleted
await client.partialUpdateUser({
  id: 'vishal-1',
  set: { profile_picture: 'https://random.picture/1.jpg' },
});

const { message } = await channel.sendMessage({
  text: 'This is another test message',
  custom_property: 255,
});

You can provide a custom logger function in the StreamChat.getInstance options to intercept and handle log messages for debugging. This is useful for routing logs to specific tools like console.log, reactotron, or other logging services.

Non-server client (Browser/Mobile)

When initializing the client in a client-side environment, pass the logger function within the options object:

const client = StreamChat.getInstance('api_key', {
  logger: (logLevel, message, extraData) => {
    console.log(message); 
  },
});

Server side client (Node.js)

When initializing the client on a server, you must provide the secret as the second argument, and the logger function is passed within the options object:

const client = StreamChat.getInstance(
  'api_key',
  'secret',
  {
    logger: (logLevel, message, extraData) => {
      console.log(message);
    }
  }
);

Once the extension is loaded, follow these steps to run a performance test:

1. Navigate to a page where a Stream Chat Channel is mounted.
2. Click the Burst Simulator icon in your browser toolbar. The status should show Ready · <cid> · ….
3. Configure the following parameters:
   • Total events: Number of synthetic events to dispatch (default 1000).
   • Rate per second: Pacing of events; set to 0 to fire all events in a single tick (useful for testing single long tasks).
   • Reactions ratio: A value between 0 and 1 representing the fraction of events that are reactions (default 0.25).
   • User pool size: Number of distinct fake users to rotate through (default 10).
4. Click Fire burst. The status line will show live progress (e.g., Running · 230 / 1000 · 76 eps · 3s).
5. To abort a run, click the red Stop button.

Note: Closing the popup does not stop the simulation; it merely detaches the UI. Reopening the popup will re-attach to the running process.

Initialize a new StreamChat client using your API Key and API Secret. For server-side (Node.js) use, it is recommended to set disableCache: true to avoid issues with local caching in a backend environment.

Basic workflow:

1. Initialize the client.
2. Upsert a user using upsertUser.
3. Create a channel using client.channel(type, id, data) and call channel.create().
4. Send messages with channel.sendMessage({ text: '...' }).
5. Send reactions with channel.sendReaction(messageId, { type, user }).

import { StreamChat } from 'stream-chat';

const client = new StreamChat('API_KEY', 'API_SECRET', {
  disableCache: true, // recommended option for server-side use
});

// create a user
await client.upsertUser({
  id: 'vishal-1',
  name: 'Vishal',
});

// create a channel
const channel = client.channel('messaging', 'test-channel', {
  created_by_id: 'vishal-1',
});
await channel.create();

// send message
const { message } = await channel.sendMessage({ text: 'This is a test message' });

// send reaction
await channel.sendReaction(message.id, { type: 'love', user: { id: 'vishal-1' } });