1.0.2 • Published 6 years ago

react-vr-bridge v1.0.2

Weekly downloads
4
License
MIT
Repository
github
Last release
6 years ago

React VR Bridge

Module for simple communication between Web Worker and Main UI Thread in React-VR.

Installation

    npm i -s react-vr-bridge

Usage

Sending messages from Main Thread to Web Worker

  1. In vr/client.js add following lines:
       import BridgeModule from 'react-vr-bridge/BridgeModule'
    Next in our init() function at the beginning put this line:
       const bridgeModule = new BridgeModule(messageReceiver);

messageReceiver is our listener that will be receiving our messages from Main Thread.

It can for example look like this:

    messageReceiver = (message) => {
      console.warn('Message from Main Thread', message);
    };

We need to add our module to NativeModules.

  const vr = new VRInstance(bundle, 'your-vr-app-name', parent, {
      nativeModules: [bridgeModule],
    ...options,
  });

Also at the end of init() function just before vr.start() put this line:

   bridgeModule.init(vr.rootView.context);
   vr.start();
   return vr;
 }
  1. In index.vr.js (or other place from where you want to send messages):

Add those lines at the beginning of the file:

    import { NativeModules } from 'react-vr';
    const BridgeModule = NativeModules.BridgeModule;

Now to send messages all you have to do is:

    BridgeModule.sendMessageToWebWorker('1234');

Sending messages from Web Worker to Main Thread

  1. In index.vr.js (or other place from where you want to receive messages):

Add those lines at the beginning of the file:

    import BrowserBridge from 'react-vr-bridge/BrowserBridge';

Now we have to set listener that will be receiving messages from Web Worker.

*In my case this line is in constructor()*:

    BrowserBridge.setListener(message => console.warn(message));
  1. In vr/client.js at this point you should have this class imported:
       import BridgeModule from 'react-vr-bridge/BridgeModule'
    We will be using it to send messages to Main Thread.

To test if everything works we can put this code somewhere in init() function:

    setTimeout(() => {
        bridgeModule.sendMessageToMainThread('test message');
    }, 3000);

After 3 seconds after your listener should fire up with your message.

And that's all! :)