Handle fresh webexec sessions on reconnect

src/gate.ts

@@ -25,13 +25,15 @@ export interface ServerPayload {
     height: number
     width: number
     windows: SerializedWindow[]
+    session?: string
     active?: boolean
 }
 
 /*
  * The gate class abstracts a host connection
  */
 export class Gate {
+    sessionId?: string
     activeW: Window
     addr: string
     boarding: boolean
@@ -154,6 +156,16 @@ export class Gate {
             const e = this.e.querySelector(".tabbar-names") as HTMLElement
             e.style.setProperty("--indicator-color", color)
     }
+
+    private newSessionId(): string {
+        if (typeof crypto !== "undefined" && crypto.getRandomValues) {
+            const bytes = new Uint8Array(16)
+            crypto.getRandomValues(bytes)
+            return Array.from(bytes).map(b => b.toString(16).padStart(2, "0")).join("")
+        }
+        return Math.random().toString(16).slice(2) + Math.random().toString(16).slice(2)
+    }
+
     /*
      * onSessionState(state) is called when the connection
      * state changes.
@@ -178,8 +190,48 @@ export class Gate {
         } else if (state == "failed")  {
             this.handleFailure(failure)
         } else if (state == "gotlayout") {
-            const layout = JSON.parse(this.session.lastPayload)
+            let layout: ServerPayload | null = null
+            try {
+                layout = JSON.parse(this.session.lastPayload)
+            } catch(e) {
+                layout = null
+            }
+
+            const incomingSession = layout?.session
+            const hadSession = !!this.sessionId
+            let freshSession = false
+            let needsPersist = false
+
+            if (hadSession) {
+                if (!incomingSession || incomingSession !== this.sessionId) {
+                    freshSession = true
+                    this.sessionId = incomingSession || this.newSessionId()
+                    if (layout)
+                        layout.session = this.sessionId
+                    else
+                        layout = null
+                    this.clear()
+                    needsPersist = true
+                }
+            } else {
+                if (incomingSession) {
+                    this.sessionId = incomingSession
+                } else {
+                    this.sessionId = this.newSessionId()
+                    if (layout)
+                        layout.session = this.sessionId
+                    needsPersist = true
+                }
+            }
+
+            if (freshSession)
+                this.notify("fresh webexec session")
+
             this.setLayout(layout)
+
+            if (needsPersist && this.session)
+                this.session.setPayload(this.dump())
+
             this.onConnected()
         }
     }
@@ -691,7 +743,8 @@ export class Gate {
         const container = this.e.querySelector(".windows-container") as HTMLDivElement
         return { windows: windows,
                  width: container.clientWidth,
-                 height: container.clientHeight }
+                 height: container.clientHeight,
+                 session: this.sessionId }
     }
     storeState() {
         /* TODO: restore the restore to last state
@@ -877,18 +930,57 @@ export class Gate {
         }
         await this.session.connect(this.marker)
     }
-    load() {
+    async load() {
         this.t7.log("loading gate")
-        this.session.getPayload().then((payload: string) => {
-            let layout: ServerPayload | null = null
+        let layout: ServerPayload | null = null
+        try {
+            const payload = await this.session.getPayload()
             try {
                 layout = JSON.parse(payload)
             } catch(e) {
                 layout = null
             }
-            console.log("got payload", layout)
-            this.setLayout(layout)
-        })
+        } catch(e) {
+            this.t7.log("failed to get payload", e)
+            layout = null
+        }
+        console.log("got payload", layout)
+
+        const incomingSession = layout?.session
+        const hadSession = !!this.sessionId
+        let freshSession = false
+        let needsPersist = false
+
+        if (hadSession) {
+            if (!incomingSession || incomingSession !== this.sessionId) {
+                freshSession = true
+                this.sessionId = incomingSession || this.newSessionId()
+                if (layout)
+                    layout.session = this.sessionId
+                else
+                    layout = null
+                this.clear()
+                needsPersist = true
+            }
+        } else {
+            if (incomingSession) {
+                this.sessionId = incomingSession
+            } else {
+                this.sessionId = this.newSessionId()
+                if (layout)
+                    layout.session = this.sessionId
+                needsPersist = true
+            }
+        }
+
+        if (freshSession)
+            this.notify("fresh webexec session")
+
+        this.setLayout(layout)
+
+        if (needsPersist && this.session)
+            this.session.setPayload(this.dump())
+
         document.getElementById("map").classList.add("hidden")
     }
     onFormError(err) {