slightly change demo.js to allow it to work on older versions

This commit is contained in:
Toshit Chawda 2024-07-26 16:32:24 -07:00
parent 18d8c59ccc
commit cf0b259eef
No known key found for this signature in database
GPG key ID: 91480ED99E2B3D9D

View file

@ -1,74 +1,78 @@
import epoxy from "./pkg/epoxy-module-bundled.js"; import epoxyModule from "./pkg/epoxy-module-bundled.js";
const params = (new URL(location.href)).searchParams; (async () => {
const should_feature_test = params.has("feature_test"); const params = (new URL(location.href)).searchParams;
const should_multiparallel_test = params.has("multi_parallel_test"); const should_feature_test = params.has("feature_test");
const should_parallel_test = params.has("parallel_test"); const should_multiparallel_test = params.has("multi_parallel_test");
const should_multiperf_test = params.has("multi_perf_test"); const should_parallel_test = params.has("parallel_test");
const should_perf_test = params.has("perf_test"); const should_multiperf_test = params.has("multi_perf_test");
const should_ws_test = params.has("ws_test"); const should_perf_test = params.has("perf_test");
const should_tls_test = params.has("rawtls_test"); const should_ws_test = params.has("ws_test");
const should_udp_test = params.has("udp_test"); const should_tls_test = params.has("rawtls_test");
const should_reconnect_test = params.has("reconnect_test"); const should_udp_test = params.has("udp_test");
const should_perf2_test = params.has("perf2_test"); const should_reconnect_test = params.has("reconnect_test");
console.log( const should_perf2_test = params.has("perf2_test");
console.log(
"%cWASM is significantly slower with DevTools open!", "%cWASM is significantly slower with DevTools open!",
"color:red;font-size:3rem;font-weight:bold" "color:red;font-size:3rem;font-weight:bold"
); );
const log = (str) => { const log = (str) => {
console.log(str); console.log(str);
let el = document.createElement("pre"); let el = document.createElement("pre");
el.textContent = str; el.textContent = str;
document.getElementById("logs").appendChild(el); document.getElementById("logs").appendChild(el);
window.scrollTo(0, document.body.scrollHeight); window.scrollTo(0, document.body.scrollHeight);
} }
const plog = (str) => { const plog = (str) => {
console.log(str); console.log(str);
} }
const { EpoxyClient, EpoxyClientOptions, EpoxyHandlers } = await epoxy(); const epoxy = await epoxyModule();
const EpoxyClientOptions = epoxy.EpoxyClientOptions;
const EpoxyClient = epoxy.EpoxyClient;
const EpoxyHandlers = epoxy.EpoxyHandlers;
let epoxy_client_options = new EpoxyClientOptions(); let epoxy_client_options = new EpoxyClientOptions();
epoxy_client_options.user_agent = navigator.userAgent; epoxy_client_options.user_agent = navigator.userAgent;
let epoxy_client = new EpoxyClient("ws://localhost:4000", epoxy_client_options); let epoxy_client = new EpoxyClient("ws://localhost:4000", epoxy_client_options);
const tconn0 = performance.now(); const tconn0 = performance.now();
await epoxy_client.replace_stream_provider(); await epoxy_client.replace_stream_provider();
const tconn1 = performance.now(); const tconn1 = performance.now();
log(`conn establish took ${tconn1 - tconn0} ms or ${(tconn1 - tconn0) / 1000} s`); log(`conn establish took ${tconn1 - tconn0} ms or ${(tconn1 - tconn0) / 1000} s`);
// epoxy classes are inspectable // epoxy classes are inspectable
console.log(epoxy_client); console.log(epoxy_client);
// you can change the user agent and redirect limit in JS // you can change the user agent and redirect limit in JS
epoxy_client.redirect_limit = 15; epoxy_client.redirect_limit = 15;
const test_mux = async (url) => { const test_mux = async (url) => {
const t0 = performance.now(); const t0 = performance.now();
await epoxy_client.fetch(url); await epoxy_client.fetch(url);
const t1 = performance.now(); const t1 = performance.now();
return t1 - t0; return t1 - t0;
}; };
const test_native = async (url) => { const test_native = async (url) => {
const t0 = performance.now(); const t0 = performance.now();
await fetch(url, { cache: "no-store" }); await fetch(url, { cache: "no-store" });
const t1 = performance.now(); const t1 = performance.now();
return t1 - t0; return t1 - t0;
}; };
const readableStream = (buffer) => { const readableStream = (buffer) => {
return new ReadableStream({ return new ReadableStream({
start(controller) { start(controller) {
controller.enqueue(buffer); controller.enqueue(buffer);
controller.close(); controller.close();
} }
}); });
}; };
if (should_feature_test) { if (should_feature_test) {
let formdata = new FormData(); let formdata = new FormData();
formdata.append("a", "b"); formdata.append("a", "b");
for (const url of [ for (const url of [
@ -89,7 +93,7 @@ if (should_feature_test) {
console.warn(url, resp, Object.fromEntries(resp.headers)); console.warn(url, resp, Object.fromEntries(resp.headers));
log(await resp.text()); log(await resp.text());
} }
} else if (should_multiparallel_test) { } else if (should_multiparallel_test) {
const num_tests = 10; const num_tests = 10;
let total_mux_minus_native = 0; let total_mux_minus_native = 0;
for (const _ of Array(num_tests).keys()) { for (const _ of Array(num_tests).keys()) {
@ -114,7 +118,7 @@ if (should_feature_test) {
} }
total_mux_minus_native = total_mux_minus_native / num_tests; total_mux_minus_native = total_mux_minus_native / num_tests;
log(`total mux - native (${num_tests} tests of ${num_tests} reqs): ${total_mux_minus_native} ms or ${total_mux_minus_native / 1000} s`); log(`total mux - native (${num_tests} tests of ${num_tests} reqs): ${total_mux_minus_native} ms or ${total_mux_minus_native / 1000} s`);
} else if (should_parallel_test) { } else if (should_parallel_test) {
const num_tests = 10; const num_tests = 10;
let total_mux = 0; let total_mux = 0;
@ -134,7 +138,7 @@ if (should_feature_test) {
log(`avg mux (${num_tests}) took ${total_mux} ms or ${total_mux / 1000} s`); log(`avg mux (${num_tests}) took ${total_mux} ms or ${total_mux / 1000} s`);
log(`avg native (${num_tests}) took ${total_native} ms or ${total_native / 1000} s`); log(`avg native (${num_tests}) took ${total_native} ms or ${total_native / 1000} s`);
log(`avg mux - avg native (${num_tests}): ${total_mux - total_native} ms or ${(total_mux - total_native) / 1000} s`); log(`avg mux - avg native (${num_tests}): ${total_mux - total_native} ms or ${(total_mux - total_native) / 1000} s`);
} else if (should_multiperf_test) { } else if (should_multiperf_test) {
const num_tests = 10; const num_tests = 10;
let total_mux_minus_native = 0; let total_mux_minus_native = 0;
for (const _ of Array(num_tests).keys()) { for (const _ of Array(num_tests).keys()) {
@ -159,7 +163,7 @@ if (should_feature_test) {
} }
total_mux_minus_native = total_mux_minus_native / num_tests; total_mux_minus_native = total_mux_minus_native / num_tests;
log(`total mux - native (${num_tests} tests of ${num_tests} reqs): ${total_mux_minus_native} ms or ${total_mux_minus_native / 1000} s`); log(`total mux - native (${num_tests} tests of ${num_tests} reqs): ${total_mux_minus_native} ms or ${total_mux_minus_native / 1000} s`);
} else if (should_perf_test) { } else if (should_perf_test) {
const num_tests = 10; const num_tests = 10;
let total_mux = 0; let total_mux = 0;
@ -179,7 +183,7 @@ if (should_feature_test) {
log(`avg mux (${num_tests}) took ${total_mux} ms or ${total_mux / 1000} s`); log(`avg mux (${num_tests}) took ${total_mux} ms or ${total_mux / 1000} s`);
log(`avg native (${num_tests}) took ${total_native} ms or ${total_native / 1000} s`); log(`avg native (${num_tests}) took ${total_native} ms or ${total_native / 1000} s`);
log(`avg mux - avg native (${num_tests}): ${total_mux - total_native} ms or ${(total_mux - total_native) / 1000} s`); log(`avg mux - avg native (${num_tests}): ${total_mux - total_native} ms or ${(total_mux - total_native) / 1000} s`);
} else if (should_ws_test) { } else if (should_ws_test) {
let handlers = new EpoxyHandlers( let handlers = new EpoxyHandlers(
() => log("opened"), () => log("opened"),
() => log("closed"), () => log("closed"),
@ -199,7 +203,7 @@ if (should_feature_test) {
i++; i++;
await (new Promise((res, _) => setTimeout(res, 10))); await (new Promise((res, _) => setTimeout(res, 10)));
} }
} else if (should_tls_test) { } else if (should_tls_test) {
let decoder = new TextDecoder(); let decoder = new TextDecoder();
let handlers = new EpoxyHandlers( let handlers = new EpoxyHandlers(
() => log("opened"), () => log("opened"),
@ -214,7 +218,7 @@ if (should_feature_test) {
await ws.send("GET / HTTP 1.1\r\nHost: google.com\r\nConnection: close\r\n\r\n"); await ws.send("GET / HTTP 1.1\r\nHost: google.com\r\nConnection: close\r\n\r\n");
await (new Promise((res, _) => setTimeout(res, 500))); await (new Promise((res, _) => setTimeout(res, 500)));
await ws.close(); await ws.close();
} else if (should_udp_test) { } else if (should_udp_test) {
let decoder = new TextDecoder(); let decoder = new TextDecoder();
let handlers = new EpoxyHandlers( let handlers = new EpoxyHandlers(
() => log("opened"), () => log("opened"),
@ -232,7 +236,7 @@ if (should_feature_test) {
await ws.send("data"); await ws.send("data");
await (new Promise((res, _) => setTimeout(res, 10))); await (new Promise((res, _) => setTimeout(res, 10)));
} }
} else if (should_reconnect_test) { } else if (should_reconnect_test) {
while (true) { while (true) {
try { try {
await epoxy_client.fetch("https://httpbin.org/get"); await epoxy_client.fetch("https://httpbin.org/get");
@ -240,7 +244,7 @@ if (should_feature_test) {
log("sent req"); log("sent req");
await (new Promise((res, _) => setTimeout(res, 500))); await (new Promise((res, _) => setTimeout(res, 500)));
} }
} else if (should_perf2_test) { } else if (should_perf2_test) {
const num_outer_tests = 10; const num_outer_tests = 10;
const num_inner_tests = 50; const num_inner_tests = 50;
let total_mux_multi = 0; let total_mux_multi = 0;
@ -258,11 +262,12 @@ if (should_feature_test) {
total_mux_multi = total_mux_multi / num_outer_tests; total_mux_multi = total_mux_multi / num_outer_tests;
log(`total avg mux (${num_outer_tests} tests of ${num_inner_tests} reqs): ${total_mux_multi} ms or ${total_mux_multi / 1000} s`); log(`total avg mux (${num_outer_tests} tests of ${num_inner_tests} reqs): ${total_mux_multi} ms or ${total_mux_multi / 1000} s`);
} else { } else {
console.time(); console.time();
let resp = await epoxy_client.fetch("https://www.example.com/"); let resp = await epoxy_client.fetch("https://www.example.com/");
console.timeEnd(); console.timeEnd();
console.log(resp, Object.fromEntries(resp.headers)); console.log(resp, Object.fromEntries(resp.headers));
log(await resp.text()); log(await resp.text());
} }
log("done"); log("done");
})();