Fix inputs on BYOND 516 getting cut off (tgui payload chunking)

Ports tgstation/tgstation#90295

Author: Absolucy

.prettierignore

@@ -3,3 +3,6 @@
 
 # We want it to run into the TGUI folder, however.
 !/tgui
+
+# Except on tgui.html, because it would mangle the ascii art
+/tgui/public/tgui.html

code/controllers/configuration/entries/general.dm

@@ -705,3 +705,10 @@
 
 /datum/config_entry/flag/vpn_kick
 	default = FALSE
+
+/**
+ * Tgui ui_act payloads larger than 2kb are split into chunks a maximum of 1kb in size.
+ * This flag represents the maximum chunk count the server is willing to receive.
+ */
+/datum/config_entry/number/tgui_max_chunk_count
+	default = 10

code/modules/tgui/tgui_window.dm

@@ -38,6 +38,8 @@
 		"Ctrl+UP" = "byond/ctrlup",
 	)
 
+	var/list/oversized_payloads = list()
+
 /**
  * public
  *
@@ -386,6 +388,17 @@
 			reinitialize()
 		if("chat/resend")
 			SSchat.handle_resend(client, payload)
+		if("oversizedPayloadRequest")
+			var/payload_id = payload["id"]
+			var/chunk_count = payload["chunkCount"]
+			var/permit_payload = chunk_count <= CONFIG_GET(number/tgui_max_chunk_count)
+			if(permit_payload)
+				create_oversized_payload(payload_id, payload["type"], chunk_count)
+			send_message("oversizePayloadResponse", list("allow" = permit_payload, "id" = payload_id))
+		if("payloadChunk")
+			var/payload_id = payload["id"]
+			append_payload_chunk(payload_id, payload["chunk"])
+			send_message("acknowlegePayloadChunk", list("id" = payload_id))
 
 /datum/tgui_window/vv_edit_var(var_name, var_value)
 	return var_name != NAMEOF(src, id) && ..()
@@ -418,3 +431,32 @@
 	for(var/mouseMacro in byondToTguiEventMap)
 		winset(client, null, "[mouseMacro]Window[id]Macro.parent=null")
 	mouse_event_macro_set = FALSE
+
+/datum/tgui_window/proc/create_oversized_payload(payload_id, message_type, chunk_count)
+	if(oversized_payloads[payload_id])
+		stack_trace("Attempted to create oversized tgui payload with duplicate ID.")
+		return
+	oversized_payloads[payload_id] = list(
+		"type" = message_type,
+		"count" = chunk_count,
+		"chunks" = list(),
+		"timeout" = addtimer(CALLBACK(src, PROC_REF(remove_oversized_payload), payload_id), 1 SECONDS, TIMER_UNIQUE|TIMER_OVERRIDE|TIMER_STOPPABLE)
+	)
+
+/datum/tgui_window/proc/append_payload_chunk(payload_id, chunk)
+	var/list/payload = oversized_payloads[payload_id]
+	if(!payload)
+		return
+	var/list/chunks = payload["chunks"]
+	chunks += chunk
+	if(chunks.len >= payload["count"])
+		deltimer(payload["timeout"])
+		var/message_type = payload["type"]
+		var/final_payload = chunks.Join()
+		remove_oversized_payload(payload_id)
+		on_message(message_type, json_decode(final_payload), list("type" = message_type, "payload" = final_payload, "tgui" = TRUE, "window_id" = id))
+	else
+		payload["timeout"] = addtimer(CALLBACK(src, PROC_REF(remove_oversized_payload), payload_id), 1 SECONDS, TIMER_UNIQUE|TIMER_OVERRIDE|TIMER_STOPPABLE)
+
+/datum/tgui_window/proc/remove_oversized_payload(payload_id)
+	oversized_payloads -= payload_id

config/config.txt

@@ -572,3 +572,6 @@ CONFIG_ERRORS_RUNTIME
 ## The age in days if minimum account age is on
 #MINIMUM_AGE
 
+## Tgui payloads larger than the 2kb limit for BYOND topic requests are split into roughly 1kb chunks and sent in sequence.
+## This config option limits the maximum chunk count for which the server will accept a payload, default is 10
+TGUI_MAX_CHUNK_COUNT 10

tgui/packages/tgui/backend.ts

@@ -35,6 +35,16 @@ export const setGlobalStore = (store) => {
 export const backendUpdate = createAction('backend/update');
 export const backendSetSharedState = createAction('backend/setSharedState');
 export const backendSuspendStart = createAction('backend/suspendStart');
+export const backendCreatePayloadQueue = createAction(
+  'backend/createPayloadQueue',
+);
+export const backendDequeuePayloadQueue = createAction(
+  'backend/dequeuePayloadQueue',
+);
+export const backendRemovePayloadQueue = createAction(
+  'backend/removePayloadQueue',
+);
+export const nextPayloadChunk = createAction('nextPayloadChunk');
 
 export const backendSuspendSuccess = () => ({
   type: 'backend/suspendSuccess',
@@ -47,6 +57,7 @@ const initialState = {
   config: {},
   data: {},
   shared: {},
+  outgoingPayloadQueues: {} as Record<string, string[]>,
   // Start as suspended
   suspended: Date.now(),
   suspending: false,
@@ -123,6 +134,44 @@ export const backendReducer = (state = initialState, action) => {
     };
   }
 
+  if (type === 'backend/createPayloadQueue') {
+    const { id, chunks } = payload;
+    const { outgoingPayloadQueues } = state;
+    return {
+      ...state,
+      outgoingPayloadQueues: {
+        ...outgoingPayloadQueues,
+        [id]: chunks,
+      },
+    };
+  }
+
+  if (type === 'backend/dequeuePayloadQueue') {
+    const { id } = payload;
+    const { outgoingPayloadQueues } = state;
+    const { [id]: targetQueue, ...otherQueues } = outgoingPayloadQueues;
+    const [_, ...rest] = targetQueue;
+    return {
+      ...state,
+      outgoingPayloadQueues: rest.length
+        ? {
+            ...otherQueues,
+            [id]: rest,
+          }
+        : otherQueues,
+    };
+  }
+
+  if (type === 'backend/removePayloadQueue') {
+    const { id } = payload;
+    const { outgoingPayloadQueues } = state;
+    const { [id]: _, ...otherQueues } = outgoingPayloadQueues;
+    return {
+      ...state,
+      outgoingPayloadQueues: otherQueues,
+    };
+  }
+
   return state;
 };
 
@@ -131,7 +180,9 @@ export const backendMiddleware = (store) => {
   let suspendInterval;
 
   return (next) => (action) => {
-    const { suspended } = selectBackend(store.getState());
+    const { suspended, outgoingPayloadQueues } = selectBackend(
+      store.getState(),
+    );
     const { type, payload } = action;
 
     if (type === 'update') {
@@ -234,10 +285,59 @@ export const backendMiddleware = (store) => {
       });
     }
 
+    if (type === 'oversizePayloadResponse') {
+      const { allow } = payload;
+      if (allow) {
+        store.dispatch(nextPayloadChunk(payload));
+      } else {
+        store.dispatch(backendRemovePayloadQueue(payload));
+      }
+    }
+
+    if (type === 'acknowlegePayloadChunk') {
+      store.dispatch(backendDequeuePayloadQueue(payload));
+      store.dispatch(nextPayloadChunk(payload));
+    }
+
+    if (type === 'nextPayloadChunk') {
+      const { id } = payload;
+      const chunk = outgoingPayloadQueues[id][0];
+      Byond.sendMessage('payloadChunk', {
+        id,
+        chunk,
+      });
+    }
+
     return next(action);
   };
 };
 
+const chunkSplitter = {
+  [Symbol.split]: (string: string) => {
+    let chunks: string[] = [];
+    const uriEncoded = encodeURIComponent(string);
+    let startIndex = 0;
+    let endIndex = 1024;
+    while (startIndex < uriEncoded.length) {
+      const lastFoundPercent = uriEncoded.lastIndexOf('%', endIndex - 1);
+      if (lastFoundPercent > endIndex - 3) {
+        endIndex = lastFoundPercent + 3;
+      }
+      chunks.push(
+        decodeURIComponent(
+          uriEncoded.substring(
+            startIndex,
+            endIndex < uriEncoded.length ? endIndex : undefined,
+          ),
+        ),
+      );
+      startIndex = endIndex;
+      endIndex += 1024;
+    }
+    return chunks;
+  },
+};
+
 /**
  * Sends an action to `ui_act` on `src_object` that this tgui window
  * is associated with.
@@ -252,6 +352,31 @@ export const sendAct = (action: string, payload: object = {}) => {
     logger.error(`Payload for act() must be an object, got this:`, payload);
     return;
   }
+  if (!Byond.TRIDENT) {
+    const stringifiedPayload = JSON.stringify(payload);
+    const urlSize = Object.entries({
+      type: 'act/' + action,
+      payload: stringifiedPayload,
+      tgui: 1,
+      windowId: Byond.windowId,
+    }).reduce(
+      (url, [key, value], i) =>
+        url +
+        `${i > 0 ? '&' : '?'}${encodeURIComponent(key)}=${encodeURIComponent(value)}`,
+      '',
+    ).length;
+    if (urlSize > 2048) {
+      let chunks: string[] = stringifiedPayload.split(chunkSplitter);
+      const id = `${Date.now()}`;
+      globalStore?.dispatch(backendCreatePayloadQueue({ id, chunks }));
+      Byond.sendMessage('oversizedPayloadRequest', {
+        type: 'act/' + action,
+        id,
+        chunkCount: chunks.length,
+      });
+      return;
+    }
+  }
   Byond.sendMessage('act/' + action, payload);
 };
 
@@ -279,6 +404,7 @@ type BackendState<TData> = {
   };
   data: TData;
   shared: Record<string, any>;
+  outgoingPayloadQueues: Record<string, any[]>;
   suspending: boolean;
   suspended: boolean;
   debug?: {

tgui/public/tgui.html

@@ -122,11 +122,13 @@
           location.href = 'byond://' + url;
           return;
         }
-        // Send an HTTP request to DreamSeeker's HTTP server.
-        // Allows sending much bigger payloads.
-        var xhr = new XMLHttpRequest();
-        xhr.open('GET', url);
-        xhr.send();
+        if (Byond.TRIDENT !== null) {
+          // Send an HTTP request to DreamSeeker's HTTP server.
+          // Allows sending much bigger payloads.
+          var xhr = new XMLHttpRequest();
+          xhr.open('GET', url);
+          xhr.send();
+        }
       };
 
       Byond.callAsync = function (path, params) {

tools/build/build.js

@@ -75,6 +75,7 @@ export const DmTarget = new Juke.Target({
     'html/**',
     'icons/**',
     'interface/**',
+    'tgui/public/tgui.html',
     'monkestation/code/**', // monke edit: ensure it also checks for updates in modular code
     'monkestation/icons/**',
     `${DME_NAME}.dme`,