4

I have a ReactVr object which I am rendering with the code below. After React is initialised I am periodically receiving server updates which I want to pass into React as props, how can I do this? Can props in the React object be set from my "normal" JS?

ReactVR.init(
    './build/index.bundle.js',
    document.body,
    // third argument is a map of initialization options
    {
      initialProps: {
        source: 'world.json',
         userType: "typ1"
        },
      cursorVisibility: 'visible'
    }
  );

Edit: Server updates are coming via a Websockets connection, but from within React the messages are not being received, only in the "normal" JS.

In "normal" JS this returns data from the server, if I use the same within React the connection gets opened but the message is never received. However messages can be sent from within React. 

socket.addEventListener('message', function (event) {

        console.log('Message from server ', event.data);

  });
cal
  • 470
  • 1
  • 7
  • 27
  • 1
    How are you receiving the server updates? Also, to answer your question, yes, you can set the react props from your "normal" js, because react IS normal js. – T Porter Dec 05 '17 at 14:47
  • They are coming via a websockets connection, but from within React the messages are not being received, only in the "normal" JS – cal Dec 05 '17 at 14:57
  • Could you post some more code to show what you've tried already? – T Porter Dec 05 '17 at 14:58
  • @T Porter added – cal Dec 05 '17 at 15:05
  • Depending on where you're setting up the connection, it might be lost when the react component re-renders. [This article](https://peteris.rocks/blog/real-time-stats-with-websockets-and-react/) seems to explain the client and server side of the process fairly well. Also there is a [react-websocket](https://www.npmjs.com/package/react-websocket) library that might be useful to you. – T Porter Dec 05 '17 at 15:20
  • The React component only renders once, after I get the first response from the server. Yes I've seen those links, I still can't get messages to arrive in React, so i want to set them in the "normal" JS and access them from React – cal Dec 05 '17 at 15:28

1 Answers1

0

You should be able to create a native module to facilitate this functionality.

Check out the documentation around this here: https://facebook.github.io/react-vr/docs/native-modules.html

Once you have created your module and linked it up in client.js you can import it into your components and use it as a communication layer between react vr and your sockets implementation.

To do this, within your init function in client.js add

const socketsModule = new SocketsModule();

then either in a new import or in that file itself you can add: 

export class SocketsModule extends Module {
  constructor() {
    super('SocketsModule');
  }

  init() {
  }

  customMethod() {
    // Do fun stuff here
  }

}

Then inside your react VR component you wish to call these methods you first include this new module:

const SocketsModule= NativeModules.SocketsModule;

Then you can access its methods from within that component:

SocketsModule.customMethod();
cidicles
  • 351
  • 2
  • 8