unity开发webGL，引用js功能。

chillxiaohan
已于 2024-02-19 15:05:07 修改
阅读量885
点赞数
分类专栏：问题记录文章标签： unity webgl
于 2023-03-07 11:58:34 首次发布
本文链接：https://blog.csdn.net/chillxiaohan/article/details/129379490
版权
问题记录专栏收录该内容
12 篇文章 0 订阅
订阅专栏
读写Excel参考连接
 打开本地文件参考连接
对JS一点不懂，记录一下开发中用到的调用JS代码，方便以后查找。
包含了调用MQTT和读写Excel功能。
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | {{{ PRODUCT_NAME }}}</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
  </head>
  <body>
    <div id="unity-container" class="unity-desktop"
	style="width: 100%; height: 100%; margin: auto">
      <canvas id="unity-canvas"
	  style="width: 100%; height: 100%; margin: auto"></canvas>
      <div id="unity-loading-bar">
        <div id="unity-logo"></div>
        <div id="unity-progress-bar-empty">
          <div id="unity-progress-bar-full"></div>
        </div>
      </div>
    </div>
	<script src="Build/MyMqtt.js"></script>//引用的js文件，添加后可以直接使用里边的方法
	<script src="Build/xlsx.full.min.js"></script>
    <script>
      var buildUrl = "Build";
      var loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}";
      var config = {
        dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
        frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
        codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
#if MEMORY_FILENAME
        memoryUrl: buildUrl + "/{{{ MEMORY_FILENAME }}}",
#endif
#if SYMBOLS_FILENAME
        symbolsUrl: buildUrl + "/{{{ SYMBOLS_FILENAME }}}",
#endif
        streamingAssetsUrl: "StreamingAssets",
        companyName: "{{{ COMPANY_NAME }}}",
        productName: "{{{ PRODUCT_NAME }}}",
        productVersion: "{{{ PRODUCT_VERSION }}}",
      };

      var container = document.querySelector("#unity-container");
      var canvas = document.querySelector("#unity-canvas");
      var loadingBar = document.querySelector("#unity-loading-bar");
      var progressBarFull = document.querySelector("#unity-progress-bar-full");
      var fullscreenButton = document.querySelector("#unity-fullscreen-button");

      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        container.className = "unity-mobile";
        config.devicePixelRatio = 1;
      }
      loadingBar.style.display = "block";
	  var gameInstance;
      var script = document.createElement("script");
      script.src = loaderUrl;
      script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
          progressBarFull.style.width = 109 * progress + "%";
        }).then((unityInstance) => {
          loadingBar.style.display = "none";
          gameInstance=unityInstance;
        });
      };
      document.body.appendChild(script);
        function JsToUnityString(content) {
            //console.log(content);
            gameInstance.SendMessage("WebToUnity", "JsToUnity", content);
        }
		
        window.addEventListener("message", (e) => {
        //console.log(e.data);
        JsToUnityString(e.data);
      });
        var mqttClient;
        var wsUrl ='ws://localhost:8083/mqtt';
        var subNameReceive = '';
        function MQTTConnect() {
            const options = {
                clean: true, // true: 清除会话, false: 保留会话
                connectTimeout: 4000, // 超时时间
                // 认证信息
                //clientId: 'test',	//客户端ID
                username: 'admin', //连接用户名
                password: 'password',//连接密码，有的密码默认为public
                // 心跳时间
                keepalive: 60,
				//Qos: 2,
            }

            mqttClient = mqtt.connect(wsUrl, options);
            mqttClient.on('connect', function () {
                //console.log('Connected Succeed')
                gameInstance.SendMessage("WebToUnity", "MQTTConnectSucceed");
                MQTTSubscribe(subNameReceive);
				
            })
            //失败重连
            mqttClient.on('reconnect', (error) => {
                //console.log('正在重连:', error)
                gameInstance.SendMessage("WebToUnity", "MQTTReConnect");
            })
            //连接失败
            mqttClient.on('error', (error) => {
                console.log('连接失败:', error)
                gameInstance.SendMessage("WebToUnity", "MQTTConnectFail");
            })
            //接受消息
            mqttClient.on('message', function (topic, message) {
                // message is Buffer
                //console.log("subNmae=" + topic.toString())
                //console.log("msg=" + message.toString())
                //mqttClient.end()
				if(topic==subNameReceive)
				{
					JsToUnityString(message.toString());
				}         
            })
        }
        //订阅
        function MQTTSubscribe(subNameReceive) {
            mqttClient.subscribe(subNameReceive, function (err) {
                if (!err) {
                    gameInstance.SendMessage("WebToUnity", "MQTTSubscribeResult", 1);
                }
                else {
                    gameInstance.SendMessage("WebToUnity", "MQTTSubscribeResult", 0);
                }
            })
        }
        //发布
        function MQTTPublish(subNameSend,content) {
            mqttClient.publish(subNameSend, content);
        }
        //关闭
        function MQTTClosed() {
            mqttClient.end();
        }


        function SetDebug() {
            return 1//设置是否显示debug信息，0=显示，1=不显示
        }
		//打开资源管理器选择文件
		function clickSelectFileBtn() {
		var tempFileLayout = document.getElementById('files');
        tempFileLayout.click();
		}
		//加载excel文件内容，发送给Unity
		function fileImport() {
		//获取读取文件的File对象		
        var selectedFile = document.getElementById('files').files[0];
        if (selectedFile != null) {
		var reader = new FileReader();
			reader.readAsBinaryString(selectedFile);
		reader.onload = function(e) {
		var data = e.target.result;
		var workbook = XLSX.read(data, {type: 'binary'});
	    var sheetNames = workbook.SheetNames; // 工作表名称集合
	    var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
	    var csv = XLSX.utils.sheet_to_csv(worksheet);
	    //console.log(csv);
	    var sendContent={"msgType":"openFile","data":csv};
	    JsToUnityString(window.JSON.stringify(sendContent));	
	};
		}
     	}
	  // 传入csv，执行后就会弹出下载框
	function exportExcel(csv) 
	{
		var csvobj = window.JSON.parse(newStr);
		var sheet = XLSX.utils.json_to_sheet(csvobj);
		openDownloadDialog(sheet2blob(sheet), '导出.xlsx');
	}
	  
	  /**
 * 通用的打开下载对话框方法，没有测试过具体兼容性
 * @param url 下载地址，也可以是一个blob对象，必选
 * @param saveName 保存文件名，可选
 */
