目前有很多在浏览器运行 Python 的库。运行 C/C++ 库几乎没有,所以研究了下如何在浏览器运行 C/C++,开源了相应的 JS 库。
clang.js 一个在浏览器编译、链接、运行 C/C++ 代码的 JS 库。支持 C/C++ 标准库。完全在本地编译,无需网络即可工作。
首先把 Clang 和 LLD 编译为 WebAssembly 使其运行在浏览器中。然后使用 WebAssembly 版本 Clang 把 C/C++ 代码编译为 WebAssembly ,最后通过浏览器 API 运行 WebAssembly 。
GitHub
1 sdtee 2023-07-24 08:48:41 +08:00 via Android 好巧,我也做了个类似的东西 https://cppcli.net |
![]() | 2 mineralsalt 2023-07-24 08:55:33 +08:00 挺好的, 就是编辑器能不能优化一下, Tab 都输入不了 |
3 awinds 2023-07-24 08:58:43 +08:00 wasm 在处理字符串上好像是有点问题 |
4 eagleoflqj 2023-07-24 09:03:41 +08:00 见过类似的项目但都不维护了。期待早日实现自举,在浏览器编译 llvm 至 wasm 。 然后一个浏览器内的 wasmOS (不是那些模拟 x86 的)就可以实现了! |
5 Alias4ck 2023-07-24 09:10:22 +08:00 ![]() 其实你仔细搜一下 这种类型的 playground 还是有很多的 https://mbebenita.github.io/WasmExplorer/ https://www.sololearn.com/compiler-playground/cpp 你想找这种 playground ,git 上还是挺多的 https://github.com/mbasso/awesome-wasm#online-playground |
![]() | 6 vfs 2023-07-24 09:19:24 +08:00 就我而言,这种工具都有一个通病,那就编辑代码太难。 如果我能在其他地方编辑,为什么要在这里编译?因此,知道好几个类似的网站,但是很少用 |
7 eagleoflqj 2023-07-24 09:29:59 +08:00 @Alias4ck 你给的这两个链接都是把代码送给服务器编译的,OP 是在浏览器内编译的,本质完全不同。 |
![]() | 8 darkce OP @vfs 主要应用在编程教育领域,例如在浏览器调用 c++ 图形库绘图,如果使用远程编译的话不能或很难实现这一功能。 |
![]() | 9 mogg 2023-07-24 09:41:42 +08:00 |
![]() | 10 darkce OP @mineralsalt 因为是个 Demo ,所以没专门优化编辑器,后续考虑引入代码编辑器组件 |
![]() | 11 tool2d 2023-07-24 09:46:35 +08:00 光一个简单编译用处不大,你得能操作页面里的 DIV 才行。 这是一个叫 cheer 工具的演示代码: #include <cheerp/client.h> #include <cheerp/clientlib.h> using namespace client; void loadCallback() { HTMLElement* body=document.get_body(); HTMLElement* newTitle=document.createElement("h1"); newTitle->set_textContent("Hello World"); body->appendChild(newTitle); } void webMain() { document.addEventListener("DOMContentLoaded",cheerp::Callback(loadCallback)); } |
![]() | 13 inhzus 2023-07-24 10:22:11 +08:00 纳尼,和 godbolt.org 相比有什么优势吗 |
14 jones2000 2023-07-24 11:01:49 +08:00 WebAssembly 太鸡肋了。 想做点浏览器跟 PC 端程序的联动,都做不了,不支持 windows 操作窗口的函数。 |
15 zhanlanhuizhang 2023-07-24 11:03:56 +08:00 有直接运行 linux 的。 |
![]() | 16 darkce OP @zhanlanhuizhang 那种体积太大了,而且不能直接通过 api 调用运行 |
![]() | 18 tool2d 2023-07-24 11:42:03 +08:00 @jones2000 wasm 定位不一样,本来就是虚拟机,需要自己去对接 API 的。 你要操作 HWND ,直接调用 electron 的 getNativeWindowHandle 就可以了。浏览器不让操作,肯定不是 wasm 的锅。 |
19 x77 2023-07-24 11:48:33 +08:00 WASM 的原理是用 Javascript 翻译 C/C++,然后交给浏览器解释运行,并不是通过某种方法或机制实现浏览器原生运行 C/C++,本质还是 Javascript 。 由于功能有限(不能像 Native 那样为所欲为),并且这种做法牺牲效能,WASM 应用场景很有限,多数是以便利、通用性为目标,例如通过浏览器来演示 C/C++ 算法。 |
22 x77 2023-07-24 12:01:34 +08:00 ![]() 希望我的贴文不要影响作者的积极性 ^^,我本意是希望大家正确看待 WASM ,其实用来搞 C/C++ 教培、线上 C/C++ 考试都挺不错。 |
23 dayeye2006199 2023-07-24 12:31:25 +08:00 WASM 还是挺有用的。 最近 LLM 出来之后,有不少工作是在把模型 port 到浏览器客户端执行(配合 webGPU 和 ML compiler )。 |
![]() | 24 lynan 2023-07-24 14:04:24 +08:00 http://www.compumuseum.com/ 之前收藏的一个好玩的页面,也是用 WebAssembly 实现,可以在线体验一些经典操作系统。 |
25 xjqxz2 2023-07-24 16:56:34 +08:00 多个 C++文件也行吗? |
![]() | 26 learningman 2023-07-24 17:05:08 +08:00 via Android 三年前搞过,那个时候没有移植编译器,是在后端用 emscripten 编译成 wasm 的。 然后用 atomic wait 来模拟 stdio 的阻塞 |
![]() | 29 shiltian 2023-07-24 23:49:38 +08:00 鼓励楼主把这玩意儿给贡献到 LLVM 社区 :-) |