cef中c++和javascript数据交互的几种方法

cef中c++和javascript数据交互的几种方法

基础知识

cef中有两种进程，render进程和browser进程。

render进程

render进程负责显示web页面，运行javascript代码。
v8引擎的初始化是在render进程中调用的，所以你的javascript代码是在render进程中执行的。
即使你在browser进程中调用

frame->ExecuteJavaScript()

你也要清楚，代码是发送到render进程执行的。

browser进程

browser进程是创建windows系统的客户端窗口的进程。
一般我们的webrtc sdk和我们的c++代码应该执行在browser进程。

进程通信

这样就引入了本文要讲的问题，运行在browser进程的c++代码如何给render进程中javascript传递数据。
两个进程的通信是通过发送进程间消息来完成的。

//发消息给browser进程
browser->SendProcessMessage(PID_BROWSER, message);
//发消息给render进程
browser->SendProcessMessage(PID_RENDERER, message);

方法一、window binding （即给window对象创建全局变量）

如果c++希望发送一些数据给javascript，可以使用cef中的window binding技术。
给javascript中的window对象添加一个全局变量。
更详细的教程可以看cef官网的文档 cef window binding
比如视频会议的房间信息 roomInfo。

browser进程发送roomInfo给render进程

假设只有一个bool值要发送

  void EngineCallback::OnRoomInfo(const truman::RoomInfo& room) {
    CefRefPtr<CefBrowser> browser = g_handler->GetBrowser();
    if (browser.get() == NULL) {
      return;
    }
    CefRefPtr<CefProcessMessage> response = CefProcessMessage::Create("onRoomInfo");
    CefRefPtr<CefListValue> response_args = response->GetArgumentList();
    bool is_start = room.IsStart();
	response_args->SetBool(0, is_start);
    browser->SendProcessMessage(PID_RENDERER, response);
    return;
  }

render收到消息，执行window binding，给window对象创建全局变量window.roomInfo

bool RenderDelegate::OnProcessMessageReceived(
  CefRefPtr<ClientApp> app,
  CefRefPtr<CefBrowser> browser,
  CefProcessId source_process,
  CefRefPtr<CefProcessMessage> message) {

  std::string message_name = message->GetName();
  if (message_name == "onRoomInfo") {
	  CefRefPtr<CefFrame> frame = browser->GetMainFrame();
	  CefRefPtr<CefV8Context> context = frame->GetV8Context();
	  CefRefPtr<CefListValue> args = message->GetArgumentList();

	  bool is_start = args->GetBool(2);

	  context->Enter();

	  CefRefPtr<CefV8Value> is_start_v8 = CefV8Value::CreateBool(is_start);

	  CefRefPtr<CefV8Value> global = context->GetGlobal();

	  CefRefPtr<CefV8Value> roomInfo;
	  if (global->HasValue("roomInfo")) {
		  roomInfo = global->GetValue("roomInfo");
	  } else {
		  roomInfo = CefV8Value::CreateObject(NULL);
		  global->SetValue("roomInfo", roomInfo, V8_PROPERTY_ATTRIBUTE_READONLY);
	  }
	  roomInfo->SetValue("isStart", is_start_v8, V8_PROPERTY_ATTRIBUTE_READONLY);
	  
	  context->Exit();
	  return true;
    }
  }

每次roomInfo变更，就需要执行一次上面的流程，更新window.roomInfo

方法二、使用Objects with Accessors

这种方法也是给window绑定给一个全局变量roomInfo
但是给roomInfo设置get和set方法，当使用语法roomInfo.isStart
就会调用到get方法，get方法运行在render进程

在get方法里返回isStart的值。

声明一个accessor

#include "include/cef_v8.h"

class RoomInfoAccessor : public CefV8Accessor {
public:
	RoomInfoAccessor();
	virtual ~RoomInfoAccessor();

	virtual bool Get(const CefString& name, const CefRefPtr<CefV8Value> object, CefRefPtr<CefV8Value>& retval, CefString& exception) OVERRIDE;
	virtual bool Set(const CefString& name, const CefRefPtr<CefV8Value> object, const CefRefPtr<CefV8Value> value, CefString& exception) OVERRIDE;
	IMPLEMENT_REFCOUNTING(RoomInfoAccessor);
};

实现Get

bool RoomInfoAccessor::Get(const CefString& name, const CefRefPtr<CefV8Value> object
	, CefRefPtr<CefV8Value>& retval, CefString& exception)
{
	if (name == "isStart") {
		// Return the value.
		retval = CefV8Value::CreateBool(false);
		return true;
	}
	// Value does not exist.
	return false;
}

Accessor如何拿到数据？

上面的代码并没有去拿真实的数据，只是返回了一个false。
如果要获取真实的数据，有以下几种方法：

1、可以在c++中发送进程消息，在render进程中将数据进行存储

类似于windows binding中发消息的部分。render进程将数据存储到本进程中的变量如：g_roomInfo
在Get方法中读取g_roomInfo

2、开启单进程模式，直接从内存中获取c++数据

在Get方法中直接读取browser中的全局变量g_roomInfo

3、多进程模式下，共享内存

broswer进程中，对共享内存进行修改，render中的Get方法进行读取。

方法三、使用cefQuery

不同于以上两种同步数据交互方式，cefQuery是一个异步数据交互方式
cefQuery封装了进程间消息交互的流程。
我猜测的大致流程为：
1、javascript调用window.cefQuery发送请求,并提交一个回调函数：callback，js继续执行，不阻塞
2、browser进程收到消息，保存messageId，并执行请求的运算
3、当browser进程完成运算后，产生messageId对应的response,发送进程消息给render进程
4、render进程收到消息，调用和messageId对应的callback

可以参考官网教程：examples/message_router

方法四、使用XMLHttpRequest

XMLHttpRequest可以通过post方法将二进制数据如arraybuffer发送到browser进程。
1、当javascript需要传递大量二进制数据给browser进程的c++代码时，可以使用POST方法，
2、当javascript需要从browser进程的c++代码拿到大量二进制数据时，可以使用GET方法。

注意：XMLHttpRequest只支持标准的http、https协议，其他自定义scheme无法支持。
所以我们需要创建自定义的http scheme，通过限定域名domain，来对特定的domain请求进行处理。
而其他domain的请求，依然通过默认处理来完成。
具体如何使用XMLHttpRequest发送二进制数据，我将单独写一篇博客。
cef中javascript和c++交换二进制数据（arraybuffer）的方法