react vr 消息传递原理解析

react vr中文网：www.vr-react.com

react vr qq群：481244084

示例源码 github：https://github.com/LiuC520/ReactVR/

上一篇讲解了react vr原理：

开发者头条：react vr 原理解析

开发者头条：React VR 视频源码解析

开发者头条：react vr 消息传递原理解析

里面讲到了搬运工-worker；

这个worker只是在React VR的RN上下文中出现过一次，也就是实例化一次。

这里就讲解下这个搬运工到底是干嘛的，他是如何传递数据解析数据的？

一、什么是worker？

它是独立于JS主线程的一个东西，但是受限于主线程，不能访问dom对象，就相当于android的子线程的概念，在这个worker内部可以执行代码，可以加载代码，执行耗时的操作，执行完毕后可以发送出来结果，我称它为搬运工，是因为它既能发送消息，也能接收消息，他的方法就下面四个：

onerror：执行出错的事件监听，每当类型为error的ErrorEvent 从 worker 中冒泡出来时就会执行该函数；

onmessage：执行成功的事件监听，每当拥有message 属性的MessageEvent从 worker 中冒泡出来时就会执行该函数。事件的data属性存有消息内容；

postMessage：发送消息；

terminate：工人收工回家，终止worker；

具体的概念和示例大家可以查看MDN：使用 WebWorkers。

二、worker创建流程

2.1、首先在VRInstace里面创建根组件，在createRootView里面实例化RN上下文（ReactNativeContext），然后在上下文里面实例化这个搬运工，创建一个新的搬运工，然后给搬运工一段接受消息的代码（onmessage）；

    因为每一个view（不管是react vr的视图还是模型，还是你自定义的视图）内部都有一个UIManager，而UIManager里面就有RN上下文对象，所以每一个视图都会接收或者发送消息的，所以搬运工收发消息，在视图里面都能够处理，这个逻辑不知道大家有没有搞懂，容易绕晕。

    上面给搬运工的消息是啥呢，是把搬运工要执行的代码放到Blob对象里面，然后再创建一个DOMString（DOMString是一个UTF-16字符串。由于JavaScript已经使用了这样的字符串，所以DOMString 直接映射到 一个String）。把这个DOMString传递给worker里面。

这个domstring可以直接作为图片的src，它是由URL.createObjectURL()静态方法创建的，它的参数是一个file或者blob对象，file就是文件，blob是一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。File接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件。

把搬运工要执行的字符串放到Blob里面后，就会形成一个新的Blob对象如：

Blob对象

然后创建一个静态的domstring，类似于：

blob:http://localhost:8081/fbf49efb-b427-43ce-a13c-2221a6fdfa50

也就是把上面的字符串地址(domstring)传递给搬运工。

2.2、创建完搬运工，然后调用RN上下文的初始化，初始化里面做了两件事：

一个是让工人发送第一个模块配置指令（moduleConfig）然后把各个模块装进去，以字符创的形式发送出去。截止1.4.0这个版本，有以下17个模块再里面（UIManager、AndroidConstants、AsyncLocalStorage、ControllerInfo、History、Networking、LinkingManager、Location、Timing、VideoModule、AudioModule、WebSocketModule、ReactVRConstants、RCTExceptionsManager、RCTSourceCode、ExternalAssets、GlyphTextures），具体的每一个模块代表啥意思，请查看react vr原理解析：http://www.jianshu.com/p/0d65456909d4的第六章的6.1介绍。

第二个是让工人发送一条bundle指令，把bundle的url以字符串的形式发送出去。

2.3、上面把模块和bundle的url发送出去，谁来接收这些消息呢---搬运工自己接收。

具体的代码大家可以在react-vr-web ---> js ---> createRootView.js里面的BRIDGE_CODE，也可以在 react-vr-web ---> js ---> RNBridge里面看到。

如下图所示：

RNBridge

来解释下这段代码是啥意思：

2.3.1、首先解析获取的数据，然后先执行上面的模块配置指令，给一个全局的__fbBatchedBridgeConfig就是包含各种注册模块的一个对象，然后把状态改成模块配置‘moduleConfig’；

2.3.2、然后到bundle指令了，如果指令是bundle，而且状态是模块配置，就导入bundle，把状态改成‘bundle’，但是如果导入失败，就用XMLHttpRequest的GET方法获取地址，然后给个警告出来；

