Non-react versions of AppSteamer.sendMessage() and AppStreamer.setup()?

[chuckhan]

I’m looking to adapt my non-react web app to interact with a livestream. Are there any libraries that let me do that?

Thanks in advance, Chuck

[chuckhan]

I guess this is a more general Javascript function/React function interaction issue. I will post example solutions if I can develop them.

[chuckhan]

To receive a message from the view and process it with Javascript/Typescript, simply replace or add a line after the console.log() message in the appropriate place. For example, if you want to process the picking of an element:

// the snippet in Window.tsx:
...
        else if (event.event_type === "stageSelectionChanged") {
            console.log(event.payload.prims.constructor.name);
            if (!Array.isArray(event.payload.prims) || event.payload.prims.length === 0) {
                console.log('Kit App communicates an empty stage selection.');

                MY_MODULE.kitStageSelectionChanged(null);
                
                this.setState({ selectedUSDPrims: new Set<USDPrimType>() });
            }
            else {
                console.log('Kit App communicates selection of a USDPrimType: ' + event.payload.prims.map((obj: any) => obj).join(', '));

                MY_MODULE.kitStageSelectionChanged(event.payload.prims.map((obj: any) => obj).join(', '));

                const usdPrimsToSelect: Set<USDPrimType> = new Set<USDPrimType>();

                event.payload.prims.forEach((obj: any) => {
                    const result = this._findUSDPrimByPath(obj);
                    if (result !== null) {
                        usdPrimsToSelect.add(result);
                    }
                });
                this.setState({ selectedUSDPrims: usdPrimsToSelect });
            }
        }
...

// the function in my module:
// TODO...
export function kitStageSelectionChanged(element) {
  console.log("kitStageSelectionChanged: " + (element == null ? "empty" : element))
}

To send a message to the view, you simply have to send the correct message from somewhere in your codebase to a newly-create exported Javascript/Typescript function in AppStream.tsx. For example, here’s how you load a new USD file:

export function facilityPicker(usdUrl) {
    const message: AppStreamMessageType = {
        event_type: "openStageRequest",
        payload: {
            url: usdUrl
        }
    };

    AppStream.sendMessage(JSON.stringify(message));
}```

[Richard3D]

Let me find out and get back to you

[chuckhan]

I answered my own question :-)

[Richard3D]

Oh ok good !