之前跟着rust and webassembly写了第一个wasm。现在想改写之前的一个html小程序。
这个小程序100kb,发布出来只有一个html页面,内嵌JS代码,使用window.onload直接调用。根据输入框内容不同,或者点击某个控件,改变输出框的内容。html打开即用。但是rust and webassembly书里的程序,需要先开服务器端,再打开页面,太麻烦了?有什么办法让发布的时候只有html+js+wasm文件,然后点击html就可以使用吗?
我尝试了下把bootstrap.js和index.js外围也加上window.onload,妄图打开index.html就能看到生命游戏在运行,但控制台提示cors请求不是http。中英文搜索都没找到怎么无服务器端载入wasm。我平时只写命令行程序,第一次写带UI的,html和JS也是当时花了一天现学的,现在把我也给整迷茫了。
1
共 19 条评论, 1 页
评论区
写评论这个操作我没懂,谷歌了一下,也没啥帖子提到啊。但是到让我搜到了不少,怎么直接instantialiateStreaming(fetch(...wasm))的办法。
--
👇
any35: 用不着那么麻烦, 打包的时候把WASM以Hex的形式和js代码一起直接嵌入html的script就行了.
用不着那么麻烦, 打包的时候把WASM以Hex的形式和js代码一起直接嵌入html的script就行了.
谢谢,又学到了!
--
👇
Aya0wind: 只是把几个文件一起包进exe的话,enigma virtual box可以一键打包,以前我做Qt程序就是用它把各种dll包进exe里去的,就只要把exe文件和html一起丢进去就行了。
--
👇
eweca: 好家伙,我直呼好家伙。有道理哈。缺点就是我不会搞。不打包成一个的话倒是可能会,哈哈。
--
👇
ywxt: 可以直接打包一个服务器,编译成可执行文件就行了。 打开之后开启服务器并打开浏览器。
只是把几个文件一起包进exe的话,enigma virtual box可以一键打包,以前我做Qt程序就是用它把各种dll包进exe里去的,就只要把exe文件和html一起丢进去就行了。
--
👇
eweca: 好家伙,我直呼好家伙。有道理哈。缺点就是我不会搞。不打包成一个的话倒是可能会,哈哈。
--
👇
ywxt: 可以直接打包一个服务器,编译成可执行文件就行了。 打开之后开启服务器并打开浏览器。
好家伙,我直呼好家伙。有道理哈。缺点就是我不会搞。不打包成一个的话倒是可能会,哈哈。
--
👇
ywxt: 可以直接打包一个服务器,编译成可执行文件就行了。 打开之后开启服务器并打开浏览器。
可以直接打包一个服务器,编译成可执行文件就行了。 打开之后开启服务器并打开浏览器。
因为我并不是给客户提供服务,如字面意思,真的只是一个单纯的功能简单的免费的小程序。为爱发电还要贴钱搞云服务器我可不干咧。免费的云服务器的话我倒是考虑下是不是有必要使用。
使用web做,最主要是因为这个小程序之前使用QT做,发现界面丑不说,要拓展功能太费力气了,而且不同分辨率下的适配是一个大问题。我又不是商软,为爱发电感觉没必要为了使用者花这么大力气。web写UI是真心方便才用web做的。真的单纯就是为了写UI方便才用js技术的。
而wasm只是一个尝试而已,主要想要学习一下wasm技术,这个软件实际上压根计算量不大。其实倒真的没必要上wasm。我对rust远比js熟悉,也是想着用rust维护起来方便点。如果wasm现阶段如此麻烦,我继续维护这个程序的时候倒不如继续学着写JavaScript了。
谢谢你的建议!
--
👇
Aya0wind: 你要给别人用的话,何不起一个云服务器然后把项目部署上去呢?web应用有一个服务器这个要求也很基本吧。如果你是要写一个基于web技术的桌面应用,那可以用上面说的electron,vscode就是使用这种方式,把浏览器服务器全部打包进app。就是打出来的包有点大。
--
👇
eweca: 这里其实有个两难的境地。如果是我自己用,那么我丝毫不介意先起一个服务器端,再运行网页程序。那就用不到各种关策略,加载debug模式了;如果是分发给其他人用,他们绝大部分完全不懂这些东西,只想要一个即开即用(甚至最好只有一个文件)的小程序,那根本无法苛求他们再去做各种操作了。
所以,谢谢你,但这个办法应该没法使用呀。
--
👇
Aya0wind: 还有个办法,你可以把浏览器的CORS策略关了,chrome有这个插件,就是拿来本地调试用的,不过我没试过,你可以去试试。
我最开始就是想用electron,但发现程序很大不用说,而且写了半天最后发现直接发布我写的index.html就好了,压根不用打包,因为大家都有浏览器。Tauri我瞅瞅,谢谢哈。
--
👇
birdinforest: 如果目的是作为一个本地运行的app分发给别人,可以考虑使用Electron(https://www.electronjs.org/)把web项目打包。可以做到跨平台。
Electron的缺点是包体比较大,优点是在各个平台web页面展示效果统一。
Rust有个类似的项目Tauri(https://github.com/tauri-apps/tauri)。包体很小,但是在不同的平台有可能会页面效果不同,个人猜测对于简单的应用应该没有太大问题。
Electron与Tauri的作用大致是: 使用http与css写GUI界面,利用nodejs或者rust写后台服务器。Electron(Tauri)把他们连同一个浏览器塞进一个包里,变成一个可执行文件,在各个平台运行。
这个解释不太专业,但是希望可以帮助你有个大致的理解。
还有一个方案就是直接找一个免费的云平台把你做的web app放上去给别人用,其实可能是最方便的。 例如 Heroku(https://www.heroku.com/),可以免费使用,还可以链接github,在每次推送后自动构建,挺好的。唯一的缺点是停止使用30分钟如果重新访问的话,会有十秒(大概?)的启动时间。
--
👇
eweca: 这里其实有个两难的境地。如果是我自己用,那么我丝毫不介意先起一个服务器端,再运行网页程序。那就用不到各种关策略,加载debug模式了;如果是分发给其他人用,他们绝大部分完全不懂这些东西,只想要一个即开即用(甚至最好只有一个文件)的小程序,那根本无法苛求他们再去做各种操作了。
所以,谢谢你,但这个办法应该没法使用呀。
--
👇
Aya0wind: 还有个办法,你可以把浏览器的CORS策略关了,chrome有这个插件,就是拿来本地调试用的,不过我没试过,你可以去试试。
你要给别人用的话,何不起一个云服务器然后把项目部署上去呢?web应用有一个服务器这个要求也很基本吧。如果你是要写一个基于web技术的桌面应用,那可以用上面说的electron,vscode就是使用这种方式,把浏览器服务器全部打包进app。就是打出来的包有点大。
--
👇
eweca: 这里其实有个两难的境地。如果是我自己用,那么我丝毫不介意先起一个服务器端,再运行网页程序。那就用不到各种关策略,加载debug模式了;如果是分发给其他人用,他们绝大部分完全不懂这些东西,只想要一个即开即用(甚至最好只有一个文件)的小程序,那根本无法苛求他们再去做各种操作了。
所以,谢谢你,但这个办法应该没法使用呀。
--
👇
Aya0wind: 还有个办法,你可以把浏览器的CORS策略关了,chrome有这个插件,就是拿来本地调试用的,不过我没试过,你可以去试试。
更正一下,Electron是把Chromium打包进去。Tauri不会把浏览器塞进去,而是使用运行平台上的webkit内核。
--
👇
birdinforest: 如果目的是作为一个本地运行的app分发给别人,可以考虑使用Electron(https://www.electronjs.org/)把web项目打包。可以做到跨平台。
Electron的缺点是包体比较大,优点是在各个平台web页面展示效果统一。
Rust有个类似的项目Tauri(https://github.com/tauri-apps/tauri)。包体很小,但是在不同的平台有可能会页面效果不同,个人猜测对于简单的应用应该没有太大问题。
Electron与Tauri的作用大致是: 使用http与css写GUI界面,利用nodejs或者rust写后台服务器。Electron(Tauri)把他们连同一个浏览器塞进一个包里,变成一个可执行文件,在各个平台运行。
这个解释不太专业,但是希望可以帮助你有个大致的理解。
还有一个方案就是直接找一个免费的云平台把你做的web app放上去给别人用,其实可能是最方便的。 例如 Heroku(https://www.heroku.com/),可以免费使用,还可以链接github,在每次推送后自动构建,挺好的。唯一的缺点是停止使用30分钟如果重新访问的话,会有十秒(大概?)的启动时间。
--
👇
eweca: 这里其实有个两难的境地。如果是我自己用,那么我丝毫不介意先起一个服务器端,再运行网页程序。那就用不到各种关策略,加载debug模式了;如果是分发给其他人用,他们绝大部分完全不懂这些东西,只想要一个即开即用(甚至最好只有一个文件)的小程序,那根本无法苛求他们再去做各种操作了。
所以,谢谢你,但这个办法应该没法使用呀。
--
👇
Aya0wind: 还有个办法,你可以把浏览器的CORS策略关了,chrome有这个插件,就是拿来本地调试用的,不过我没试过,你可以去试试。
如果目的是作为一个本地运行的app分发给别人,可以考虑使用Electron(https://www.electronjs.org/)把web项目打包。可以做到跨平台。
Electron的缺点是包体比较大,优点是在各个平台web页面展示效果统一。
Rust有个类似的项目Tauri(https://github.com/tauri-apps/tauri)。包体很小,但是在不同的平台有可能会页面效果不同,个人猜测对于简单的应用应该没有太大问题。
Electron与Tauri的作用大致是: 使用http与css写GUI界面,利用nodejs或者rust写后台服务器。Electron(Tauri)把他们连同一个浏览器塞进一个包里,变成一个可执行文件,在各个平台运行。
这个解释不太专业,但是希望可以帮助你有个大致的理解。
还有一个方案就是直接找一个免费的云平台把你做的web app放上去给别人用,其实可能是最方便的。 例如 Heroku(https://www.heroku.com/),可以免费使用,还可以链接github,在每次推送后自动构建,挺好的。唯一的缺点是停止使用30分钟如果重新访问的话,会有十秒(大概?)的启动时间。
--
👇
eweca: 这里其实有个两难的境地。如果是我自己用,那么我丝毫不介意先起一个服务器端,再运行网页程序。那就用不到各种关策略,加载debug模式了;如果是分发给其他人用,他们绝大部分完全不懂这些东西,只想要一个即开即用(甚至最好只有一个文件)的小程序,那根本无法苛求他们再去做各种操作了。
所以,谢谢你,但这个办法应该没法使用呀。
--
👇
Aya0wind: 还有个办法,你可以把浏览器的CORS策略关了,chrome有这个插件,就是拿来本地调试用的,不过我没试过,你可以去试试。
这里其实有个两难的境地。如果是我自己用,那么我丝毫不介意先起一个服务器端,再运行网页程序。那就用不到各种关策略,加载debug模式了;如果是分发给其他人用,他们绝大部分完全不懂这些东西,只想要一个即开即用(甚至最好只有一个文件)的小程序,那根本无法苛求他们再去做各种操作了。
所以,谢谢你,但这个办法应该没法使用呀。
--
👇
Aya0wind: 还有个办法,你可以把浏览器的CORS策略关了,chrome有这个插件,就是拿来本地调试用的,不过我没试过,你可以去试试。
还有个办法,你可以把浏览器的CORS策略关了,chrome有这个插件,就是拿来本地调试用的,不过我没试过,你可以去试试。
嗯,好的,谢谢。我先试试arraybuffer相关的。如果搞不定我估计只能等生态的完成了。
--
👇
madolchepalooza: 根据MDN的说法:
因此要通过某种方式(XMLHttpRequest)来加载本地的wasm文件,但是由于跨域请求的原因,貌似无法通过正常方式读取,只能开启debug模式。
不过既然在使用前wasm代码是处于ArrayBuffer的状态,感觉可以试试用FileReader手动读取本地wasm文件为ArrayBuffer。。
wasm没试过,以前加载glsl的时候这个方法是管用的
--
👇
eweca: XMLHttpRequest(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。
但是没看出来和我这个问题提有啥联系呀。。。
--
👇
madolchepalooza: 好像有个
XMLHttpRequest
的方法,但是印象里也需要浏览器开启debug模式 总之可以试试以debug模式启动浏览器你这个我运行不了。
控制台警告:
index.js
: TypeError: error loading dynamically imported module--
👇
gwy15: 这跟 wasm 没关系,是浏览器的策略。
你没提供项目结构,不知道你具体问题,但是一般来说这样写是可以的
这跟 wasm 没关系,是浏览器的策略。
你没提供项目结构,不知道你具体问题,但是一般来说这样写是可以的
根据MDN的说法:
因此要通过某种方式(XMLHttpRequest)来加载本地的wasm文件,但是由于跨域请求的原因,貌似无法通过正常方式读取,只能开启debug模式。
不过既然在使用前wasm代码是处于ArrayBuffer的状态,感觉可以试试用FileReader手动读取本地wasm文件为ArrayBuffer。。
wasm没试过,以前加载glsl的时候这个方法是管用的
--
👇
eweca: XMLHttpRequest(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。
但是没看出来和我这个问题提有啥联系呀。。。
--
👇
madolchepalooza: 好像有个
XMLHttpRequest
的方法,但是印象里也需要浏览器开启debug模式 总之可以试试以debug模式启动浏览器XMLHttpRequest(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。
但是没看出来和我这个问题提有啥联系呀。。。
--
👇
madolchepalooza: 好像有个
XMLHttpRequest
的方法,但是印象里也需要浏览器开启debug模式 总之可以试试以debug模式启动浏览器好像有个
XMLHttpRequest
的方法,但是印象里也需要浏览器开启debug模式 总之可以试试以debug模式启动浏览器