Refact. Flutter web, mid commit (#7502)

* Refact. Flutter web, mid commit Signed-off-by: fufesou <shuanglongchen@yeah.net> * Refact. Flutter web, mid commit Signed-off-by: fufesou <shuanglongchen@yeah.net> --------- Signed-off-by: fufesou <shuanglongchen@yeah.net>
2025-12-13 11:35:56 +00:00 · 2024-03-25 10:47:53 +08:00
parent d546b23bd8
commit 8dff263a0c
6 changed files with 181 additions and 87 deletions
--- a/flutter/web/js/src/connection.ts
+++ b/flutter/web/js/src/connection.ts
@@ -16,7 +16,7 @@ let HOST = localStorage.getItem("rendezvous-server") || HOSTS[0];
 const SCHEMA = "ws://";

 type MsgboxCallback = (type: string, title: string, text: string, link: string) => void;
-type DrawCallback = (data: Uint8Array) => void;
+type DrawCallback = (display: number, data: Uint8Array) => void;
 //const cursorCanvas = document.createElement("canvas");

 export default class Connection {
@@ -41,7 +41,6 @@ export default class Connection {
    this._msgs = [];
    this._id = "";
    this._videoTestSpeed = [0, 0];
-    this._options = {};
    //this._cursors = {};
  }

@@ -67,7 +66,7 @@ export default class Connection {
        try {
          this._password = Uint8Array.from(JSON.parse("[" + p + "]"));
        } catch (e) {
-          console.error(e);
+          console.error('Failed to get password, ' + e);
        }
      }
    }
@@ -171,7 +170,7 @@ export default class Connection {
          pk = undefined;
        }
      } catch (e) {
-        console.error(e);
+        console.error('Failed to verify id pk, ', e);
        pk = undefined;
      }
      if (!pk)
