jcubic/compile

## compile
emcc -o main.html -s FETCH=1 -s NO_EXIT_RUNTIME=0 main.c

## main.c
#include <stdio.h>
#include <string.h>
#include <emscripten/fetch.h>

int i = 0;

void read_async();

void read_success(emscripten_fetch_t *fetch) {
    printf("You typed: %s\n", fetch->data);
    emscripten_fetch_close(fetch);
    if (strlen(fetch->data) > 0 || i++ == 5) {
        read_async();
    }
}

void read_fail(emscripten_fetch_t *fetch) {
    emscripten_fetch_close(fetch);
}

void read_async() {
    emscripten_fetch_attr_t attr;
    emscripten_fetch_attr_init(&attr);
    strcpy(attr.requestMethod, "GET");
    attr.attributes = EMSCRIPTEN_FETCH_LOAD_TO_MEMORY;
    attr.onsuccess = read_success;
    attr.onerror = read_fail;
    emscripten_fetch(&attr, "___terminal::read");
}

int main() {
    read_async();
}

## terminal.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.rawgit.com/jcubic/jquery.terminal/master/js/jquery.terminal.min.js"></script>
<link href="https://cdn.rawgit.com/jcubic/jquery.terminal/master/css/jquery.terminal.min.css" rel="stylesheet"/>
  <script src="https://unpkg.com/xhr-mock/dist/xhr-mock.js"></script>
  </head>
  <body>
  </body>
  <script>
   var term = $('body').terminal();
   var re = /^___terminal::/;
    // XHR proxy that handle methods from fetch in C
   window.XMLHttpRequest = (function(xhr) {
       return function() {
           var url;
           var props = {
               readyState: 4,
               status: 200
           };
           var enc = new TextEncoder("utf-8");
           return new Proxy(new xhr(), {
               get: function(target, name) {
                   if (url && ['response', 'responseText', 'status', 'readyState'].indexOf(name) != -1) {
                       if (name == 'response') {
                           var response = enc.encode(props.responseText);
                           console.log(response);
                           return response;
                       }
                       return props[name];
                   } else if (name == 'open') {
                       return function(method, open_url) {
                           if (open_url.match(re)) {
                               url = open_url;
                           } else {
                               return target[name].apply(target, arguments);
                           }
                       };
                   } else if (name == 'send') {
                       return function(data) {
                           if (url) {
                               var payload = url.split('::');
                               if (payload[1] == 'read') {
                                   term.read(
                                       payload.length > 2 ? payload[2] : '',
                                       function(text) {
                                           props.responseText = text;
                                           target.onload();
                                       }
                                   );
                               }
                           } else {
                               return target[name].apply(target, arguments);
                           }
                       };
                   }
                   return target[name];
               },
               set: function(target, name, value) {
                   target[name] = value;
               }
           });
       };
   })(window.XMLHttpRequest);
    // below code modified from emscripten output html
   var Module = {
        preRun: [],
        postRun: [],
        print: function(text) {
            console.log(text);
            term.echo(text);
        },
        printErr: function(text) {
            if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
            term.error(text);
        },
        canvas: (function() {
          var canvas = document.createElement('canvas');

          // As a default initial behavior, pop up an alert when webgl context is lost. To make your
          // application robust, you may want to override this behavior before shipping!
          // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
          canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);

          return canvas;
        })(),
        setStatus: function(text) {
        },
        totalDependencies: 0,
        monitorRunDependencies: function(left) {
          this.totalDependencies = Math.max(this.totalDependencies, left);
          Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
        }
      };
      Module.setStatus('Downloading...');
      window.onerror = function(event) {
        // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
        Module.setStatus('Exception thrown, see JavaScript console');
        spinnerElement.style.display = 'none';
        Module.setStatus = function(text) {
          if (text) Module.printErr('[post-exception status] ' + text);
        };
      };
    </script>
    <script async type="text/javascript" src="test.js"></script>
</html>
	#include <stdio.h>
	#include <string.h>
	#include <emscripten/fetch.h>

	int i = 0;

	void read_async();

	void read_success(emscripten_fetch_t *fetch) {
	printf("You typed: %s\n", fetch->data);
	emscripten_fetch_close(fetch);
	if (strlen(fetch->data) > 0 \|\| i++ == 5) {
	read_async();
	}
	}

	void read_fail(emscripten_fetch_t *fetch) {
	emscripten_fetch_close(fetch);
	}

	void read_async() {
	emscripten_fetch_attr_t attr;
	emscripten_fetch_attr_init(&attr);
	strcpy(attr.requestMethod, "GET");
	attr.attributes = EMSCRIPTEN_FETCH_LOAD_TO_MEMORY;
	attr.onsuccess = read_success;
	attr.onerror = read_fail;
	emscripten_fetch(&attr, "___terminal::read");
	}

	int main() {
	read_async();
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://cdn.rawgit.com/jcubic/jquery.terminal/master/js/jquery.terminal.min.js"></script>
	<link href="https://cdn.rawgit.com/jcubic/jquery.terminal/master/css/jquery.terminal.min.css" rel="stylesheet"/>
	<script src="https://unpkg.com/xhr-mock/dist/xhr-mock.js"></script>
	</head>
	<body>
	</body>
	<script>
	var term = $('body').terminal();
	var re = /^___terminal::/;
	// XHR proxy that handle methods from fetch in C
	window.XMLHttpRequest = (function(xhr) {
	return function() {
	var url;
	var props = {
	readyState: 4,
	status: 200
	};
	var enc = new TextEncoder("utf-8");
	return new Proxy(new xhr(), {
	get: function(target, name) {
	if (url && ['response', 'responseText', 'status', 'readyState'].indexOf(name) != -1) {
	if (name == 'response') {
	var response = enc.encode(props.responseText);
	console.log(response);
	return response;
	}
	return props[name];
	} else if (name == 'open') {
	return function(method, open_url) {
	if (open_url.match(re)) {
	url = open_url;
	} else {
	return target[name].apply(target, arguments);
	}
	};
	} else if (name == 'send') {
	return function(data) {
	if (url) {
	var payload = url.split('::');
	if (payload[1] == 'read') {
	term.read(
	payload.length > 2 ? payload[2] : '',
	function(text) {
	props.responseText = text;
	target.onload();
	}
	);
	}
	} else {
	return target[name].apply(target, arguments);
	}
	};
	}
	return target[name];
	},
	set: function(target, name, value) {
	target[name] = value;
	}
	});
	};
	})(window.XMLHttpRequest);
	// below code modified from emscripten output html
	var Module = {
	preRun: [],
	postRun: [],
	print: function(text) {
	console.log(text);
	term.echo(text);
	},
	printErr: function(text) {
	if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
	term.error(text);
	},
	canvas: (function() {
	var canvas = document.createElement('canvas');

	// As a default initial behavior, pop up an alert when webgl context is lost. To make your
	// application robust, you may want to override this behavior before shipping!
	// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
	canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);

	return canvas;
	})(),
	setStatus: function(text) {
	},
	totalDependencies: 0,
	monitorRunDependencies: function(left) {
	this.totalDependencies = Math.max(this.totalDependencies, left);
	Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
	}
	};
	Module.setStatus('Downloading...');
	window.onerror = function(event) {
	// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
	Module.setStatus('Exception thrown, see JavaScript console');
	spinnerElement.style.display = 'none';
	Module.setStatus = function(text) {
	if (text) Module.printErr('[post-exception status] ' + text);
	};
	};
	</script>
	<script async type="text/javascript" src="test.js"></script>
	</html>