Unity3D打包WebGL并使用MQTT(二):使用json

最新推荐文章于 2025-11-20 07:20:40 发布

原创

最新推荐文章于 2025-11-20 07:20:40 发布 · 1.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#webgl #json #unity

该文章介绍了如何在Unity3D中打包WebGL项目，并集成MQTT进行JSON数据传输。作者详细讲解了添加WebGLInput插件以解决输入框问题，使用JsonFX进行序列化和反序列化，以及如何通过.jslib文件与JavaScript互调。此外，文章提供了两种不同的JavaScript实现MQTT功能的方式，一种是单文件实现，另一种是多文件模块化实现，并展示了如何在HTML中测试这些功能。

Unity3D打包WebGL并使用MQTT(二):使用json

1. 软件环境

Unity: 2021.3
stomp.js 2.3.3:
下载地址:https://www.jsdelivr.com/package/npm/stompjs

2. 内容介绍

这篇博客的主要内容是记录将一个Unity项目打包成WebGL项目，并集成MQTT进行json数据传输的过程。

3. 项目搭建

3.1 `UI`界面

在这里插入图片描述

3.2 添加插件

添加WebGLInput插件

用于解决WebGL中输入框无法输入/显示中文的问题
详情参考:
Unity WebGL 输入框(InputField)接受中文输入
 unity在webgl端输入框无法输入中文和中文显示问题的解决
下载地址: 使用github包【WebGLInput】：
https://github.com/kou-yeung/WebGLInput

在这里插入图片描述
2. 添加系统中文字体

将系统中的字体文件导入Unity
详情参考：Unity3D添加使用系统中的字体

在这里插入图片描述

修改InputField中文显示和字体

在这里插入图片描述

添加Pathfinding.JsonFx.dll

用于进行json数据的序列化和反序列化
JsonFX Unity3D 如何使用JsonFX

在这里插入图片描述

3.3 添加脚本

.jslib文件

详细内容参考：Unity（WebGL）与JS通讯2022最新姿势

mergeInto(LibraryManager.library, {
   
   
  Hello: function () {
   
   
    window.alert("Hello, world!");
  },
  
  HelloString: function (str) {
   
   
    // window.alert(Pointer_stringify(str));
    window.alert(UTF8ToString(str));
  },

  PrintFloatArray: function (array, size) {
   
   
    for(var i = 0; i < size; i++)
    console.log(HEAPF32[(array >> 2) + i]);
  },

  AddNumbers: function (x, y) {
   
   
    return x + y;
  },

  StringReturnValueFunction: function () {
   
   
    var returnStr = "bla";
    var bufferSize = lengthBytesUTF8(returnStr) + 1;
    var buffer = _malloc(bufferSize);
    stringToUTF8(returnStr, buffer, bufferSize);
    return buffer;
  },

  BindWebGLTexture: function (texture) {
   
   
    GLctx.bindTexture(GLctx.TEXTURE_2D, GL.textures[texture]);
  },

  JsConnect: function (clientId, host, port, username, password, objName, objFunc) {
   
   
    mqttConnect(UTF8ToString(clientId), UTF8ToString(host), UTF8ToString(port), UTF8ToString(username), UTF8ToString(password), UTF8ToString(objName), UTF8ToString(objFunc));
  },

  JsSubscribe: function (clientId, name, objName, objFunc) {
   
   
    mqttSubscribe(UTF8ToString(clientId), UTF8ToString(name), UTF8ToString(objName), UTF8ToString(objFunc))
  },

  JsSend: function (clientId, name, payload) {
   
   
    mqttSend(UTF8ToString(clientId), UTF8ToString(name), UTF8ToString(payload))
  },

  JsUnsubscribe: function(clientId, name) {
   
   
    mqttUnsubscribe(UTF8ToString(clientId), UTF8ToString(name));
  },

  JsDisconnect: function(clientId) {
   
   
    mqttDisconnect(UTF8ToString(clientId), UTF8ToString(clientId));
  }
});

给Cube添加脚本Cube.cs

用于显示基本函数功能

在这里插入图片描述

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.Runtime.InteropServices;

public class Cube : MonoBehaviour
{
   
   
    [DllImport("__Internal")]
    private static extern void Hello();

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

    [DllImport("__Internal")]
    private static extern void PrintFloatArray(float[] array, int size);

    [DllImport("__Internal")]
    private static extern int AddNumbers(int x, int y);

    [DllImport("__Internal")]
    private static extern string StringReturnValueFunction();

    [DllImport("__Internal")]
    private static extern void BindWebGLTexture(int texture);

    [System.Obsolete]
    void Start() {
   
   
        Hello();
        
        HelloString("This is a string.");
        
        float[] myArray = new float[10];
        PrintFloatArray(myArray, myArray.Length);
        
        int result = AddNumbers(5, 7);
        Debug.Log(result);
        
        Debug.Log(StringReturnValueFunction());
        
        var texture = new Texture2D(0, 0, TextureFormat.ARGB32, false);
        BindWebGLTexture(texture.GetNativeTextureID());
    }
}

数据类Result.cs

用于json数据的序列化和反序列化

在这里插入图片描述

[System.Serializable]
public class Result {
   
   
    public int errCode;
    public string errInfo;
    public object data;
}

数据类Mqtt.cs

用于配置MQTT相关内容

using System.Collections.Generic;
using System.Runtime.InteropServices;

[System.Serializable]
public class Mqtt {
   
   
    public string host;
    public string port;
    public string clientId;
    public string username;
    public string password;
    public string objName;
    public string objFunc;

    public List<Result> resultList;

    [DllImport("__Internal")]
    private static extern void JsConnect(string clientId, string host, string port, string username, string password, string objName, string objFunc);
    [DllImport("__Internal")]
    private static extern void JsSubscribe(string clientId, string topic, string objName, string objFunc);
    [DllImport("__Internal")]
    private static extern void JsSend(string clientId, string topic, string payload);
    [DllImport("__Internal")]
    private static extern void JsUnsubscribe(string clientId, string topic);
    [DllImport("__Internal")]
    private static extern void JsDisconnect(string clientId);
    
    public void Connect() {
   
   
        JsConnect(clientId, host, port, username, password, objName, objFunc);
    }

    public void SubscribeTopic(string topic) {
   
   
        topic = "/topic/" + topic;
        JsSubscribe(clientId, topic, objName, objFunc);
    }

    public void UnscbscribeTopic(string topic) {
   
   
        topic = "/topic/" + topic;
        JsUnsubscribe(clientId, topic);
    }

    public void SendTopic(string topic, string payload) {
   
   
        topic = "/topic/" + topic;
        JsSend(clientId, topic, payload);
    }

    public void SubscriveQueue(string queue) {
   
   
        queue = "/queue/" + queue;
        JsSubscribe(clientId, queue, objName, objFunc);
    }

    public void UnsubscribeQueue(string queue) {
   
   
        queue = "/queue/" + queue;
        JsUnsubscribe(clientId, queue);
    }

    public void SendQueue(string queue, string payload) {
   
   
        queue = "/queue/" + queue;
        JsSend(clientId, queue, payload);
    }

    public void Disconnect() {
   
   
        JsDisconnect(clientId);
    }
}

给Canvas添加脚本PanelController_2.cs

用于测试mqtt相关函数

在这里插入图片描述

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using System.Runtime.InteropServices;
using Newtonsoft.Json;

public class PanelController_2 : MonoBehaviour
{
   
   
    public Button