unityApp.send() dosen't get invoked when json is passed after update from Redux store

[swayam1998]

So I have been trying to communicate with Unity webgl from my react app, using JSON. Here connect() is invoked when a button is clicked. But unityApp.send() doesn't get invoked when I use planet?.port while setting the port in JSON.stringify (There are no Debug.log() outputs from the webgl ). Strangely it gets invoked when raw port number (eg 7000) is passed and everything works normally.

var planets = useSelector((state) => state.planets)

...

 const connect = () => {
        const planet = planets[0];
        console.log("Connecting to :", planet?.port, "of type: ", typeof(planet?.port));
        const jsonData = JSON.stringify({
            "networkAddress": "localhost",
            "port": planet?.port
        });
        unityApp.send('NetworkManager', 'ConnnectToAddress', jsonData);
    };

I am stuck and am unable to figure out what the problem is. I am using Unity 2019 and react-unity-webgl 7.1.10 .

[jeffreylanters]

Hi. If I understand you correctly, the send method does not seem to get invoked when you optionally unwrap port from planet, but does work when you set the port to a hard coded value? Can you console log and share both results of jsonData with me?

[swayam1998]

I think I've found my mistake, when the redux store got updated the component with unityApp got updated (the uniqueID changed as seen above). So I used the code below to instanciate the unityApp, which stopped it from reloading and it seems to work.

const unityApp = useMemo(() => new UnityContent(
        viewsJSON, loader
    ), [viewsJSON, loader]);

But I am still unsure why unityApp.send() wont work if it got updated. useMemo is better performance wise too, but I will still try to find out.

[jeffreylanters]

Hi. Yes, since you're using hooks, you component will rerender each time a state changes. Which will result in the creation of a new UnityContext object each time. To prevent this, I recommend creating the Unity Context outside of your component as show in the examples.

import React from "react";
import Unity, { UnityContext } from "react-unity-webgl";

const unityContext = new UnityContext({
  loaderUrl: "build/myunityapp.loader.js",
  dataUrl: "build/myunityapp.data",
  frameworkUrl: "build/myunityapp.framework.js",
  codeUrl: "build/myunityapp.wasm",
});

function App() {
  function connect() {
    var jsonData = JSON.stringify({});
    unityContext.send("NetworkManager", "ConnnectToAddress", jsonData);
  }

  return (
    <div>
      <button onClick={connect}>Connect</button>
      <Unity unityContext={unityContext} />
    </div>
  );
}

I hope this helps you further, best of luck with your project!

[swayam1998]

Thanks. I was over-complicating things, with my previous code.

[jeffreylanters]

No worries, glad you've figured it out. Best of luck with your project!

[Nipunc55]

Thanks @jeffreylanters