V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  ç™»å½•
darkce
V2EX  â€º  程序员

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

  •  
  •   darkce ·
    luoxuhai · 215 天前 · 4703 次点击
    这是一个创建于 215 天前的主题,其中的信息可能已经有所发展或是发生改变。

    简介

    目前有很多在浏览器运行 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 条附言  Â·  213 天前
    未来规划:

    1. 连接 WebGL
    2. 多文件支持
    31 条回复  â€¢  2023-07-27 19:06:18 +08:00
    sdtee
        1
    sdtee  
       214 天前 via Android
    好巧,我也做了个类似的东西😂 https://cppcli.net
    mineralsalt
        2
    mineralsalt  
       214 天前
    挺好的, 就是编辑器能不能优化一下, Tab 都输入不了
    awinds
        3
    awinds  
       214 天前
    wasm 在处理字符串上好像是有点问题
    eagleoflqj
        4
    eagleoflqj  
       214 天前
    见过类似的项目但都不维护了。期待早日实现自举,在浏览器编译 llvm 至 wasm 。
    然后一个浏览器内的 wasmOS (不是那些模拟 x86 的)就可以实现了!
    Alias4ck
        5
    Alias4ck  
       214 天前   ❤️ 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  
       214 天前
    就我而言,这种工具都有一个通病,那就编辑代码太难。 如果我能在其他地方编辑,为什么要在这里编译?因此,知道好几个类似的网站,但是很少用
    eagleoflqj
        7
    eagleoflqj  
       214 天前
    @Alias4ck 你给的这两个链接都是把代码送给服务器编译的,OP 是在浏览器内编译的,本质完全不同。
    darkce
        8
    darkce  
    OP
       214 天前 via iPhone
    @vfs 主要应用在编程教育领域,例如在浏览器调用 c++
    图形库绘图,如果使用远程编译的话不能或很难实现这一功能。
    mogg
        9
    mogg  
       214 天前
    @vfs #6 参考 https://godbolt.org/ ,核心痛点是可以
    1. 快速切编译器版本验证特性,cpp 编译器切个版本还挺难的
    2. 分享代码
    darkce
        10
    darkce  
    OP
       214 天前
    @mineralsalt 因为是个 Demo ,所以没专门优化编辑器,后续考虑引入代码编辑器组件
    tool2d
        11
    tool2d  
       214 天前
    光一个简单编译用处不大,你得能操作页面里的 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
       214 天前
    @tool2d 可以操作 dom 的,只是要写适配代码,后续会加上
    inhzus
        13
    inhzus  
       214 天前
    纳尼,和 godbolt.org 相比有什么优势吗
    jones2000
        14
    jones2000  
       214 天前
    WebAssembly 太鸡肋了。 想做点浏览器跟 PC 端程序的联动,都做不了,不支持 windows 操作窗口的函数。
    zhanlanhuizhang
        15
    zhanlanhuizhang  
       214 天前
    有直接运行 linux 的。
    darkce
        16
    darkce  
    OP
       214 天前
    @zhanlanhuizhang 那种体积太大了,而且不能直接通过 api 调用运行
    darkce
        17
    darkce  
    OP
       214 天前   ❤️ 1
    @inhzus 本地编译和远程编译的区别
    tool2d
        18
    tool2d  
       214 天前
    @jones2000 wasm 定位不一样,本来就是虚拟机,需要自己去对接 API 的。

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

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