How can I run an interactive program compiled with Emscripten in a web page?

Question

I've got a simple program, say the following:

#include <stdio.h>

int main()
{
    char buf[100];
    while (fgets(buf, sizeof(buf), stdin) != NULL) {
        printf("You typed: %s", buf);
    }
}

and I have compiled it using Emscripten:

emcc -o hello.html hello.cpp

This gives me a pretty basic Emscripten-generated web page that contains a simple window for program output. However, the fgets() call causes a browser popup window, presumably from prompt(). I can type things, and the results eventually get shown in the output window. This is not an ideal interactive experience.

What I would like is a more conventional "console" interface, where the user can type interactively in the terminal window to supply input to the interactive program.

I suspect the solution may lie in something like JQueryTerminal, Hyper, or Xterm.js, but I am so far unclear on how to actually connect any of those to an Emscripten-compiled program.

How can I provide a "console" interface to my Emscripten code?

Answer 1

It's not exactly what you wanted, I think that is not possible, but here is Prof of Concept of Async code, it abuse fetch API in C and use Proxy in JavaScript for XHR that handle messages from C. You can extend it to have any async code that need to be done in JS. The example use jQuery Terminal and it behave exactly as your example C code.

https://gist.github.com/jcubic/87f2b4c5ef567be43796e179ca08c0da

I've also created an issue about async code in emscripten repo

EDIT: Someone was able to compile R programming language to WebAssemly with this approach: https://github.com/georgestagg/webR