🔥 在浏览器实时运行 C/C++ 代码！

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 490 天前的主题，其中的信息可能已经有所发展或是发生改变。

简介

目前有很多在浏览器运行 Python 的库。运行 C/C++ 库几乎没有，所以研究了下如何在浏览器运行 C/C++，开源了相应的 JS 库。
clang.js 一个在浏览器编译、链接、运行 C/C++ 代码的 JS 库。支持 C/C++ 标准库。完全在本地编译，无需网络即可工作。

原理

首先把 Clang 和 LLD 编译为 WebAssembly 使其运行在浏览器中。然后使用 WebAssembly 版本 Clang 把 C/C++ 代码编译为 WebAssembly ，最后通过浏览器 API 运行 WebAssembly 。

示例

https://clangjs.netlify.app

应用场景

在线编程
C/C++ Playground

GitHub

https://github.com/luoxuhai/clang.js

第 1 条附言 · 2023-07-25 11:02:27 +08:00

未来规划：

1. 连接 WebGL
2. 多文件支持

clang

浏览器

编译

代码

31 条回复 • 2023-07-27 19:06:18 +08:00

sdtee

2023-07-24 08:48:41 +08:00 via Android

好巧，我也做了个类似的东西😂 https://cppcli.net

mineralsalt

2023-07-24 08:55:33 +08:00

挺好的, 就是编辑器能不能优化一下, Tab 都输入不了

awinds

2023-07-24 08:58:43 +08:00

wasm 在处理字符串上好像是有点问题

eagleoflqj

2023-07-24 09:03:41 +08:00

见过类似的项目但都不维护了。期待早日实现自举，在浏览器编译 llvm 至 wasm 。
然后一个浏览器内的 wasmOS （不是那些模拟 x86 的）就可以实现了！

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

vfs

2023-07-24 09:19:24 +08:00

就我而言，这种工具都有一个通病，那就编辑代码太难。如果我能在其他地方编辑，为什么要在这里编译？因此，知道好几个类似的网站，但是很少用

eagleoflqj

2023-07-24 09:29:59 +08:00

@Alias4ck 你给的这两个链接都是把代码送给服务器编译的，OP 是在浏览器内编译的，本质完全不同。

darkce

2023-07-24 09:41:29 +08:00 via iPhone

@vfs 主要应用在编程教育领域，例如在浏览器调用 c++
图形库绘图，如果使用远程编译的话不能或很难实现这一功能。

mogg

2023-07-24 09:41:42 +08:00

@vfs #6 参考 https://godbolt.org/ ，核心痛点是可以
1. 快速切编译器版本验证特性，cpp 编译器切个版本还挺难的
2. 分享代码

darkce

2023-07-24 09:45:42 +08:00

@mineralsalt 因为是个 Demo ，所以没专门优化编辑器，后续考虑引入代码编辑器组件

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));
}

darkce

2023-07-24 10:01:46 +08:00

@tool2d 可以操作 dom 的，只是要写适配代码，后续会加上

inhzus

2023-07-24 10:22:11 +08:00

纳尼，和 godbolt.org 相比有什么优势吗

jones2000

2023-07-24 11:01:49 +08:00

WebAssembly 太鸡肋了。想做点浏览器跟 PC 端程序的联动，都做不了，不支持 windows 操作窗口的函数。

zhanlanhuizhang

2023-07-24 11:03:56 +08:00

有直接运行 linux 的。

darkce

2023-07-24 11:08:49 +08:00

@zhanlanhuizhang 那种体积太大了，而且不能直接通过 api 调用运行

darkce

2023-07-24 11:10:13 +08:00

@inhzus 本地编译和远程编译的区别

tool2d

2023-07-24 11:42:03 +08:00

@jones2000 wasm 定位不一样，本来就是虚拟机，需要自己去对接 API 的。

你要操作 HWND ，直接调用 electron 的 getNativeWindowHandle 就可以了。浏览器不让操作，肯定不是 wasm 的锅。

x77

2023-07-24 11:48:33 +08:00

WASM 的原理是用 JavaScript 翻译 C/C++，然后交给浏览器解释运行，并不是通过某种方法或机制实现浏览器原生运行 C/C++，本质还是 JavaScript 。

由于功能有限（不能像 Native 那样为所欲为），并且这种做法牺牲效能，WASM 应用场景很有限，多数是以便利、通用性为目标，例如通过浏览器来演示 C/C++ 算法。