Qt嵌入浏览器（六）——QCefView实现JS通信接口

上一节中，我们完成了CEF各基本组件的封装，并完成了浏览器基本功能的实现。 >>点这里回顾上节内容

本节我们将尝试扩展所实现的各组件，实现浏览器与页面的双向通信。

本篇的小目标：

上一节曾提到过，CEF应用在默认情况下包含很多子进程，这些进程会共享同一个执行入口。除了主进程的各类处理接口外，CEF还提供了各类子进程的处理接口。而 页面到浏览器的消息通道 就可以借助对 渲染进程 的控制来实现，整体流程如下：

完成上述步骤后，在页面调用对应的消息通道函数时，V8处理器则会相应地进行处理，从而完成消息的发送。

另一方面，实现 浏览器到页面 的消息通道和第二节中基于Qt WebEngine的方法类似，CEF也提供了执行JS脚本的方法，只需在页面中定义好对应的消息接口，并通过执行脚本方法执行该接口即可完成消息的发送。

因此，实现双向通道主要的问题集中在针对渲染进程处理和JS脚本执行的扩展上。接下来先就渲染进程处理进行说明。

为了实现对渲染进程的处理，我们首先需要向上一节中封装的QCefContext中添加对渲染进程入口的解析和处理。具体实现如下：

上面的实现除了处理了CEF主进程外，还判断了子进程是否为渲染进程（Windows环境下的renderer进程和Linux环境下的zygote进程），如果发现当前处理的是渲染进程，则创建一个渲染进程处理器QCefRenderHandler的实例。QCefRenderHandler的声明如下：

和主进程CefApp的实现类似，这里也实现了CefApp接口，此外额外实现了CefRenderProcessHandler接口的OnContextCreated方法，来获取V8上下文的引用，具体实现如下：

上面的实现将sendMessage函数定义为消息通道，并注册到了window对象上。sendMessage函数的具体实现则放在v8Handler的实现中。QCefV8Handler声明如下：

QCefV8Handler通过实现CEF V8处理器的Execute执行方法，完成对所加载的JS函数的过滤，并进行相应的处理，实现如下：

这里首先对函数名和参数进行了校验，之后调用CefBrowser的IPC方法SendProcessMessage向主进程的CefClient发送消息，从而完成页面向浏览器主进程消息的传递。

要实现页面到浏览器的消息通道，除了完成了上面渲染进程的控制扩展，我们还需要在QCefClient中添加接收IPC消息的接口实现。首先在QCefClient头文件中声明对CefClient接口的重载：

然后实现这个接口，完成消息的接收处理：

可以看到这里只是对收到的消息进行了简单的转换，并通过信号发送给感兴趣的下游控件使用。在第四小节的实现中，我们将QCefClient封装到了QCefView中，因此在QCefView中也需要将这个信号转发给它的下游控件：

这样，QCefView接收JS消息的通道就实现完成了。

这里额外讲解一下有关js alert的特殊处理。要实现js调用alert方法时的d窗提醒，需要额外在CefClient中实现CefJSDialogHandler接口的OnJSDialog方法，参考实现如下：

承前所述，浏览器到页面的消息发送通过CEF的JS脚本执行接口实现。首先在QCefView中，声明并实现一个执行JS脚本的方法：

然后指定一个特定的JS方法，作为消息通道使用：

如此，QCefView发送JS的通道也实现完成了。

完成了消息通道的实现，接下来我们实际使用一下我们定义好的消息通道。

首先是Qt端的实现，在MainDlg的initWebView方法中，添加对JS消息的监听，并将监听到的消息通过QMessageBox显示出来：

然后添加文本输入和发送按钮，并在按钮点击信号对应的槽中调用QCefView的消息发送方法：

接下来在页面端实现消息接收和发送的接口msgutilsjs：

可以看到这里我们使用了上面定义的recvMessage和sendMessage两个函数。然后在页面上调用这些接口：

实际运行一下浏览器，并加载我们实现的这个页面，消息发送效果如下：

有关CEF消息通道的讲解就先进行到这里。下一节将分析使用CEF接口实现>获取从客户端读入的字符串
String result = bufferedReaderreadLine(); 这里会阻塞。
你服务器端获取Socket以后 需要另外启动一个线程去处理，你现在是单线程的服务器端设计，当然只能接收一次请求了。
服务器端接收到Socket以后应该启动一个线程
new Thread(new Runable(){

})start();

我们还是从计算机的网络层说起，主要是分为7个层分别是物理层，数据链路层，网络层，传输层，会话层，表示层，应用层。

数据之间的交互主要在传输层这一块。通常用到的底层协议有TCP和UDP这两种协议。通过中间层SOCKET协议，进行包装，再往上就是我们经常用到的>

>

上面这个就是我们网站的>

同时我们的实时聊天软件，比如今日头条的聊天软件就是通过TCP，SOCKET来进行通信的，这种是面向连接的长链接方式，双向通信。响应指定封包协议和解包协议，通过socket的处理，去监听两端的端口，分别获取各自的数据，和发送各自的数据。实现双向通信。具体过程如下：

>客户端步骤

1创建套接字

2向服务器发送连接请求（connect）

3通信（send/recv)

4关闭套接字

>服务器端步骤

1创建用于监听的套接字（socket）

2将套接字绑定到本地地址和端口上（bind）

3将套接字设为监听模式（listen）

4等待客户请求（accept），此处要不断的调用accept

5通信（send/receive），完成后返回4

6关闭套接字（closesocket)

谢谢阅读，欢迎关注。

---