Interoperability

Table of Contents

• The UCefViewBridge Object
  • UCefViewBridge API
• C++ to JavaScript
  • Executing JavaScript Directly
  • Event Triggering
• JavaScript -> C++
  • UCefViewBridge.invoke
  • window.cefViewQuery(query)

UCefView provides robust interoperability between the native Unreal Engine context (C++/Blueprint) and the web context (JavaScript). This allows you to call JavaScript from C++ and vice-versa, enabling the creation of powerful hybrid applications.

The UCefViewBridge Object

To facilitate communication, UCefView automatically injects a bridge object into the window object of the web context. This object provides the primary interface for web pages to interact with your Unreal application.

The name of this bridge object can be configured in your project's Cef Settings via the BridgeObjectName field. The default name is UCefViewBridge.

UCefViewBridge API

Method	Description
addEventListener(eventName, listener)	Adds a listener function to be called when a specific event is triggered from C++.
removeEventListener(eventName, listener)	Removes a previously registered event listener.
invoke(methodName, ...args)	Invokes a native C++/Blueprint handler with the specified name and arguments.

C++ to JavaScript

Executing JavaScript Directly

You can execute arbitrary JavaScript code within the context of the WebView from C++.

// Assume you have a pointer to a UCefView widget
UCefView* MyUCefView;
 
// Execute a simple script in the main frame of the browser.
MyUCefView->ExecuteJavascript(
    UCefView::MainFrameID,          // The ID of the frame to execute in. MainFrameID targets the top-level frame.
    TEXT("alert('hello Unreal')"),  // The JavaScript code to execute.
    TEXT("")                        // An optional URL parameter, not typically needed.
);

• UCefView::ExecuteJavascript
• UCefView::ExecuteJavascriptWithResult
• SCefView::ExecuteJavascript
• SCefView::ExecuteJavascriptWithResult

Event Triggering

You can register an event from javascript code and then trigger the event from C++ code or Blueprint.

Register event handler in Javascript

function onLoad() {
  // Add a event listener to handle the event named 'colorChange'
  Window.UCefViewBridge.addEventListener(
    // event name
    "colorChange"   
    // event handler
    function (color) {
      // change the background color
      document.getElementById("main").style.backgroundColor = color;
    }
  );
}

Trigger the event from C++ or Blueprint

UCefView* MyUCefView;
 
// create event
UCefViewEvent* ColorChangeEvent = NewObject<UCefViewEvent>();
// set event name
ColorChangeEvent->Name = TEXT("colorChange");
// set event args with JSON string
ColorChangeEvent->SetArguments(TEXT("[red]"));
// broadcast the event to all frames
MyUCefView->BroadcastEvent(ColorChangeEvent);

• UCefView::TriggerEventForFrame
• UCefView::TriggerEventForMainFrame
• UCefView::BroadcastEvent
• SCefView::TriggerEventForFrame
• SCefView::TriggerEventForMainFrame
• SCefView::BroadcastEvent

JavaScript -> C++

UCefViewBridge.invoke

You can register an invoke handler from C++/Blueprint and then invoke the handler from Javascript.

Register invoke handler in C++/Blueprint

UCLASS()
class UWebClient : public UObject
{
GENERATED_BODY()
 
public:
void InvokeHandler(const int64& InBrowserId,
                    const FCefFrameId& InFrameId,
                    const FString& InMethod,
                    const FString& InArguments)
{
    if (InMethod == "HelloNative") {
    // InMethod: "HelloNative"
    // InArguments: "[1, "2", true]"
    }
}
};
 
// test code
UCefView* MyUCefView = NewObject<UCefView>();
UWebClient* MyWebClient = NewObject<UWebClient>();
 
// bind invoke handler
MyUCefView->OnInvokeMethod.AddDynamic(MyWebClient, &UWebClient::InvokeHandler);

Invoke native handler from Javascript

// invoke C++ code
window.UCefViewBridge.invoke("HelloNative", 1, "2",  true);

window.cefViewQuery(query)

you can register CefViewQuery handler to process the CefViewQuery request and reply with your response.

Register CefViewQuery handler in C++/Blueprint

UCLASS()
class UWebClient : public UObject
{
GENERATED_BODY()
 
public:
void CefViewQueryHanlder(const int64& InBrowserId,     //
                        const FCefFrameId& InFrameId, //
                        UCefViewQuery* InQuery)
{
    // read request data
    FString Request = InQuery->GetRequest();
    // Request: "hello from CefViewQuery"
 
    // reply
    InQuery->ErrorCode = 0;
    InQuery->Response = TEXT("ok");
    InQuery->IsSuccess = true;
    InQuery->Reply();
}
};
 
UCefView* MyUCefView = NewObject<UCefView>();
UWebClient* MyWebClient = NewObject<UWebClient>();
 
// bind CefViewQuery handler
MyUCefView->OnInvokeMethod.AddDynamic(MyWebClient, &UWebClient::CefViewQueryHanlder);

Send CefViewQuery request from Javascript and process the response

var query = {
request: "hello from CefViewQuery",
onSuccess: function (response) {
    alert("Success: " + response);
},
onFailure: function (error_code, error_message) {
    alert("Failure: " + error_message + " (Error Code: " + error_code + ")");
},
};
// send the query
window.cefViewQuery(query);