WebConnect

A realtime datasource that bridges WebConnect messages into the datasource API.

Import

import { WebConnect } from "@schukai/monster/source/data/datasource/server/webconnect.mjs";

Source

View source code

Package

@schukai/monster

Since

3.1.0

WebConnect bridges realtime socket traffic into the datasource API. Use it when state should be fed by streamed messages instead of classic request/response polling.

It fits dashboards, collaborative tools and push-driven interfaces where reads and writes still need to follow the familiar datasource contract instead of introducing a separate socket-specific state layer.

Incoming messages are normalized through the same server mapping rules as other transports, while outgoing writes can still be prepared through transformers and sheathing before they are sent.

Configure A Realtime Datasource Bridge

import { WebConnect } from "@schukai/monster/source/data/datasource/server/webconnect.mjs";

const output = document.getElementById("server-webconnect-output");

document.getElementById("server-webconnect-run").addEventListener("click", () => {
    const datasource = new WebConnect({
        url: "wss://example.invalid/events",
        connection: {
            reconnect: {
                enabled: true,
                attempts: 3,
                timeout: 1500,
            },
        },
    });

    output.textContent = JSON.stringify(
        {
            url: datasource.getOption("url"),
            reconnectEnabled: datasource.getOption("connection.reconnect.enabled"),
            reconnectAttempts: datasource.getOption("connection.reconnect.attempts"),
        },
        null,
        2,
    );
});

Open in playground

Read Queued Realtime Messages Through The Datasource API

import { WebConnect } from "@schukai/monster/source/data/datasource/server/webconnect.mjs";

const datasource = new WebConnect({
    url: "wss://example.invalid/events",
});

const output = document.getElementById("server-webconnect-queue-output");

document.getElementById("server-webconnect-queue-run").addEventListener("click", () => {
    output.textContent = JSON.stringify(
        {
            url: datasource.getOption("url"),
            readContract: "read() consumes queued Message instances from the underlying connection",
        },
        null,
        2,
    );
});

Open in playground

Apply Read Mapping To Incoming Socket Payloads

import { WebConnect } from "@schukai/monster/source/data/datasource/server/webconnect.mjs";

const datasource = new WebConnect({
    url: "wss://example.invalid/events",
    read: {
        mapping: {
            transformer: "call:normalize",
            callbacks: {
                normalize(payload) {
                    return {
                        id: payload.meta.id,
                        phase: payload.data.phase,
                    };
                },
            },
        },
    },
});

const output = document.getElementById("server-webconnect-transform-output");

document.getElementById("server-webconnect-transform-run").addEventListener("click", () => {
    output.textContent = JSON.stringify(
        datasource.transformServerPayload({
            meta: {
                id: "evt-9",
            },
            data: {
                phase: "synced",
            },
        }),
        null,
        2,
    );
});

Open in playground

Prepare Outgoing Socket Writes With Sheathing Options

import { WebConnect } from "@schukai/monster/source/data/datasource/server/webconnect.mjs";

const datasource = new WebConnect({
    url: "wss://example.invalid/events",
    write: {
        sheathing: {
            object: {
                type: "state:update",
            },
            path: "payload",
        },
    },
});

datasource.set({
    id: "task-7",
    state: "done",
});

const output = document.getElementById("server-webconnect-write-output");

document.getElementById("server-webconnect-write-run").addEventListener("click", () => {
    output.textContent = JSON.stringify(
        datasource.prepareServerPayload(datasource.get()),
        null,
        2,
    );
});

Open in playground

Exported

WebConnect

Derived from

Server

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the Server.

Option

Type

Default

Description

url

string

undefined

source that you wish to fetch.

object

connection

connection.timeout

object

5000

the connection.

connection.reconnect.timeout

number

1000

The timeout in milliseconds for the reconnect.

connection.reconnect.attempts

number

The maximum number of reconnects.

connection.reconnect.enabled

boolean

false

If the reconnect is enabled.

write

object

{}

write.mapping

object

undefined

the mapping is applied before writing.

write.mapping.transformer

string

undefined

Transformer to select the appropriate entries

write.mapping.callback

monster.data.datasource~examplecallback[]

undefined

with the help of the callback, the structures can be adjusted before writing.

object

write.sheathing

write.sheathing.object

object

undefined

Object to be wrapped

write.sheathing.path

string

undefined

Path to the data

read

object

{}

read.path

string

undefined

Path to data

read.mapping

object

undefined

the mapping is applied after reading.

read.mapping.transformer

string

undefined

Transformer to select the appropriate entries

read.mapping.callback

monster.data.datasource~examplecallback[]

undefined

with the help of the callback, the structures can be adjusted after reading.

Properties

The Properties listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Properties from these parent classes. If you cannot find a specific Properties in this list, we recommend consulting the documentation of the Server.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the Server.

Constructor

constructor([options])

Parameters

[options] {object}: options contains definitions for the datasource.

Behavioral methods

close()

Returns

{Promise}

This method closes the connection.

State query methods

isConnected()

Returns

{boolean}

Structural methods

getClone()

Returns

{RestAPI}

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

Other methods

connect()

Returns

{Promise}

read()

Returns

{Promise}

write()

Returns

{Promise}

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.