Unity <-> JavaScript/webgl communication. How to import and call functions defined in a .js file from a .jslib file?

Hello, new here to both Unity and webdev.

I am trying to specifically figure out how to communicate to the website by calling functions defined in my “./myapi.js” file which is placed next to “index.html” for the webGL, from within unity’s .jslib files.

So inside the “myjslib.jslib” file I create a function that returns a function defined in “myapi.js”

So far I have tried:
-importing functions from myapi.js into the myjslib.jslib, which didn’t work.
-in the script section of the index.html, putting the import for the functions exported by myapi.js, I could be doing this incorrectly but this didn’t work either.

So how can I call functions defined inside myapi.js from the body of a function defined in myjslib.jslib?
thx.

// example:
//myjslib.jslib file
mergeInto(LibraryManager.library, {
  SomeFunctionCSharp: function () {
// myapi.js function I need to call 
    someFunctionFromMyAPI();
  }
});
// inside myapi.js
export var someFunctionFromMyAPI() {
console.log('success!');
}

Have you tried making myapi a .jspre file? Doing so should allow you to access its contents within your .jslib files. Details here.

Alternatively, you could load myapi.js in a <script> tag in your HTML, which would add stuff defined there to the global scope, again making it accessible in your .jslib files.

In your post, you mention trying to import functions. Is myapi.js an ECMAScript module? If so, you may have to convert it to some other format, because I don’t think Emscripten, which we use to compile Web builds, supports such modules, unfortunately.

1 Like

Sorry for a late reply, I’m super new to JS, but I kept trying to research how to include a lib in a .jspre file,
I did not understand how to write js from this Unity - Manual: Set up your JavaScript plug-in
Perhaps this page can benefit from a small example.

if you don’t mind taking a look at my scripts.
Here’s the monobehavior class “manager.cs”. The OnSend function is trigger by a btn click

public class Manager : MonoBehaviour
{

    private string _text;
    [SerializeField] TextMeshProUGUI input_text;

    [DllImport("__Internal")]
    private static extern void Send(string str);

    public void OnSend()
    {
        _text = input_text.text;
        Debug.Log($"<color=blue>Sent msg from Unity: {_text} </color>");
#if UNITY_WEBGL && !UNITY_EDITOR
        Send(_text);
#endif
    }
}

Here is the .jslib:

mergeInto(LibraryManager.library, {

  Send: function (str) {
    let msg = UTF8ToString(str)
    
    // Todo: myjsapi code goes under here.
    OnUnitySend(msg);
  },
});

OnUnitySend(str) is a function inside “myjsapi.js”:

export var OnUnitySend = function(str) {
    // todo: 
    console.log(`received msg from Unity: ${str}`);
}

Again sorry, I am new to js, I haven’t written js outside of .jslib, can someone show me how to call OnUnitySend from the .jslib?

Thanks, this worked. I pasted all the code from myjsapi.js into the myjspre.jspre file. But how can I do this if the code in “someAPI.js” is obfuscated by the developer? Or if I want to use a CDN link?

Looks okay to me, except the part where you export OnUnitySend. export is only valid in ECMAScript modules, and I don’t think those will work with the Emscripten environment.

Third-party code should work fine if you load it in a <script> tag and it adds stuff to the global scope. You can just access those globals in your .jslib. Just make sure the <script> finishes loading before you try to access its globals.