JS 与 C++ 双向通信实战：基于 WebHostViewListener 的消息处理机制

关注

原创最新推荐文章于 2026-06-12 16:34:24 发布 1k 阅读 AI 写同款· GEO 优化 ›

JS与底层C++通讯方式 JS与底层C++通讯方式 WebAssembly与Emscripten 1. Emscripten 为了在浏览器中运行C/C++程序，从1995年起，许多知名项目相继开发。除尝试直接运行本地C++代码外，也有技术人员另辟蹊径，将其他语言直接转译为JavaScript后运行，Emscripten就是其中一个，它利用LLVM编译器前端编译C++代码，生成LLVM特有的跨平台中间语言代码，最终再将LLVM跨平台中间语言代码转译为JavaScript的子集WebAssembly。这样C/C++程序经过编译后不仅阅读详情

前言

在现代浏览器和桌面应用开发中，WebView 嵌入已经成为一种非常常见的 UI 技术方案。无论是基于 Chromium 的 CEF（Chromium Embedded Framework）、Qt WebEngine，还是自研浏览器内核，嵌入 WebView 都能带来极高的灵活性与跨平台 UI 开发能力。

不过，当 HTML/JavaScript 需要与 C++ 后端交互时，如何实现 高效、安全、可维护 的双向通信机制，就成了一个必须认真设计的问题。本文将结合 WebHostViewListener 机制，从源码角度深入剖析 HTML/JS 与 C++ 的消息传递、事件处理、数据序列化等关键流程，并对比常见的 JSBridge、JavaScriptCore 等方案，总结优缺点与优化建议。

一、为什么需要 WebView 与 C++ 双向通信

嵌入 WebView 的目的不仅仅是“显示网页”，而是利用 HTML/CSS/JS 的灵活 UI 构建能力，与 C++ 的高性能、底层资源访问能力结合。

典型的交互场景包括：

HTML/JS 调用 C++ 功能
- 获取本地文件列表
- 调用系统 API（如打开文件、读取剪贴板）
- 访问数据库或加解密模块
- 发送网络请求并处理复杂协议
C++ 回调 HTML/JS
- 通知前端状态变化（如下载进度、后台任务完成）
- 推送实时数据（如 WebSocket 消息）
- 动态修改前端 UI（更新 DOM 或触发 JS 方法）

如果没有合理的通信机制，前后端之间会出现：

数据结构不统一
消息无法安全传输
调用关系混乱、难以调试

而 WebHostViewListener 正是为了解决这些痛点而设计的一个消息分发与事件监听器。

二、WebHostViewListener 的定位与职责

在一个基于浏览器内核的应用中，WebHostViewListener 通常作为 桥接层（Bridge Layer） 的核心部分，负责监听 WebView（浏览器渲染进程）与 C++ 宿主（浏览器主进程或宿主应用）之间的消息，并进行分发与处理。

其核心职责包括：

监听 HTML/JS 发出的消息
- 通过 WebView 内置的消息通道（如 window.external、chrome.send、window.postMessage）接收 JSON 数据
- 解析消息并根据指令类型路由到对应的 C++ 处理逻辑
将处理结果返回给前端
- 将 C++ 的执行结果序列化为 JSON
- 通过 WebView 的 JavaScript 执行接口（如 ExecuteJavaScript、RunJSFunction）回调给 HTML 页面
保持通信协议一致性
- 定义统一的消息格式：消息类型、参数、回调 ID
- 确保版本升级时协议向后兼容

三、消息格式设计

要实现稳定的双向通信，首先需要一个 统一的消息格式。在 WebHostViewListener 中，常见的设计是基于 JSON 的结构化消息，例如：

{ "cmd": "getUserInfo", "params": { "userId": 12345 }, "callbackId": "cb_001" }

字段解释：

cmd：指令名，告诉 C++ 需要执行什么操作
params：参数对象，包含该操作需要的输入数据
callbackId：回调 ID，前端用它来区分不同请求的返回

返回给前端的消息同样保持结构化，例如：

{ "callbackId": "cb_001", "status": 0, "data": { "name": "Alice", "age": 25 } }

这样设计的好处是：

协议简单明了
支持异步回调
易于调试与扩展

四、WebHostViewListener 的工作流程

假设我们有这样一个交互场景：

前端 HTML 通过 JavaScript 发送一个 getUserInfo 请求
C++ 收到消息后查询数据库
查询结果再通过 WebView 回调给前端

对应的流程图如下：

HTML/JS ----(消息)----> WebHostViewListener(C++) <---(回调)-----

1. 前端发送消息

前端调用封装的发送方法，例如：

function sendMessage(cmd, params, callback) { const callbackId = "cb_" + Date.now(); window.WebHostView.postMessage(JSON.stringify({ cmd: cmd, params: params, callbackId: callbackId })); callbacks[callbackId] = callback; } sendMessage("getUserInfo", { userId: 12345 }, function(response) { console.log("User Info:", response.data); });

2. WebHostViewListener 接收消息

在 C++ 中，WebHostViewListener 会注册一个 消息回调函数：

void WebHostViewListener::OnMessageReceived(const std::string& json_message) { auto msg = ParseJson(json_message); std::string cmd = msg["cmd"]; if (cmd == "getUserInfo") { HandleGetUserInfo(msg["params"], msg["callbackId"]); } }

3. C++ 处理逻辑

void WebHostViewListener::HandleGetUserInfo(const Json::Value& params, const std::string& callbackId) { UserInfo info = database_.GetUser(params["userId"].asInt()); Json::Value result; result["name"] = info.name; result["age"] = info.age; SendCallback(callbackId, 0, result); }

4. 回调前端

void WebHostViewListener::SendCallback(const std::string& callbackId, int status, const Json::Value& data) { Json::Value msg; msg["callbackId"] = callbackId; msg["status"] = status; msg["data"] = data; std::string json_str = msg.toStyledString(); webview_->ExecuteJavaScript("window.onNativeMessage(" + json_str + ");"); }