Interoperability

Table of Contents

• UCefViewBridge
  • addEventListener
  • removeEventListener
  • invoke
• CefViewQuery
  • cefViewQuery(query)
  • cefViewQueryCancel
• C++ -> JavaScript
  • Execute Javascript
  • Event Triggering
• JavaScript -> C++
  • UCefViewBridge.invoke
  • window.cefViewQuery(query)

UCefView provides the capabilities of interoperability between native context and web context, thus the developer can call Javascript from C++ code easily, vice versa. This allows you to create hybrid applications that combine the power of web technologies with the capabilities of native C++ code.

UCefViewBridge

UCefView inserts a bridge object into the web context displayed in all the frames and browsers managed by UCefView. The bridge object provides methods for communicating with native code. The bridge object is mounted at window object, and the object name could be configured through the UCefSettings::BridgeObjectName field. The default name is UCefViewBridge

Members	Descriptions
window.UCefViewBridge.addEventListener(name, listener)	Adds a listener for the event with specified name
window.UCefViewBridge.removeEventListener(name, listener)	Removes the listener for the event with specified name
window.UCefViewBridge.invoke(name, ...args)	Invokes a native method with the specified name and arguments

addEventListener

window.UCefViewBridge.addEventListener(name, listener)

Adds a listener for the event with specified name

• name The event name
• listener The listener callback function

removeEventListener

window.UCefViewBridge.removeEventListener(name, listener)

Removes the listener for the event with specified name

• name The event name
• listener The listener callback function

invoke

window.UCefViewBridge.invoke(name, ...args)

Invokes a native method with the specified name and arguments

• name The method name
• ..args The arguments for the method

Note

The Javascript method invoke(name, ...args) is ASYNCHRONOUS operation, that means the calling from Javascript returns immediately regardless the execution of C++ code.

CefViewQuery

UCefView added some extra methods to the window object for all browsers frames, with these methods you can perform communication between native and web context

Members	Descriptions
window.cefViewQuery(query)	Sends a cef query request to the native context
window.cefViewQueryCancel(id)	Cancels the query request with the specified id

cefViewQuery(query)

window.cefViewQuery(query)

Sends a cef query request to the native context

• query The query object
• return The query object

cefViewQueryCancel

window.cefViewQueryCancel(id)

Cancels the query request with the specified id

• id The query id

C++ -> JavaScript

Execute Javascript

UCefView* MyUCefView;
 
// executes the script code in main frame
MyUCefView->ExecuteJavascript(
    UCefView::MainFrameID,          //
    TEXT("alert('hello Unreal')"),  //
    TEXT("")                        //
);

• 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);