Hybrid模式通信流程

写这篇文章的原因：

Hybrid模式我已经使用很久，很早前我就对JSBridge通信原理也有所研究。最近发现细节部分已经遗忘，发觉有必要记录下。

---

在Android和iOS端我们都是使用的JSBridge，Git地址如下。我们只是在这个上面做了微调，流程是不变的。

iOS端链接地址     Android端链接地址

2者原理大同小异，这里以iOS为例：

1. 初始化

Native启动WKWebview，首先初始化JSbridge，约定协议，注册H5发送和调用方法。

2. Native register

存在Native端的messageHandlers字典里面，格式:【Key：handle】

3. H5 register

存在H5端的messageHandlers字典里面，格式:【Key：handle】

---

真正调用从下面开始

Native 调用 H5

1. 首先拼接字典对象，需要下面3个参数：

{"data": "", "callbackId","自增id","handlerName"："调用的key"}

把"callbackId"作为Key存储回调方法在responseCallbacks字典里面，【callbackId：responseCallback】

上面对象转成JSONString发给H5。

2. 在H5端，首先把Native传过来的"callbackId"作为responseId保存起来。

再根据"handlerName"找到messageHandlers字典里面的方法，执行handle，接着会把之前记录的responseId和responseData返回给Native。

3. Native会查看是否有responseId，如果有就根据responseId调用之前存储在原生responseCallbacks里面的responseCallback，在Native调用responseCallback并移除该responseCallback。

H5 调用 Native

1. 首先拼接对象：

{"data": "", "callbackId","自增id+时间戳","handlerName"："调用的key"}

把"callbackId"作为Key存储回调方法在responseCallbacks里面，【callbackId：responseCallback】

上面对象转成JSONString发给Native

2. Native接受到消息，查看是否有responseId，这个时候是没有的。查看是否有callbackId，如果有把H5传过来的"callbackId"作为responseId保存起来。

再根据"handlerName"找到messageHandlers字典里面的方法，执行handle，接着会把之前记录的responseId和responseData返回给H5。

3. H5会查看是否有responseId，如果有就根据responseId调用之前存储在原生responseCallbacks里面的responseCallback，在H5调用responseCallback并移除该responseCallback。

---

看到这里就发现H5调用Native  和 Native调用H5 大同小异，了解一个流程就可以了。