Sending a message from unity webGL to Vue js

Question

this is more a general question! I created a vue js web page, where I wanted to add a unity webgl. It seems like it is very easy to call a unityfunction from javascript. But I could not find a suitable solution to send data from my unity webgl to vue js. In the manual they recommend to create something like a javascript library, but I don´t think that this makes sense in my context: here

Does anyone have a idea how to manage that or if that is even possible? thanks in advance:)

Answer 1

Since you're able to send data from vue to unity, sending data from unity to javascript is also easy.

1. Create an object to represent data we want to send to JS.

   public class Person
   {
       public string Name{get;set;}
       public string PhoneNumber{get;set;}
   }
   

2. Create your UnityJavascipt.jslib file and place it in a plugins folder.

3. We'll start with a simple javascript bridge function called SendToJavscript

   var UnityJavascipt =
   {
       // This object can hold variables for you.
       $JustAWebGLObject:
       {
   
       },
   
       SendToJavscript: function (dataJsonPtr)
       {
           // string paramters from unity get delivered to javascript as pointers.
           // So we get the actual string from the pointer.
           var dataJson = Pointer_stringify(dataJsonPtr);
   
           // Now convert the string to a javascript object.
           var jsobject = JSON.parse(dataJson);
   
           // Now you have the jsObject, Vue can access it from here.
           // You can use Vue API from here too.
   
           // I'll just debug some variables.
           console.log(jsobject.Name); // Kevin
           console.log(jsobject.PhoneNumber); //  011244455
       },
   
   };
   autoAddDeps(UnityJavascipt , '$JustAWebGLObject');
   mergeInto(LibraryManager.library, UnityJavascipt );
   

4. Create the extern PInvoke C# function, which by calling it, it calls the Javascipt bridge function, this extern function must match the Javascript SendToJavscript bridge function in name, parameters count, parameters types, parameters order.

   public static extern void SendToJavscript(string jsonData);

5. Now sending a person object to javascript.

   private void SendToJavscript_Test()
   {
      Person person = new Person();
      person.Name = "Kevin";
      person.PhoneNumber = "011244455";
   
      // We need to convert the object to javascript, cause we can't send objects 
      directly between C# and javascript.
      // Our bridge function handles converting the object back to a javascript 
      object.
   
      SendToJavscript(JsonUtility.ToJson(person));
   }