@@ -196,7 +195,7 @@ export default class Connection {
    try {
      signedId = await globals.verify(signedId.id, Uint8Array.from(pk!));
    } catch (e) {
-      console.error(e);
+      console.error('Failed to verify signed id pk, ', e);
      // fall back to non-secure connection in case pk mismatch
      console.error("pk mismatch, fall back to non-secure");
      const public_key = message.PublicKey.fromPartial({});
@@ -243,7 +242,7 @@ export default class Connection {
        this.login();
      } else if (msg?.test_delay) {
        const test_delay = msg?.test_delay;
-        console.log(test_delay);
+        console.log('test delay: ', test_delay);
        if (!test_delay.from_client) {
          this._ws?.sendMessage({ test_delay });
        }
@@ -275,7 +274,7 @@ export default class Connection {
        try {
          globals.copyToClipboard(new TextDecoder().decode(cb.content));
        } catch (e) {
-          console.error(e);
+          console.error('Failed to copy to clipboard, ', e);
        }
        // globals.pushEvent("clipboard", cb);
      } else if (msg?.cursor_data) {
@@ -323,9 +322,9 @@ export default class Connection {
    this._msgbox?.(type_, title, text, link);
  }

-  draw(frame: any) {
-    this._draw?.(frame);
-    globals.draw(frame);
+  draw(display: number, frame: any) {
+    this._draw?.(display, frame);
+    globals.draw(display, frame);
  }

  close() {
@@ -348,22 +347,25 @@ export default class Connection {
    this._draw = callback;
  }

-  login(password: string | undefined = undefined) {
-    if (password) {
+  login(info?: {
+    os_login?: message.OSLogin,
+    password?: Uint8Array
+  }) {
+    if (info?.password) {
      const salt = this._hash?.salt;
-      let p = hash([password, salt!]);
+      let p = hash([info.password, salt!]);
      this._password = p;
      const challenge = this._hash?.challenge;
      p = hash([p, challenge!]);
      this.msgbox("connecting", "Connecting...", "Logging in...");
-      this._sendLoginMessage(p);
+      this._sendLoginMessage({ os_login: info.os_login, password: p });
    } else {
      let p = this._password;
      if (p) {
        const challenge = this._hash?.challenge;
        p = hash([p, challenge!]);
      }
-      this._sendLoginMessage(p);
+      this._sendLoginMessage({ os_login: info?.os_login, password: p });
    }
  }

@@ -372,14 +374,18 @@ export default class Connection {
    await this.start(this._id);
  }

-  _sendLoginMessage(password: Uint8Array | undefined = undefined) {
+  _sendLoginMessage(login: {
+    os_login?: message.OSLogin,
+    password?: Uint8Array,
+  }) {
    const login_request = message.LoginRequest.fromPartial({
      username: this._id!,
      my_id: "web", // to-do
      my_name: "web", // to-do
-      password,
+      password: login.password,
      option: this.getOptionMessage(),
      video_ack_required: true,
+      os_login: login.os_login,
    });
    this._ws?.sendMessage({ login_request });
  }
@@ -436,7 +442,7 @@ export default class Connection {
          i++;
          if (i == n) this.sendVideoReceived();
          if (ok && dec.frameBuffer && n == i) {
-            this.draw(dec.frameBuffer);
+            this.draw(vf.display, dec.frameBuffer);
            const now = new Date().getTime();
            var elapsed = now - tm;
            this._videoTestSpeed[1] += elapsed;
@@ -570,10 +576,8 @@ export default class Connection {
    }
    this._options["tm"] = new Date().getTime();
    const peers = globals.getPeers();
-    if (peers) {
-      peers[this._id] = this._options;
-      localStorage.setItem("peers", JSON.stringify(peers));
-    }
+    peers[this._id] = this._options;
+    localStorage.setItem("peers", JSON.stringify(peers));
  }

  inputKey(
@@ -744,7 +748,7 @@ export default class Connection {
    loadVp9((decoder: any) => {
      this._videoDecoder = decoder;
      console.log("vp9 loaded");
-      console.log(decoder);
+      console.log('The decoder: ', decoder);
    });
  }
 }
--- a/flutter/web/js/src/globals.js
+++ b/flutter/web/js/src/globals.js
@@ -28,7 +28,13 @@ function jsonfyForDart(payload) {
  var tmp = {};
  for (const [key, value] of Object.entries(payload)) {
    if (!key) continue;
-    tmp[key] = value instanceof Uint8Array ? '[' + value.toString() + ']' : JSON.stringify(value);
+    if (value instanceof String || typeof value == 'string') {
+      tmp[key] = value;
+    } else if (value instanceof Uint8Array) {
+      tmp[key] = '[' + value.toString() + ']';
+    } else {
+      tmp[key] = JSON.stringify(value);
+    }
  }
  return tmp;
 }
@@ -54,10 +60,10 @@ if (YUVCanvas.WebGLFrameSink.isAvailable()) {
 }
 let testSpeed = [0, 0];

-export function draw(frame) {
+export function draw(display, frame) {
  if (yuvWorker) {
    // frame's (y/u/v).bytes already detached, can not transferrable any more.
-    yuvWorker.postMessage(frame);
+    yuvWorker.postMessage({display, frame});
  } else {
    var tm0 = new Date().getTime();
    yuvCanvas.drawFrame(frame);
@@ -75,7 +81,7 @@ export function draw(frame) {
    for (let i = 0; i < size; i += row) {
      flipPixels.set(pixels.subarray(i, i + row), end - i);
    }
-    onRgba(flipPixels);
+    onRgba(display, flipPixels);
    testSpeed[1] += new Date().getTime() - tm0;
    testSpeed[0] += 1;
    if (testSpeed[0] > 30) {
@@ -189,8 +195,14 @@ window.setByName = (name, value) => {
      break;
    case 'login':
      value = JSON.parse(value);
-      curConn.setRemember(value.remember == 'true');
-      curConn.login(value.password);
+      curConn.setRemember(value.remember);
+      curConn.login({
+        os_login: {
+          username: value.os_username,
+          password: value.os_password,
+        },
+        password: value.password,
+      });
      break;
    case 'close':
      close();
@@ -270,7 +282,7 @@ window.setByName = (name, value) => {
      value = JSON.parse(value);
      localStorage.setItem(name + ':' + value.name, value.value);
      break;
-    case 'peer_option':
+    case 'option:peer':
      value = JSON.parse(value);
      curConn.setOption(value.name, value.value);
      break;
@@ -409,7 +421,7 @@ export function playAudio(packet) {
 window.init = async () => {
  if (yuvWorker) {
    yuvWorker.onmessage = (e) => {
-      onRgba(e.data);
+      onRgba(e.data.display, e.data.frame);
    }
  }
  opusWorker.onmessage = (e) => {
@@ -493,12 +505,6 @@ function sessionAdd(value) {
    const data = JSON.parse(value);
    window.curConn?.close();
    const conn = new Connection();
-    if (data['password']) {
-      // TODO: encrypt password
-      conn.setOption('password', data['password'])
-    } else {
-      conn.setOption('password', undefined);
-    }
    setConn(conn);
    return '';
  } catch (e) {