RegisterJSListener

Name: Prisma UI
Rating: 5 (1 reviews)
Author: StarkMP

Overview

Registers a C++ function as an event handler for a JavaScript event within a PrismaView. This method enables bidirectional communication between your web UI and SKSE plugin, allowing JavaScript to call C++ functions and pass data back to the game.

Syntax

void RegisterJSListener(
    PrismaView view,
    const char* functionName,
    JSListenerCallback callback
);

Parameters

`view` (required)

Type: PrismaView
Description: The PrismaView instance in which the handler is registered

`functionName` (required)

Type: const char*
Description: The name of the JavaScript function to which the C++ function will be bound
Note: This becomes a global function accessible via window.functionName

`callback` (required)

Type: JSListenerCallback
Description: The C++ callback function that will be executed when the corresponding JavaScript function is called
Parameters: The callback’s string argument will contain the data passed from JavaScript

Return Value

This method returns void.

Usage Examples

// Register a simple event handler
PrismaUI->RegisterJSListener(view, "sendDataToSKSE", [](const char* data) -> void {
    SKSE::log::info("Received data from JS: {}", data);
});

// JavaScript - call the registered function
window.sendDataToSKSE("Hello from JavaScript!");

// Register handler for player actions
PrismaUI->RegisterJSListener(view, "onPlayerAction", [](const char* data) -> void {
    std::string action = data;

    if (action == "heal") {
        RestorePlayerHealth();
    } else if (action == "cast_spell") {
        CastPlayerSpell();
    }

    SKSE::log::info("Player action executed: {}", data);
});

// JavaScript - trigger player actions
document.getElementById('heal-button').addEventListener('click', () => {
    window.onPlayerAction("heal");
});

document.getElementById('spell-button').addEventListener('click', () => {
    window.onPlayerAction("cast_spell");
});

#include <nlohmann/json.hpp>
using JSON = nlohmann::json;

// Register handler for complex data
PrismaUI->RegisterJSListener(view, "updateSettings", [](const char* data) -> void {
    try {
        JSON settings = JSON::parse(data);

        bool enableSound = settings["enableSound"];
        int volume = settings["volume"];
        std::string theme = settings["theme"];

        // Apply settings to game
        SetSoundEnabled(enableSound);
        SetVolume(volume);
        SetTheme(theme);

        SKSE::log::info("Settings updated successfully");
    } catch (const std::exception& e) {
        SKSE::log::error("Failed to parse settings: {}", e.what());
    }
});

// JavaScript - send complex data as JSON
const settings = {
    enableSound: true,
    volume: 75,
    theme: "dark"
};

window.updateSettings(JSON.stringify(settings));

Best Practices

Data Validation: Always validate incoming data from JavaScript
Error Handling: Use try-catch blocks when parsing complex data
Function Naming: Use descriptive names for your JavaScript functions
Single Responsibility: Keep each listener focused on a specific task