Unity | 发布WebGL遇到的那些事儿

目录

一、跨域问题

二、InputFeild输入框不支持复制粘贴问题

三、读取本地文件失败问题

1. 先附个WebGL的页面效果

2. 在Unity Assets/Plugins目录下创建jslib文件FileDialog.jslib

3.Js模版

4.Unity中调用 

5.打包测试

四、补充说明

        最近想开发一个提效工具，用于删除现有的云端（比如阿里云、腾讯云等。我们公司的是未来云）资源，并上传新的文件（我们处理的是unity热更资源，包括bundle文件和zip文件）到云端。为了方便mac和windows都可用，准备用unity发布WebGL的方式实现。想着应该很简单，因为这个功能已经在Unity 编辑器内实现了，如下：

        还是年轻，想的太简单了。Unity发布WebGL后发现一堆一堆一堆坑，解决了一周时间，终于柳暗花明又一村。现在总结一下这些坑及解决方式。

  1. 发布WebGL后，需要部署到服务端，或者本地搭建环境模拟线上环境。
  2. 发布WebGL后，遇到了跨域问题，原先可成功调用的上传、删除等接口报405错误
  3. 发布WebGL后，InputFeild输入框不支持复制粘贴
  4. 最重要的问题，本地文件读取不了了

        接下来依次来解决234问题。

一、跨域问题

        解决方法：确保API服务器在响应头中设置了适当的CORS头，例如Access-Control-Allow-Origin。这可以是通配符 (*)，但更安全和推荐的方法是指定确切的域名（如 http://example.com）

        幸好公司提供的未来云平台支持设置跨域（跨域问题直接让提供API的服务器伙伴解决）：

二、InputFeild输入框不支持复制粘贴问题

        Unity插件unity-webgl-copy-and-paste-v0.2.0.unitypackage即可解决这个问题，看了下原理，也是采用和JS交互来解决的。

三、读取本地文件失败问题

        由于浏览器的安全设置，System.IO读取本地文件的大部分功能都会受限。比如之前获取本地文件夹中文件列表、读取本地文件的代码都不支持：

  1.     private static Queue<string> GetLocalFileLists(string dirPath, bool onlyZip = false)
  2.     {
  3.         Queue<string> fileList = new Queue<string>();
  4.         if (Directory.Exists(dirPath))
  5.         {
  6.             string[] files = Directory.GetFiles(dirPath);
  7.             for (int i = 0; i < files.Length; i++)
  8.             {
  9.                 Debug.Log("local files:" + files[i]);
  10.                 if (onlyZip && !files[i].Contains(".zip"))
  11.                 {
  12.                     Debug.Log("只上传zip文件,跳过：" + files[i]);
  13.                     continue;
  14.                 }
  15.                 fileList.Enqueue(files[i]);
  16.             }
  17.         }
  18.         return fileList;
  19.     }
  1.     private static byte[] LoadData(string path)
  2.     {
  3.         Debug.Log("LoadData path:" + path);
  4.         return System.IO.File.ReadAllBytes(path);
  5.     }
  6.     
  7.      private static byte[] LoadData(string path)
  8.     {
  9.          FileStream fs = new FileStream(path, FileMode.Open);
  10.          byte[] data = new byte[fs.Length];
  11.          fs.Read(data, 0, data.Length);
  12.          fs.Close();
  13.          return data;
  14.     }

        网上大佬前辈们和ChatGpt都建议使用Unity WebGL和JS交互来解决这个问题。先说一下原理：浏览器沙盒目录中的文件才支持读取。那我们需要利用JS创建一个文件夹选择对话框来选择要操作的文件，将文件列表发送给Unity WebGL，在Unity中利用UnityWebRequest将文件加载到浏览器沙盒目录下。就这么简单。来吧展示！

1. 先附个WebGL的页面效果

