From bac25c079094402df25c3369e0334f8d9abe6d2c Mon Sep 17 00:00:00 2001 From: Rizky Date: Thu, 19 Oct 2023 10:44:20 +0000 Subject: [PATCH] fix try gzip --- app/srv/ws/edit/action/get-comp.ts | 5 +- app/srv/ws/edit/action/get-page.ts | 3 +- app/srv/ws/edit/action/sv-local.ts | 3 +- app/srv/ws/edit/action/svdiff-remote.ts | 3 +- app/srv/ws/edit/send.ts | 11 +++ app/srv/ws/handler.ts | 4 +- app/web/package.json | 1 + app/web/src/base/page/auth/login.tsx | 1 - app/web/src/render/editor/logic/ws.ts | 7 +- pkgs/core/index.ts | 11 +++ pkgs/core/server/create.ts | 111 ++++++++++++++---------- 11 files changed, 102 insertions(+), 58 deletions(-) create mode 100644 app/srv/ws/edit/send.ts diff --git a/app/srv/ws/edit/action/get-comp.ts b/app/srv/ws/edit/action/get-comp.ts index 4eab6419..aad14fe8 100644 --- a/app/srv/ws/edit/action/get-comp.ts +++ b/app/srv/ws/edit/action/get-comp.ts @@ -9,6 +9,7 @@ import { WS_MSG_SV_LOCAL, } from "../../../../web/src/utils/types/ws"; import { SingleComp, eg } from "../edit-global"; +import { sendWS } from "../send"; export const getComp = async ( ws: ServerWebSocket, msg: WS_MSG_GET_COMP @@ -39,7 +40,7 @@ export const getComp = async ( comp_id: comp_id, changes: "", }; - ws.send(JSON.stringify(sent)); + sendWS(ws, JSON.stringify(sent)); return; } @@ -80,6 +81,6 @@ export const getComp = async ( comp_id: comp_id, changes: Y.encodeStateAsUpdate(comp.doc as any).toString(), }; - ws.send(JSON.stringify(sent)); + sendWS(ws, JSON.stringify(sent)); } }; diff --git a/app/srv/ws/edit/action/get-page.ts b/app/srv/ws/edit/action/get-page.ts index 1c793cd2..e2a76a42 100644 --- a/app/srv/ws/edit/action/get-page.ts +++ b/app/srv/ws/edit/action/get-page.ts @@ -11,6 +11,7 @@ import { } from "../../../../web/src/utils/types/ws"; import { eg } from "../edit-global"; import { loadPage } from "../tools/load-page"; +import { sendWS } from "../send"; export const getPage = async ( ws: ServerWebSocket, @@ -56,5 +57,5 @@ export const getPage = async ( type: "set_page", changes: Y.encodeStateAsUpdate(page.doc as any).toString(), }; - ws.send(JSON.stringify(sent)); + sendWS(ws,JSON.stringify(sent)); }; diff --git a/app/srv/ws/edit/action/sv-local.ts b/app/srv/ws/edit/action/sv-local.ts index a7a624e5..761074c2 100644 --- a/app/srv/ws/edit/action/sv-local.ts +++ b/app/srv/ws/edit/action/sv-local.ts @@ -6,6 +6,7 @@ import { import { eg } from "../edit-global"; import { getComp } from "./get-comp"; import { getPage } from "./get-page"; +import { sendWS } from "../send"; export const svLocal = async (ws: any, msg: WS_MSG_SV_LOCAL) => { const changes = Uint8Array.from( @@ -39,6 +40,6 @@ export const svLocal = async (ws: any, msg: WS_MSG_SV_LOCAL) => { mode: msg.mode, type: "svd_remote", }; - ws.send(JSON.stringify(sendmsg)); + sendWS(ws,JSON.stringify(sendmsg)); } }; diff --git a/app/srv/ws/edit/action/svdiff-remote.ts b/app/srv/ws/edit/action/svdiff-remote.ts index cb4e5cb7..1f74ac2e 100644 --- a/app/srv/ws/edit/action/svdiff-remote.ts +++ b/app/srv/ws/edit/action/svdiff-remote.ts @@ -4,6 +4,7 @@ import { WS_MSG_SVDIFF_REMOTE, } from "../../../../web/src/utils/types/ws"; import { eg } from "../edit-global"; +import { sendWS } from "../send"; export const svdiffRemote = async (ws: any, msg: WS_MSG_SVDIFF_REMOTE) => { const sv_remote = Uint8Array.from( @@ -32,6 +33,6 @@ export const svdiffRemote = async (ws: any, msg: WS_MSG_SVDIFF_REMOTE) => { id: msg.id, diff_local: diff_local.toString(), }; - ws.send(JSON.stringify(sendmsg)); + sendWS(ws,JSON.stringify(sendmsg)); } }; diff --git a/app/srv/ws/edit/send.ts b/app/srv/ws/edit/send.ts new file mode 100644 index 00000000..22064ede --- /dev/null +++ b/app/srv/ws/edit/send.ts @@ -0,0 +1,11 @@ +import { ServerWebSocket } from "bun"; +import { gzip } from "zlib"; +import { WSData } from "../../../../pkgs/core/server/create"; + +export const sendWS = async (ws: ServerWebSocket, msg: string) => { + gzip(Buffer.from(msg), (err, data) => { + if (!err) { + ws.sendBinary(data); + } + }); +}; diff --git a/app/srv/ws/handler.ts b/app/srv/ws/handler.ts index 380b8fe6..ecea1c37 100644 --- a/app/srv/ws/handler.ts +++ b/app/srv/ws/handler.ts @@ -9,7 +9,7 @@ import { svLocal } from "./edit/action/sv-local"; import { svdiffRemote } from "./edit/action/svdiff-remote"; import { redo, undo } from "./edit/action/undo-redo"; import { eg } from "./edit/edit-global"; -import { syncHandler } from "./sync/sync-handler"; +import { sendWS } from "./edit/send";import { syncHandler } from "./sync/sync-handler"; eg.edit = { site: {}, @@ -35,7 +35,7 @@ export const wsHandler: Record> = { const msg = JSON.parse(raw) as WS_MSG; if (msg.type === "ping") { - ws.send(JSON.stringify({ type: "pong" })); + sendWS(ws, JSON.stringify({ type: "pong" })); return; } diff --git a/app/web/package.json b/app/web/package.json index f324d2fc..dcdb37c7 100644 --- a/app/web/package.json +++ b/app/web/package.json @@ -55,6 +55,7 @@ "tinycolor2": "^1.6.0", "ua-parser-js": "^1.0.36", "uuid": "9.0.1", + "wasm-gzip": "^2.0.3", "web-utils": "workspace:*", "y-pojo": "^0.0.8", "yjs": "^13.6.8", diff --git a/app/web/src/base/page/auth/login.tsx b/app/web/src/base/page/auth/login.tsx index 3bac8657..595f3f11 100644 --- a/app/web/src/base/page/auth/login.tsx +++ b/app/web/src/base/page/auth/login.tsx @@ -21,7 +21,6 @@ export default page({ if (rto) { navigate(rto); } else { - console.log("navigate to"); localStorage.setItem("prasi-session", JSON.stringify(s)); navigate("/editor/"); } diff --git a/app/web/src/render/editor/logic/ws.ts b/app/web/src/render/editor/logic/ws.ts index 555b12de..91bace24 100644 --- a/app/web/src/render/editor/logic/ws.ts +++ b/app/web/src/render/editor/logic/ws.ts @@ -15,7 +15,7 @@ import { } from "../../../utils/types/ws"; import { scanComponent } from "./comp"; import { rebuildTree } from "./tree-logic"; - +import init, { compress, decompress } from "wasm-gzip"; const timeout = { reconnect: null as any, svd: null as any, @@ -25,6 +25,7 @@ export const editorWS = async (p: PG) => { if (p.ws && p.ws.readyState === p.ws.OPEN) { return; } + await init(); const render = () => { if (!p.focused && !p.script.active) { @@ -98,8 +99,10 @@ export const editorWS = async (p: PG) => { p.softRender.topR(); } }, 5000); + const decoder = new TextDecoder(); ws.addEventListener("message", async (e) => { - const msg = JSON.parse(e.data) as WS_MSG; + const raw = decoder.decode(decompress(e.data)); + const msg = JSON.parse(raw) as WS_MSG; if (msg.type === "pong") { p.wsPing = Date.now() - p.wsPingTs; diff --git a/pkgs/core/index.ts b/pkgs/core/index.ts index 6b0ef141..0509bb60 100644 --- a/pkgs/core/index.ts +++ b/pkgs/core/index.ts @@ -16,6 +16,8 @@ g.api = {}; g.mode = process.argv.includes("dev") ? "dev" : "prod"; g.datadir = g.mode == "prod" ? "../data" : "data"; g.port = parseInt(process.env.PORT || "4550"); + + g.log.info(g.mode === "dev" ? "DEVELOPMENT" : "PRODUCTION"); if (g.mode === "dev") { await startDevWatcher(); @@ -30,9 +32,18 @@ if (g.db) { }); } + await parcelBuild(); + await generateAPIFrm(); await prepareApiRoutes(); + +// Bun.serve({ +// port: g.port, +// async fetch(req, server) { +// return new Response("test. sabar. ya...."); +// }, +// }); await createServer(); await prepareAPITypes(); diff --git a/pkgs/core/server/create.ts b/pkgs/core/server/create.ts index 09516eb4..40396ec0 100644 --- a/pkgs/core/server/create.ts +++ b/pkgs/core/server/create.ts @@ -30,6 +30,9 @@ export const createServer = async () => { websocket: { maxPayloadLength: 9999999, closeOnBackpressureLimit: true, + drain(ws) { + console.log("Backpressure relieved..."); + }, close(ws, code, reason) { const pathname = ws.data.url.pathname; if (wsHandler[pathname]) { @@ -61,63 +64,75 @@ export const createServer = async () => { async fetch(req, server) { const url = new URL(req.url); - if (wsHandler[url.pathname]) { - if ( - server.upgrade(req, { - data: { - url: new URL(req.url), - }, - }) - ) { - return; - } - return new Response("Upgrade failed :(", { status: 500 }); - } - - try { - const api = await serveAPI(url, req); - if (api) { - return api; - } - } catch (e) { - g.log.error(e); - } - - const webPath = "app/static"; - try { - const found = cache.static[url.pathname]; - if (found && g.mode === "prod") { - return responseCached(req, found); - } - - const file = Bun.file(dir.path(`${webPath}${url.pathname}`)); - if ((await file.exists()) && file.type !== "application/octet-stream") { - if (g.mode === "dev") { - return new Response(file as any); + const response = async () => { + if (wsHandler[url.pathname]) { + if ( + server.upgrade(req, { + data: { + url: new URL(req.url), + }, + }) + ) { + return; } + return new Response("Upgrade failed :(", { status: 500 }); + } - if (!cache.static[url.pathname]) { - cache.static[url.pathname] = { - type: lookup(url.pathname) || "text/plain", - content: await file.arrayBuffer(), - }; + try { + const api = await serveAPI(url, req); + if (api) { + return api; } + } catch (e) { + g.log.error(e); + } + + const webPath = "app/static"; + try { const found = cache.static[url.pathname]; - if (found) { + if (found && g.mode === "prod") { return responseCached(req, found); } + + const file = Bun.file(dir.path(`${webPath}${url.pathname}`)); + if ( + (await file.exists()) && + file.type !== "application/octet-stream" + ) { + if (g.mode === "dev") { + return new Response(file as any); + } + + if (!cache.static[url.pathname]) { + cache.static[url.pathname] = { + type: lookup(url.pathname) || "text/plain", + content: await file.arrayBuffer(), + }; + } + const found = cache.static[url.pathname]; + if (found) { + return responseCached(req, found); + } + } + } catch (e) { + g.log.error(e); } - } catch (e) { - g.log.error(e); - } - try { - return new Response(Bun.file(dir.path(`${webPath}/index.html`)) as any); - } catch (e) { - g.log.error(e); + try { + return new Response( + Bun.file(dir.path(`${webPath}/index.html`)) as any + ); + } catch (e) { + g.log.error(e); - return new Response("Loading..."); - } + return new Response("Loading..."); + } + }; + console.log("[START]", req.url); + console.time(req.url); + const res = await response(); + console.timeEnd(req.url); + return res; }, });