WebHost: Better host room (#3496)

* add Range= to log, making responses a lot smaller for massive rooms
* switch xhr to fetch
* post the form using fetch if possible
  * also refresh log faster while waiting for command echo / response
  * do not follow redirect, saving a request
  * do not post empty body
* smooth-scroll the log view
* paste the log into the div when loading the HTML (up to 1MB, rest will be `fetch`ed)
* fix duplicate charset in display_log response

WebHostLib/misc.py

@@ -1,6 +1,6 @@
 import datetime
 import os
-from typing import List, Dict, Union
+from typing import Dict, Iterator, List, Tuple, Union
 
 import jinja2.exceptions
 from flask import request, redirect, url_for, render_template, Response, session, abort, send_from_directory
@@ -97,25 +97,36 @@ def new_room(seed: UUID):
     return redirect(url_for("host_room", room=room.id))
 
 
-def _read_log(path: str):
-    if os.path.exists(path):
-        with open(path, encoding="utf-8-sig") as log:
-            yield from log
-    else:
-        yield f"Logfile {path} does not exist. " \
-              f"Likely a crash during spinup of multiworld instance or it is still spinning up."
+def _read_log(path: str, offset: int = 0) -> Iterator[bytes]:
+    with open(path, "rb") as log:
+        marker = log.read(3)  # skip optional BOM
+        if marker != b'\xEF\xBB\xBF':
+            log.seek(0, os.SEEK_SET)
+        log.seek(offset, os.SEEK_CUR)
+        yield from log
 
 
 @app.route('/log/<suuid:room>')
-def display_log(room: UUID):
+def display_log(room: UUID) -> Union[str, Response, Tuple[str, int]]:
     room = Room.get(id=room)
     if room is None:
         return abort(404)
     if room.owner == session["_id"]:
         file_path = os.path.join("logs", str(room.id) + ".txt")
-        if os.path.exists(file_path):
-            return Response(_read_log(file_path), mimetype="text/plain;charset=UTF-8")
-        return "Log File does not exist."
+        try:
+            range_header = request.headers.get("Range")
+            if range_header:
+                range_type, range_values = range_header.split('=')
+                start, end = map(str.strip, range_values.split('-', 1))
+                if range_type != "bytes" or end != "":
+                    return "Unsupported range", 500
+                # NOTE: we skip Content-Range in the response here, which isn't great but works for our JS
+                return Response(_read_log(file_path, int(start)), mimetype="text/plain", status=206)
+            return Response(_read_log(file_path), mimetype="text/plain")
+        except FileNotFoundError:
+            return Response(f"Logfile {file_path} does not exist. "
+                            f"Likely a crash during spinup of multiworld instance or it is still spinning up.",
+                            mimetype="text/plain")
 
     return "Access Denied", 403
 
@@ -139,7 +150,21 @@ def host_room(room: UUID):
     with db_session:
         room.last_activity = now  # will trigger a spinup, if it's not already running
 
-    return render_template("hostRoom.html", room=room, should_refresh=should_refresh)
+    def get_log(max_size: int = 1024000) -> str:
+        try:
+            raw_size = 0
+            fragments: List[str] = []
+            for block in _read_log(os.path.join("logs", str(room.id) + ".txt")):
+                if raw_size + len(block) > max_size:
+                    fragments.append("…")
+                    break
+                raw_size += len(block)
+                fragments.append(block.decode("utf-8"))
+            return "".join(fragments)
+        except FileNotFoundError:
+            return ""
+
+    return render_template("hostRoom.html", room=room, should_refresh=should_refresh, get_log=get_log)
 
 
 @app.route('/favicon.ico')

WebHostLib/templates/hostRoom.html

@@ -44,7 +44,7 @@
         {{ macros.list_patches_room(room) }}
         {% if room.owner == session["_id"] %}
             <div style="display: flex; align-items: center;">
-                <form method=post style="flex-grow: 1; margin-right: 1em;">
+                <form method="post" id="command-form" style="flex-grow: 1; margin-right: 1em;">
                     <div class="form-group">
                         <label for="cmd"></label>
                         <input class="form-control" type="text" id="cmd" name="cmd"
@@ -55,24 +55,89 @@
                     Open Log File...
                 </a>
             </div>
-        <div id="logger"></div>
-        <script type="application/ecmascript">
-            let xmlhttp = new XMLHttpRequest();
-            let url = '{{ url_for('display_log', room = room.id) }}';
+        {%  set log = get_log() -%}
+        {%- set log_len = log | length - 1 if log.endswith("…") else log | length -%}
+        <div id="logger" style="white-space: pre">{{ log }}</div>
+        <script>
+          let url = '{{ url_for('display_log', room = room.id) }}';
+          let bytesReceived = {{ log_len }};
+          let updateLogTimeout;
+          let awaitingCommandResponse = false;
+          let logger = document.getElementById("logger");
 
-            xmlhttp.onreadystatechange = function () {
-                if (this.readyState === 4 && this.status === 200) {
-                    document.getElementById("logger").innerText = this.responseText;
+          function scrollToBottom(el) {
+            let bot = el.scrollHeight - el.clientHeight;
+            el.scrollTop += Math.ceil((bot - el.scrollTop)/10);
+            if (bot - el.scrollTop >= 1) {
+              window.clearTimeout(el.scrollTimer);
+              el.scrollTimer = window.setTimeout(() => {
+                scrollToBottom(el)
+              }, 16);
+            }
+          }
+
+          async function updateLog() {
+            try {
+              let res = await fetch(url, {
+                headers: {
+                  'Range': `bytes=${bytesReceived}-`,
+                }
+              });
+              if (res.ok) {
+                let text = await res.text();
+                if (text.length > 0) {
+                  awaitingCommandResponse = false;
+                  if (bytesReceived === 0 || res.status !== 206) {
+                    logger.innerHTML = '';
+                  }
+                  if (res.status !== 206) {
+                    bytesReceived = 0;
+                  } else {
+                    bytesReceived += new Blob([text]).size;
+                  }
+                  if (logger.innerHTML.endsWith('…')) {
+                    logger.innerHTML = logger.innerHTML.substring(0, logger.innerHTML.length - 1);
+                  }
+                  logger.appendChild(document.createTextNode(text));
+                  scrollToBottom(logger);
                 }
-            };
+              }
+            }
+            finally {
+              window.clearTimeout(updateLogTimeout);
+              updateLogTimeout = window.setTimeout(updateLog, awaitingCommandResponse ? 500 : 10000);
+            }
+          }
 
-            function request_new() {
-                xmlhttp.open("GET", url, true);
-                xmlhttp.send();
+          async function postForm(ev) {
+            /** @type {HTMLInputElement} */
+            let cmd = document.getElementById("cmd");
+            if (cmd.value === "") {
+              ev.preventDefault();
+              return;
+            }
+            /** @type {HTMLFormElement} */
+            let form = document.getElementById("command-form");
+            let req = fetch(form.action || window.location.href, {
+              method: form.method,
+              body: new FormData(form),
+              redirect: "manual",
+            });
+            ev.preventDefault(); // has to happen before first await
+            form.reset();
+            let res = await req;
+            if (res.ok || res.type === 'opaqueredirect') {
+              awaitingCommandResponse = true;
+              window.clearTimeout(updateLogTimeout);
+              updateLogTimeout = window.setTimeout(updateLog, 100);
+            } else {
+              window.alert(res.statusText);
             }
+          }
 
-            window.setTimeout(request_new, 1000);
-            window.setInterval(request_new, 10000);
+          document.getElementById("command-form").addEventListener("submit", postForm);
+          updateLogTimeout = window.setTimeout(updateLog, 1000);
+          logger.scrollTop = logger.scrollHeight;
         </script>
         {% endif %}
     </div>