2. 在Unity Assets/Plugins目录下创建jslib文件FileDialog.jslib

  1. mergeInto(LibraryManager.library, {
  2.     LoadFolder: function(_gameObjectName, _isZip) {
  3.         console.log('Pointers:', {
  4.             gameObjectName: _gameObjectName,
  5.             isZip: _isZip
  6.         });
  7.         var gameObjectName = UTF8ToString(_gameObjectName);
  8.         var isZip = UTF8ToString(_isZip);
  9.         
  10.         console.log('LoadFolder called for GameObject:', gameObjectName);
  11.         console.log('LoadFolder called for ISZip:', isZip);
  12.  
  13.         // 创建新的文件输入元素
  14.         console.log('Creating new file input element.');
  15.         var fileInput = document.createElement('input');
  16.         fileInput.type = 'file';
  17.         fileInput.id = 'folderInput';
  18.         fileInput.webkitdirectory = true;  // 允许选择文件夹
  19.         fileInput.multiple = true; // 允许多选文件
  20.         fileInput.style.display = 'none';  // 隐藏元素
  21.  
  22.         document.body.appendChild(fileInput);
  23.  
  24.         // 定义事件处理函数
  25.         var fileInputChangeHandler = function(event) {
  26.             console.log('File selection changed.'); // 输出文件选择发生变化的信息
  27.             var files = Array.from(event.target.files);
  28.             console.log('Selected files:', files); // 输出所选文件的信息
  29.             var fileNames = files.map(file => ({
  30.                 name: file.name,
  31.                 blobPath: URL.createObjectURL(file),
  32.                 localPath: file.webkitRelativePath || file.name
  33.             }));
  34.  
  35.             var resultString = JSON.stringify({ files: fileNames });
  36.             console.log('Sending file dialog result:', resultString);  // 输出要发送到 Unity 的结果信息
  37.  
  38.             // 确保 gameInstance 已正确初始化
  39.             if (window.gameInstance) {
  40.                 var message = isZip + "|" + resultString;
  41.                 window.gameInstance.SendMessage(gameObjectName, 'FileDialogResult', message);
  42.             } else {
  43.                 console.error('gameInstance is not defined');
  44.             }
  45.  
  46.             // 移除事件监听器并删除输入元素
  47.             fileInput.removeEventListener('change', fileInputChangeHandler);
  48.             document.body.removeChild(fileInput);
  49.         };
  50.  
  51.         // 添加事件监听器
  52.         fileInput.addEventListener('change', fileInputChangeHandler);
  53.  
  54.         console.log('Triggering file input click.');
  55.         fileInput.click();
  56.     }
  57. });

（1）LoadFolder函数支持Unity调用，该函数有两个参数，第一个是Unity中挂载脚本的物体名，第二个参数是我根据需求来设置传zip文件还是普通文件。所有C#传给js的字符串都需要用Pointer_stringify（或UTF8ToString 2021.2版本及以上）转化一遍，才能转化成js识别的字符串。官方文档：Interaction with browser scripting - Unity 手册

（2）调用LoadFolder函数，会创建文件夹选择对话框。当选择的文件有变化时，会触发fileInputChangeHandler函数，函数中会通过（gameInstance）Unity的SendMessage函数来进行通知，调用挂载脚本的FileDialogResult函数，传递文件列表。

（3）文件列表数据如下：

  1. Sending file dialog result: {"files":
  2. [
  3. {
  4. "name":".DS_Store",
  5. "blobPath":"blob:https://static0.xesimg.com/aa004c1f-947a-4237-8e15-cfd86b50281e",
  6. "localPath":"zip/.DS_Store"
  7. },
  8. {
  9. "name":"Android_Resource_base.zip",
  10. "blobPath":"blob:https://static0.xesimg.com/d3df1350-032a-4e2e-89d4-d2185f9015cf",
  11. "localPath":"zip/Android_Resource_base.zip"
  12. }
  13. ]}

        注意文件列表中的blobPath值（blob：xxx的形式），这种形式才能被WebRequest读取到，再加载到浏览器沙盒目录下。沙盒目录下路径为：:/idbfs/bad4f2aac7af9d794a38b7e22b79d351/Res/Android_Resource_base.zip

（4）由于SendMessage只支持一个参数，在这里把isZip和文件列表信息合并在了一个字符串中。当然也可封装成一个json字符串。

（5）gameInstance是什么呢？gameInstance是unity运行实例，有的叫unityInstance或者别的东西，具体看自己js模版中定义的变量。

（6）JS代码中每次调用LoadFolder都创建fileInput对话框，及时销毁即可，防止内存泄漏。因为本人出现过【第一次调用LoadFolder函数isZip是true，第二次传的是false，但第二次isZip返回到unity的还是true】的问题及【change监听触发多次】的问题。可能在于 fileInputChangeHandler 函数中 isZip 变量的值没有及时更新，导致多次调用 LoadFolder 时使用的是上一次调用时的参数值。

3.Js模版

        补充index.html文件，来实例化gameInstance：