2.3.3、然后就是重点了，如果状态是bundle，也就是bundle的东东全部导进来了，说明react 和client已经打通了建立消息的通道了，这时间就可以解析各种发过来的指令了，其实也就是给过来的指令内容分类，不同的指令给分配不停的处理方法，然后包装下再次发送出去，发出去以后，在RN的上下文里面接收到这个包装后的指令内容，再把这些内容放到消息队列里面去，然后在RN上下文的frame方法里面逐一处理这些结果，下面再讲；现将下解析的指令有3种：

一个exec：拿到消息里面的module（模块）、function（方法）、args（参数），调用__fbBatchedBridge的callFunctionReturnFlushedQueue的apply方法包装下，然后再postMessage发送出去；

一个是invoke：拿到消息里面的id、args（参数），调用__fbBatchedBridge的invokeCallbackAndReturnFlushedQueue的apply方法包装下，然后再postMessage发送出去；

一个是flush：直接调用__fbBatchedBridge的flushedQueue的apply方法包装下，然后再postMessage发送出去；

2.4、上面讲到了__fbBatchedBridge这个东西，他是React Native的BatchedBridge桥里面定义的一个全局的对象，对象的value就是实例化一个React Native的消息队列MessageQueue，可以再其他地方调用消息队列里面的方法。

    __fbBatchedBridge定义的路径在RN源码，在你的项目下面的node_modules ---> react-native ---> Libraries ---> BatchedBridge.js 里面，上面2.3.3里面重新包装的__fbBatchedBridge的方法就在 node_modules ---> react-native ---> Libraries ---> MessageQueue.js里面。

    2.4.1、callFunctionReturnFlushedQueue：

      这个方法先调用__callFunction来调用模块的方法，把返回值返回，然后调用调用flushedQueue

    2.4.2、invokeCallbackAndReturnFlushedQueue

    这个方法和上面的区别是会把那个返回值返回出去，因为是回调函数

    2.4.3、flushedQueue：返回消息队列，如果没有，就返回null，清空下消息队列。

2.5、在RN的上下文里面接收到上面这个包装后的指令内容，再把这些内容放到消息队列里面去，然后在RN上下文的frame方法里面逐一处理这些结果：

2.5.1、frame的代码如下：

frame

2.5.2、举个例子：

获取到的messages如下：

messages

messages有三个成员，第一个是模块的index，第二个是调用第几个模块的第几个方法，第三个参数是前面方法的参数

2.5.3、再看下模块，也就是最开始注册的17个模块：

注册的17个模块

对比frame的最后循环模块的index代码：

for ( let i = 0 ; i < moduleindex.length ; i++ ) {

    this.modules[moduleIndex[ i ] ]._functionMap[funcIndex[ i ]].apply(

        this.modules[moduleIndex [ i ]],

        params[ i ]

       );

}

moduleIndex的长度为9，模块就是调用第一个模块也就是moduleIndex[ i ]都为0，也就是UIManager模块；

2.5.4、然后调用UIManager的_functionMap方法，方法有24个：

UIManager的_functionMap方法

但是看方法的index也就调用了第一和第二两个方法，第一个方法是创建视图，第二个添加子视图；

三、自行定义发送事件功能

举个例子，我们在react vr 业务代码也就是bundle里面发送一个消息，可以再client里面接收这个消息，然后处理，同样也可以反过来在client里面发送消息，在react那边接收处理消息，比如在client一侧监听鼠标的移动，然后把鼠标的坐标传到react 那一侧，然后移动react vr里面的物体或者翻转里面的物体：等等

具体可以看下我前面简单写的一篇消息传递的文章：react vr消息传递 http://www.jianshu.com/p/cdd2f30118b9 ，

具体的代码可以查看示例：http://www.vr-react.com/example/threejs/webgl_camera_cinematic/，就监听了鼠标的滚轮，而且还从index.vr.js里面发送消息，在client里面接收消息，并处理原生的东西：

vr.rootView.context.worker.addEventListener('message',onVRMessage);//接受消息的在react vr那边直接  postMessage({ type: "sceneLoadStart"})

这个示例是用react vr重写threejs的实例，源码在github上：https://github.com/LiuC520/ReactVR/tree/master/examples/threejs/webgl_camera_cinematic