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对象如:
![](https://i-blog.csdnimg.cn/blog_migrate/4ab8c990684332c1fa562e3b9786fe60.webp?x-image-process=image/format,png)
然后创建一个静态的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里面看到。
如下图所示:
![](https://i-blog.csdnimg.cn/blog_migrate/789de55b4bd96bd0ef548b87f8a57bd4.webp?x-image-process=image/format,png)
来解释下这段代码是啥意思:
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的代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/488e77aeb75afd1ab5a782afcfe31c6f.webp?x-image-process=image/format,png)
2.5.2、举个例子:
获取到的messages如下:
![](https://i-blog.csdnimg.cn/blog_migrate/c9f7d646e39d23509fd33062230f1619.webp?x-image-process=image/format,png)
messages有三个成员,第一个是模块的index,第二个是调用第几个模块的第几个方法,第三个参数是前面方法的参数
2.5.3、再看下模块,也就是最开始注册的17个模块:
![](https://i-blog.csdnimg.cn/blog_migrate/224d6891cc9b9de5d2df9b6f6d3e4d3b.webp?x-image-process=image/format,png)
对比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个:
![](https://i-blog.csdnimg.cn/blog_migrate/63bc52884690d3e4b10050b6dc8c53d0.webp?x-image-process=image/format,png)
但是看方法的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