function openDownloadDialog(url, saveName)
{
	if(typeof url == 'object' && url instanceof Blob)
	{
		url = URL.createObjectURL(url); // 创建blob地址
	}
	var aLink = document.createElement('a');
	aLink.href = url;
	aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
	var event;
	if(window.MouseEvent) event = new MouseEvent('click');
	else
	{
		event = document.createEvent('MouseEvents');
		event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	}
	aLink.dispatchEvent(event);
	if(typeof url == 'object' && url instanceof Blob)
	{
		URL.revokeObjectURL(url);
	}
}

// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {
	sheetName = sheetName || 'sheet1';
	var workbook = {
		SheetNames: [sheetName],
		Sheets: {}
	};
	workbook.Sheets[sheetName] = sheet;
	// 生成excel的配置项
	var wopts = {
		bookType: 'xlsx', // 要生成的文件类型
		bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
		type: 'binary'
	};
	var wbout = XLSX.write(workbook, wopts);
	var blob = new Blob([s2ab(wbout)], {type:"application/vnd.ms-excel"});
	// 字符串转ArrayBuffer
	function s2ab(s) {
		var buf = new ArrayBuffer(s.length);
		var view = new Uint8Array(buf);
		for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
		return buf;
	}
	return blob;
}

function saveFile(fileName, content) {
    openDownloadDialog(text2blob(content), fileName);
}

// 将一个字符串转成最终的blob对象，然后利用URL.createObjectURL下载
function text2blob(text) {
    var blob = new Blob([text], {
        type: "application/json"
    });
    // 字符串转ArrayBuffer
    function s2ab(text) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i)
            view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
    return blob;
}


    </script>
	<input type="file" id="files" style="display:none" onchange="fileImport()">//打开文件按钮，设置为隐藏，只使用功能。
  </body>
</html>