Websocket Messages

Websocket messages are received and sent during a collection process.

Messages Received from API

State message is received on connection and everytime the collection state changes. It is used to update the progress bar and be notified when the collect is finished.

type MessageState = {
    type: 'state';
    state: {
        index: 1; // Number between -2 and 7
        max: 7;
        title = "State title";
        message = "State message";
    }
}

Screenshot message is received when the user needs to login using the video stream. Screenshot messages are sent approximately every 50ms during interactive login (state.index = 2):

type MessageScreenshot = {
    type: 'screenshot';
    screenshot: string;  // Base64 encoded image
    width: number;       // Screenshot width in pixels
    height: number;      // Screenshot height in pixels
}

Oauth2 message is received when the user needs to authenticate using OAuth2. It contains the URL where the user should be redirected to complete the authentication:

type MessageOauth2 = {
    type: 'oauth2';
    url: string;      // The OAuth2 authentication URL
    iframe: boolean;  // Indicates if the OAuth2 URL can be opened in an iframe
}

Messages Sent to API

Twofa message must be sent when state.index = 3. This code must be asked in your frontend.

type MessageTwofa = {
    type: 'twofa';
    twofa: string;  // The 2FA code from the user
}

Click message can be sent when state.index = 2 and at least one screenshot has been received. It simulates a click on the screenshot:

type MessageClick = {
    type: 'click';
    x: number;  // X coordinate as ratio (0-1) of screenshot width
    y: number;  // Y coordinate as ratio (0-1) of screenshot height
}

Keydown message can be sent when state.index = 2 and at least one screenshot has been received. It simulates a keydown event:

type MessageKeydown = {
    type: 'keydown';
    key: string;  // Key name (e.g., 'Enter', 'Backspace', 'A', 'b', '?')
}

Text message can be sent when state.index = 2 and at least one screenshot has been received. It simulates a paste (Ctrl+V) event:

type MessageText = {
    type: 'text';
    text: string;  // The text to input
}

Interactive message can be sent when interactive login is in progress:

type MessageInteractive = {
    type: 'interactive';
    reason: 'open' | 'close' | 'cancel' | 'remove' | 'report';
    instructions: string;
}

• open - User opened the interactive element
• close - User closed the interactive element
• cancel - User cancelled the process
• remove - User removed the interactive element
• report - User reported an issue

Resize message can be sent when the client window is resized:

type MessageResize = {
    type: 'resize';
    width: number;                  // New width of the client window in pixels
    height: number;                 // New height of the client window in pixels
    deviceScaleFactor?: number;     // Optional device scale factor (e.g., for high-DPI displays)
}