Communication between Unity WebGL and a Page

After building custom Template for Unity WebGL, and creating own JS plugin for it, it’s finally time to make another step! Make communication between Unity WebGL and a page!

I would recommend reading about these two posts before continuing with this one, as we will use know-how from them!

But if you already have an understanding of how to write plugins in JS and create your own templates or how to make your own pages, feel welcome here. ?

Prep work ?

To start, we need two things – a JS plugin and a receiver (bridge) in Unity.

In the old times you could call JS functions in WebGL directly from C# using Application.ExternalCall(), but we can’t do it any longer.

Now we have to follow new rules for interacting with browser scripting.

Unity WebGL -> Page ?

The first step to creating communication between Unity WebGL and the page will be to create a JS plugin. It will serve the purpose of sending a message from Unity to the page.

In our case, we will have just one method in it.

using System.Runtime.InteropServices;

// Read more about creating JS plugins: https://www.patrykgalach.com/2020/04/27/unity-js-plugin/

/// <summary>
/// Class with a JS Plugin functions for WebGL.
/// </summary>
public static class WebGLPluginJS
{
    // Importing "SendMessageToPage"
    [DllImport("__Internal")]
    public static extern void SendMessageToPage(string text);
}

// Read more about creating JS plugins: https://www.patrykgalach.com/2020/04/27/unity-js-plugin/

// Creating functions for the Unity
mergeInto(LibraryManager.library, {

   // Method used to send a message to the page
   SendMessageToPage: function (text) {
      // Convert bytes to the text
      var convertedText = Pointer_stringify(text);

      // Pass message to the page
      receiveMessageFromUnity(convertedText); // This function is embeded into the page
   }
});

However, the code in the plugin will not be enough for us here. We also need to create a method on our page to receive the message and do something with it!

<!-- Place for displaying a message from Unity -->
<div class="centered">
   <h2>Message from Unity</h2>

   <p id="lblMessage">...</p>
</div>

<script>
   // Function which receives a message from Unity
   function receiveMessageFromUnity(txt) {
      // Get element to assign the message
      const lblMessage = document.getElementById("lblMessage");

      // Assign received from Unity message
      lblMessage.innerText = txt;
   }
</script>

Great! I think this will do for us here. ?

Page -> Unity WebGL ?

The second part is a little bit harder to do.

We will have to create a panel or form on our page to enter the message which will be passed to Unity.

<!-- Message form for sending stuff to Unity -->
<div class="message-form centered">
   <h2>Message for Unity</h2>

   <input type="text" name="txtMessage" id="txtMessage" placeholder="Enter message..." />
   <button onclick="sendMessageToUnity()">Send</button>
</div>

With form ready, now we need a function to go with it.

<script>
   // Function which sends the message to Unity
   function sendMessageToUnity() {
      // Get the input field
      const txtMessage = document.getElementById("txtMessage");
      // Get the message
      const message = txtMessage.value;
      // Clear the input field
      txtMessage.value = "";

      // Send message to the Unity scene
      // Params: "Target object in the scene", "Function name", "Parameters"
      unityInstance.SendMessage("[Bridge]", "ReceiveMessageFromPage", message);
   }
</script>

Awesome! But this won’t work yet. We are still missing the receiver of that message!

We have to create one in the scene, I’ll call it “[Bridge]” like in code.

Of course, we will need a script for it with the method we’ve provided on the page.

using UnityEngine;

/// <summary>
/// Bridge used to communicate with a page
/// </summary>
public class BridgeScript : MonoBehaviour
{
    // Reference to the UI panel to display received message.
    [SerializeField]
    private UIFromPage fromPage;

    /// <summary>
    /// Receives the message from a page.
    /// </summary>
    /// <param name="message">Message.</param>
    public void ReceiveMessageFromPage(string message)
    {
        // Display the message
        fromPage.DisplayMessage(message);
    }

   ...
}

And with that, we basically have everything done!

Issue: Unity captures all keyboard input ?

By default, Unity captures all keyboard input, and you can’t write anything onto input fields on your page.

To fix that issue, you have to change the value of WebGLInput.captureAllKeyboardInput to false.

Just like here:

using UnityEngine;

/// <summary>
/// Disable capturing whole input on the page
/// Read more: https://docs.unity3d.com/ScriptReference/WebGLInput-captureAllKeyboardInput.html
/// </summary>
public class DisableWebGLInputCapture : MonoBehaviour
{
    void Start()
    {
#if UNITY_WEBGL && !UNITY_EDITOR
        WebGLInput.captureAllKeyboardInput = false;
#endif
    }
}

Oh, and don’t forget to attach this component somewhere in the scene. ?

Result ?

Now, let’s slap some UI on that so we can test what we’ve created.

And what do you think about it? Let me know in the comment section below! ?

If you know someone that might need this, share it with him! I would really appreciate that! ?

And if you are interested in getting emails when I release a new post, sign up for the newsletter!

The whole project is available at my public repository. ?

Hope to see you next time! ?