Skip to main content

​
Events

​
Event Types

type ReactorEvent =
  | "statusChanged"
  | "waitingInfoChanged"
  | "newMessage"
  | "fps"
  | "streamChanged"
  | "error";

​
Event Reference

​
statusChanged

Fired when the connection status changes. Payload: ReactorStatus Example: 
reactor.on("statusChanged", (status: ReactorStatus) => {
  console.log("New status:", status);
});

​
waitingInfoChanged

Fired when queue information updates while in waiting state. Payload: ReactorWaitingInfo Example: 
reactor.on("waitingInfoChanged", (info: ReactorWaitingInfo) => {
  console.log(`Queue position: ${info.position}`);
});

​
newMessage

Fired when a message is received from the model. These are events that are emitted by a model, if the model supports them. Payload: any (application-specific data) Example: 
reactor.on("newMessage", (message: any) => {
  console.log("Received message:", message);
});

​
streamChanged

Fired when the video stream changes (starts, stops, or updates). Use it to attach the video stream to a video element. Payload: MediaStreamTrack | null Example: 
reactor.on("streamChanged", (videoTrack) => {
  const videoElement = document.getElementById("video");
  if (videoTrack) {
    videoTrack.attach(videoElement);
  } else {
    videoElement.srcObject = null;
  }
});

​
error

Fired when an error occurs. Payload: ReactorError Example: 
reactor.on("error", (error: ReactorError) => {
  console.error(`Error from ${error.component}: ${error.message}`);
  
  if (error.recoverable && error.retryAfter) {
    // Implement retry logic
    setTimeout(() => {
      reactor.connect();
    }, error.retryAfter * 1000);
  }
});

​
Complete Example

Here’s how to listen to all events: 
import { Reactor } from "@reactor-team/js-sdk";

const reactor = new Reactor({
  insecureApiKey: process.env.REACTOR_API_KEY!,
  modelName: "matrix-2"
});

// Status changes
reactor.on("statusChanged", (status) => {
  console.log("Status:", status);
});

// Queue updates
reactor.on("waitingInfoChanged", (info) => {
  if (info.position) {
    console.log("Queue position:", info.position);
  }
});

// Messages from model
reactor.on("newMessage", (message) => {
  console.log("Message:", message);
});

// Stream changes
reactor.on("streamChanged", (track) => {
  const video = document.getElementById("video") as HTMLVideoElement;
  if (track) {
    track.attach(video);
  }
});

// Errors
reactor.on("error", (error) => {
  console.error("Error:", error);
});

// Connect
await reactor.connect();
⌘I