在 Cef 中实现 C++ 与 JavaScript 交互场景分析

此文已由作者邓佳佳授权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验

本文主要介绍 CEF 场景中 C++ 和 JavaScript 交互（以下简称 JS Bridge）中的一些重要节点，包括了 C++/JavaScript 的方法注册、方法调用、回调管理。以下是一些重要的参考资料：

• CEF Util 中文翻译资料：https://github.com/fanfeilong/cefutil

• CEF 经典N大问题：https://blog.youkuaiyun.com/weolar/article/details/51994895

• CefV8Value to JSON：https://magpcss.org/ceforum/viewtopic.php?f=7&t=12774

• C++ 和 JS 交互：https://www.smwenku.com/a/5b8afe442b71773b27ca3b11/

现有实现的不足

在制作新的 JS Bridge 之前，团队中已经有将 Cef 整合到项目中的离屏渲染实现，但 C++ 与 JavaScript 交互的代码相对单一，仅实现了一些简单的方法，没有拓展性和统一性。也没有处理一些多 Render 和多 Browser 实例的情况。比如我希望调用一个 C++ 的方法，需要重新在 Render 和 Browser 进程中实现单独的通信代码，这样是非常麻烦的而且容易出错。

期望的样子

因为未来有跨平台的打算，所以侧重点还是往偏前端一些，希望所有界面展示的功能均交由前端来实现。所以首先前端可以很方便的提供接口让 C++ 调用，并且可以很方便的调用一个 C++ 接口并得到适当的回调返回信息。同理 C++ 端也希望能很容易的调用前端的方法或注册方法提供前端调用。它们之间传递数据使用通用的 JSON 格式，在 C++ 端总是以字符串方式解析，而在前端总是以一个 Object 的方式解析。因为 JSON 的拓展性极高，当做桥梁之间传递数据的通道最合适不过了。

前端调用 C++ 方法的流程

Render 进程的 OnWebKitInitialized 接口在 WebKit 初始化完成后被调用，此时我们可以通过 CefRegisterExtension 来注册一个拓展让 WebKit 初始化完成后就执行这部分代码，而这部分代码就完全靠你发挥了，你可以声明一个全局的对象，给该对象实现两个方法来提供前端页面注册方法和调用 Native 的方法，如下所示：

void ClientApp::OnWebKitInitialized() 
{
    /**
     * JavaScript 扩展代码，这里定义一个 NimCefWebFunction 对象提供 call 和 register 方法来让 Web 端触发 CefV8Handler 处理代码
     * param[in] functionName 要调用的 C++ 方法名称
     * param[in] params 调用该方法传递的参数，在前端指定的是一个 Object，但转到 Native 的时候转为了字符串
     * param[in] callback 执行该方法后的回调函数
     * 前端调用示例
     * NimCefWebHelper.call('showMessage', { message: 'Hello C++' }, (arguments) => {
     *    console.log(arguments)
     * })
     */
    std::string extensionCode = R"(
        var NimCefWebInstance = {};
        (() => {
            NimCefWebInstance.call = (functionName, arg1, arg2) => {
                if (typeof arg1 === 'function') {
                    native function call(functionName, arg1);
                    return call(functionName, arg1);
                } else {
                    const jsonString = JSON.stringify(arg1);
                    native function call(functionName,