Can't send data to Unity from React app with unityContext.send

[Yaroher2442]

First, I created a project and a scene in Unity 2020 Editor.
After that - build project to WebGL usage.
Load to my React app like in Doc.
Unity load fast and right. But when i try call my c# func i don't see anything

public void SetModelParams(string jsonString)
        {
            
            ModelDataStruct jsonObject = JsonUtility.FromJson<ModelDataStruct>(jsonString);
            Debug.Log("Common message");
            Debug.Log(jsonObject.expression[0]);
            transform.Rotate(new Vector3(1,1,1));
        }

its my c# func.

I think my problem in time when i try to send data.
After unity load, we recive data from Python server (it's work good and wee can console.log data).
When data load we try to send it to Unity from button event.

After all i check my unityContext.send for correctness ;
name of object - like in Editor scene
Name method - like name method in c# sctript which is tied to game obj
Param - specify correctly

I wait for my Debug.Log() in browser console like in function start:

void Start()
        {
            Debug.Log("start App");
            Debug.Log(gameObject.name);
            SetModelParams("{\"expression\":[1.8,1,1,1,1,1], \"pose\":[1,1,1,1,1], \"shape\":[1,1,1,1,1]}");
        }

this Debug.Log(gameObject.name); and Debug.Log("start App"); work correctly

Can you help me, please
Sorry for my English (not my main language)

[N39r19]

Here os our React code, which is connected to Unity

const App = () => {

  const [configData, setConfigData] = useState(null);

  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(function () {
    console.log('Unity load start');
    unityContext.on("loaded", function () {
      setIsLoaded(true);
    });
    unityContext.on("debug", function (message) {
      console.log(message);
    });
  }, []);

  useEffect(function () {
    if(isLoaded){
      console.log('Unity load complete');
      const ws = new WebSocket("ws://our.websocket");
      ws.onopen = ((event) => {
        console.log('CONNECTED');
      })
    
      ws.onmessage = (async (event) => {
        const configData = JSON.parse(event.data);
        setConfigData(configData);
      })
    }
  }, [isLoaded]);

  const doSomething = (configData) => {
    let parsedData = configData.data;
    parsedData.forEach((val) => {
      let a = JSON.stringify(val);
      unityContext.send("untitled", "SetModelParams", a);
    });
  }

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

  return (
    <>
      <Unity unityContext={unityContext} style={{ width: "100%", height: "100%" }}/>
      <button onClick={() => doSomething(configData)}> Send data 2 unity</button>
    </>
  );
}

[Jayden0501]

thank you it helped a lot!!

[Yaroher2442]

@jeffreylanters we need help in this issue

[jeffreylanters]

Hi. You should create your Unity Context model outside of your functional component, or place it within a mount cycle using UseEffect. Because in your example the Unity Context is recreated each render which results in the Unity Context losing its reference to the Unity Instance. See the documentation for further instructions and examples.

[criogennn]

Can u please share a little part of code for this? I dont understand how we can create Unity Context outside functional component? React Hook can only call in custom hooks and functional components, how we can extract unityProvider from useEffect()?

[rahulvyas1]

This is a significant problem. My React app always loses context in between if I receive a message from unity and then after an async delay tries to sendMessage back to Unity.

[jeffreylanters]

Which version of the module are you using?