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

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

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

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

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

• CEF 经典N大问题：https://blog.csdn.net/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 初始化完成后被调用，此时我们可以通过