V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
darkce
V2EX  ›  程序员

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

  •  
  •   darkce · 2023-07-24 08:20:49 +08:00 · 5230 次点击
    这是一个创建于 467 天前的主题,其中的信息可能已经有所发展或是发生改变。

    简介

    目前有很多在浏览器运行 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. 多文件支持
    31 条回复    2023-07-27 19:06:18 +08:00
    sdtee
        1
    sdtee  
       2023-07-24 08:48:41 +08:00 via Android
    好巧,我也做了个类似的东西😂 https://cppcli.net
    mineralsalt
        2
    mineralsalt  
       2023-07-24 08:55:33 +08:00
    挺好的, 就是编辑器能不能优化一下, Tab 都输入不了
    awinds
        3
    awinds  
       2023-07-24 08:58:43 +08:00
    wasm 在处理字符串上好像是有点问题
    eagleoflqj
        4
    eagleoflqj  
       2023-07-24 09:03:41 +08:00
    见过类似的项目但都不维护了。期待早日实现自举,在浏览器编译 llvm 至 wasm 。
    然后一个浏览器内的 wasmOS (不是那些模拟 x86 的)就可以实现了!
    Alias4ck
        5
    Alias4ck  
       2023-07-24 09:10:22 +08:00   ❤️ 1
    其实你仔细搜一下 这种类型的 playground 还是有很多的

    https://mbebenita.github.io/WasmExplorer/
    https://www.sololearn.com/compiler-playground/cpp

    你想找这种 playground ,git 上还是挺多的
    https://github.com/mbasso/awesome-wasm#online-playground
    vfs
        6
    vfs  
       2023-07-24 09:19:24 +08:00
    就我而言,这种工具都有一个通病,那就编辑代码太难。 如果我能在其他地方编辑,为什么要在这里编译?因此,知道好几个类似的网站,但是很少用
    eagleoflqj
        7
    eagleoflqj  
       2023-07-24 09:29:59 +08:00
    @Alias4ck 你给的这两个链接都是把代码送给服务器编译的,OP 是在浏览器内编译的,本质完全不同。
    darkce
        8
    darkce  
    OP
       2023-07-24 09:41:29 +08:00 via iPhone
    @vfs 主要应用在编程教育领域,例如在浏览器调用 c++
    图形库绘图,如果使用远程编译的话不能或很难实现这一功能。
    mogg
        9
    mogg  
       2023-07-24 09:41:42 +08:00
    @vfs #6 参考 https://godbolt.org/ ,核心痛点是可以
    1. 快速切编译器版本验证特性,cpp 编译器切个版本还挺难的
    2. 分享代码
    darkce
        10
    darkce  
    OP
       2023-07-24 09:45:42 +08:00
    @mineralsalt 因为是个 Demo ,所以没专门优化编辑器,后续考虑引入代码编辑器组件
    tool2d
        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));
    }
    darkce
        12
    darkce  
    OP
       2023-07-24 10:01:46 +08:00
    @tool2d 可以操作 dom 的,只是要写适配代码,后续会加上
    inhzus
        13
    inhzus  
       2023-07-24 10:22:11 +08:00
    纳尼,和 godbolt.org 相比有什么优势吗
    jones2000
        14
    jones2000  
       2023-07-24 11:01:49 +08:00
    WebAssembly 太鸡肋了。 想做点浏览器跟 PC 端程序的联动,都做不了,不支持 windows 操作窗口的函数。
    zhanlanhuizhang
        15
    zhanlanhuizhang  
       2023-07-24 11:03:56 +08:00
    有直接运行 linux 的。
    darkce
        16
    darkce  
    OP
       2023-07-24 11:08:49 +08:00
    @zhanlanhuizhang 那种体积太大了,而且不能直接通过 api 调用运行
    darkce
        17
    darkce  
    OP
       2023-07-24 11:10:13 +08:00   ❤️ 1
    @inhzus 本地编译和远程编译的区别
    tool2d
        18
    tool2d  
       2023-07-24 11:42:03 +08:00
    @jones2000 wasm 定位不一样,本来就是虚拟机,需要自己去对接 API 的。

    你要操作 HWND ,直接调用 electron 的 getNativeWindowHandle 就可以了。浏览器不让操作,肯定不是 wasm 的锅。
    x77
        19
    x77  
       2023-07-24 11:48:33 +08:00
    WASM 的原理是用 JavaScript 翻译 C/C++,然后交给浏览器解释运行,并不是通过某种方法或机制实现浏览器原生运行 C/C++,本质还是 JavaScript 。

    由于功能有限(不能像 Native 那样为所欲为),并且这种做法牺牲效能,WASM 应用场景很有限,多数是以便利、通用性为目标,例如通过浏览器来演示 C/C++ 算法。
    vincent20
        20
    vincent20  
       2023-07-24 11:54:23 +08:00
    @x77 请教一下,不是说 wasm 性能并没有变差吗
    x77
        21
    x77  
       2023-07-24 11:57:11 +08:00
    @vincent20
    相对于主机原生运行 C/C++ 来说牺牲效能
    x77
        22
    x77  
       2023-07-24 12:01:34 +08:00   ❤️ 2
    希望我的贴文不要影响作者的积极性 ^^,我本意是希望大家正确看待 WASM ,其实用来搞 C/C++ 教培、线上 C/C++ 考试都挺不错。
    dayeye2006199
        23
    dayeye2006199  
       2023-07-24 12:31:25 +08:00
    WASM 还是挺有用的。
    最近 LLM 出来之后,有不少工作是在把模型 port 到浏览器客户端执行(配合 webGPU 和 ML compiler )。
    lynan
        24
    lynan  
       2023-07-24 14:04:24 +08:00
    http://www.compumuseum.com/
    之前收藏的一个好玩的页面,也是用 WebAssembly 实现,可以在线体验一些经典操作系统。
    xjqxz2
        25
    xjqxz2  
       2023-07-24 16:56:34 +08:00
    多个 C++文件也行吗?
    learningman
        26
    learningman  
       2023-07-24 17:05:08 +08:00 via Android
    三年前搞过,那个时候没有移植编译器,是在后端用 emscripten 编译成 wasm 的。
    然后用 atomic wait 来模拟 stdio 的阻塞
    icyalala
        27
    icyalala  
       2023-07-24 17:13:26 +08:00
    @vincent20 wasm 一般能达到 native 的 1/2 到 1/3 性能吧
    jones2000
        28
    jones2000  
       2023-07-24 23:13:49 +08:00
    @tool2d 用 electron , 还不如直接用 CEF 。
    tianshilei1992
        29
    tianshilei1992  
       2023-07-24 23:49:38 +08:00
    鼓励楼主把这玩意儿给贡献到 LLVM 社区 :-)
    horou
        30
    horou  
       2023-07-25 16:36:37 +08:00   ❤️ 1
    @x77 wasm 最大的作用还是可以复用现有的 c/c 艹/rust 开发的与平台无关的库,还有就是性能会相较 js 好很多。比如 ffmpeg ,和各大模拟器都可以编译成 wasm 在浏览器上直接运行。
    vincent20
        31
    vincent20  
       2023-07-27 19:06:18 +08:00
    @icyalala 好的,性能没有变差应该是指迁移到 js 的过程中相比直接写 js 做了些优化吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1105 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 19:31 · PVG 03:31 · LAX 12:31 · JFK 15:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.