4.Unity中调用 

  1. [System.Serializable]
  2. public class FileList
  3. {
  4.     public FileDetail[] files;
  5. }
  6.  
  7. [System.Serializable]
  8. public class FileDetail
  9. {
  10.     public string name;
  11.     public string blobPath;
  12.     public string localPath;
  13. }
  14.  
  15. public class ToolView : MonoBehaviour
  16. {
  17.     [DllImport("__Internal")]
  18.     private static extern void LoadFolder(string gameObjectName, string isZip);
  19.   
  20.     private Button zipPathButton;
  21.     private Button resPathButton;
  22.  
  23.     private void Awake()
  24.     {
  25.         zipPathButton = transform.Find("ZipPath/ZipPathButton").GetComponent
  26.         zipPathButton.onClick.AddListener(() =>
  27.         {
  28.             GetLocalFileLists(true);
  29.         });
  30.  
  31.         resPathButton = transform.Find("ResPath/ResPathButton").GetComponent
  32.         resPathButton.onClick.AddListener(() =>
  33.         {
  34.             GetLocalFileLists(false);
  35.         });
  36.     }
  37.     public void GetLocalFileLists(bool isZip = false)
  38.     {
  39.         string _iszip = isZip ? "true" : "false";
  40.         string name = gameObject.name;
  41.         Debug.Log("Unity GetLocalFileLists " + "isZip: " + _iszip + " name: " + name);
  42.         LoadFolder(name, _iszip);
  43.     }
  44.  
  45.     public void FileDialogResult(string message)
  46.     {
  47.         Debug.Log("Unity FileDialogResult: " + message);
  48.         string[] messages = message.Split('|');
  49.         string filesJson = messages[1];
  50.         bool isZip = bool.Parse(messages[0]);
  51.         if (isZip)
  52.         {
  53.             zipLocalFileList.Clear();
  54.         }
  55.         else
  56.         {
  57.             resLocalFileList.Clear();
  58.         }
  59.         var files = JsonUtility.FromJson(filesJson);
  60.         needCopyCount = files.files.Length;
  61.         Debug.Log("Received files:" + needCopyCount);
  62.         copyCount = 0;
  63.         foreach (var file in files.files)
  64.         {
  65.             StartCoroutine(CopyFile(file, isZip));
  66.         }
  67.     }
  68.  
  69.     int copyCount = 0;
  70.     int needCopyCount = 0;
  71.     IEnumerator CopyFile(FileDetail jsFileInfo, bool isZip = false)
  72.     {
  73.         // Debug.Log("Unity CopyFile: " + jsFileInfo.name + " - " + jsFileInfo.path);
  74.         UnityWebRequest request = UnityWebRequest.Get(jsFileInfo.blobPath);
  75.         //创建文件夹
  76.         string dirPath = Path.Combine(Application.persistentDataPath, "Res");
  77.         // Debug.Log("将被存至目录：" + dirPath);
  78.         if (!Directory.Exists(dirPath))
  79.         {
  80.             Directory.CreateDirectory(dirPath);
  81.         }
  82.         string fullPath = Path.Combine(dirPath, jsFileInfo.name);
  83.         request.downloadHandler = new DownloadHandlerFile(fullPath);//路径+文件名
  84.  
  85.         // Debug.Log("复制到沙盒ing:" + fullPath);
  86.         yield return request.SendWebRequest();
  87.         if (request.result == UnityWebRequest.Result.Success)
  88.         {
  89.             copyCount++;
  90.             Debug.Log("复制到沙盒完成:" + fullPath + "," + copyCount);
  91.  
  92.             if (isZip)
  93.             {
  94.                 if (fullPath.EndsWith(".zip"))
  95.                 {
  96.                     zipLocalFileList.Enqueue(fullPath);
  97.                 }
  98.             }
  99.             else
  100.             {
  101.                 resLocalFileList.Enqueue(fullPath);
  102.             }
  103.  
  104.             if (needCopyCount == copyCount)
  105.             {
  106.                 if (isZip)
  107.                 {
  108.                     zipPathInputField.text = ".../" + jsFileInfo.localPath;
  109.                 }
  110.                 else
  111.                 {
  112.                     resPathInputField.text = ".../" + jsFileInfo.localPath;
  113.                 }
  114.             }
  115.         }
  116.         else
  117.         {
  118.             Debug.Log(request.error);
  119.         }
  120.     }
  121. }

        文件拷贝到浏览器沙盒目录后， 即可使用​​​​​​​System.IO.File.ReadAllBytes(path)加载文件喽：

  1.              while (localFileList.Count > 0)
  2.             {
  3.                 string item = zipLocalFileList.Dequeue();
  4.                 byte[] data = LoadData(item);
  5.  
  6.                 if (data != null)
  7.                 {
  8.                     Debug.Log("LoadData succeed");
  9.                     //...
  10.                 }
  11.             }

5.打包测试

        注意Editor模式运行会报错EntryPointNotFoundException。需要打包运行测试。

四、补充说明

1.使用Chrome浏览器来运行WebGL，Safari浏览器无法弹出文件夹选择对话框。

2.运行WebGL偶现报错，清理浏览器缓存后解决，后续解决后补充。

注：本文转载自blog.csdn.net的烫青菜的文章"https://blog.csdn.net/weixin_39766005/article/details/144917512"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！