feat: check whether user have closed the tab

Author: kermanx

frontend/src/App.vue

@@ -46,10 +46,23 @@ async function onUIOpened() {
   const session = params.get('session')
   if (!session)
     return
-  await serviceStore.fetch('ui/opened', {
-    method: 'POST',
-    body: JSON.stringify({ session }),
-  })
+  pingActive()
+
+  async function pingActive() {
+    try {
+      const resp = await serviceStore.fetch('ui/active', {
+        method: 'POST',
+        body: JSON.stringify({ session }),
+      })
+      const data = await resp.json()
+      if (data.continue !== false) {
+        setTimeout(pingActive, 1000)
+      }
+    }
+    catch {
+      setTimeout(pingActive, 1000)
+    }
+  }
 }
 onUIOpened()
 </script>

frontend/src/stores/service.ts

@@ -26,13 +26,14 @@ export const useServiceStore = defineStore('service', () => {
   })
   let requireFindService = true
 
-  const givenServerPort = Number.parseInt(params.get('port') || '')
-  if (givenServerPort > 0 && givenServerPort < 65535) {
-    servicePort.value = givenServerPort
-    requireFindService = false
-  }
-
   const initialLoad = new Promise<void>((resolve) => {
+    const givenServerPort = Number.parseInt(params.get('port') || '')
+    if (givenServerPort > 0 && givenServerPort < 65535) {
+      servicePort.value = givenServerPort
+      requireFindService = false
+      resolve()
+    }
+
     useIntervalFn(
       async () => {
         if (requireFindService) {
@@ -58,7 +59,7 @@ export const useServiceStore = defineStore('service', () => {
 
   useIntervalFn(() => {
     requireFindService = true
-  }, 3000)
+  }, 5000)
 
   return {
     serverConnected,

service/logic/open.go

@@ -13,14 +13,15 @@ import (
 	"github.com/google/uuid"
 )
 
-var openingUI = make(map[string](chan struct{}))
 var ServerPort = -1
 
-func OpenUI(params url.Values, auth bool) error {
+var sessionActive = make(map[string]chan<- struct{})
+
+func OpenUI(params url.Values, auth bool) (<-chan struct{}, func(), error) {
 	if auth {
 		allUsers, err := store.Users.List()
 		if err != nil {
-			return err
+			return nil, nil, err
 		}
 
 		var userName string
@@ -32,7 +33,7 @@ func OpenUI(params url.Values, auth bool) error {
 
 		token, err := GenerateJWT(userName)
 		if err != nil {
-			return err
+			return nil, nil, err
 		}
 		params.Set("username", userName)
 		params.Set("token", token)
@@ -42,28 +43,27 @@ func OpenUI(params url.Values, auth bool) error {
 	params.Set("session", sessionId)
 	params.Set("port", strconv.Itoa(ServerPort))
 
-	err := openBrowser.OpenBrowser(constants.UserName, constants.AppBaseUrl+"?"+params.Encode())
-	if err != nil {
-		return err
-	}
+	openBrowser.OpenBrowser(constants.UserName, constants.AppBaseUrl+"?"+params.Encode())
 
 	channel := make(chan struct{})
-	openingUI[sessionId] = channel
-	defer delete(openingUI, sessionId)
+	sessionActive[sessionId] = channel
+	cleanup := func() {
+		delete(sessionActive, sessionId)
+	}
 
 	select {
 	case <-channel:
-		return nil
+		return channel, cleanup, nil
 	case <-time.After(5 * time.Second):
-		return fmt.Errorf("failed to open UI: timeout")
+		cleanup()
+		return nil, nil, fmt.Errorf("failed to open UI: timeout")
 	}
 }
 
-func OnUIOpened(sessionId string) {
-	channel, ok := openingUI[sessionId]
-	if !ok {
-		return
+func OnUIActive(sessionId string) bool {
+	channel, ok := sessionActive[sessionId]
+	if ok {
+		channel <- struct{}{}
 	}
-	channel <- struct{}{}
-	close(channel)
+	return ok
 }

service/server/action.go

@@ -13,7 +13,7 @@ import (
 func SetupActionAPI(router *gin.Engine) {
 	router.GET("/", handleCheck)
 	router.GET("/ui/open", handleOpenUI)
-	router.POST("/ui/opened", handleUIOpened)
+	router.POST("/ui/active", handleUIActive)
 }
 
 func handleCheck(c *gin.Context) {
@@ -24,15 +24,18 @@ func handleCheck(c *gin.Context) {
 }
 
 func handleOpenUI(c *gin.Context) {
-	err := logic.OpenUI(url.Values{}, true)
+	_, cleanup, err := logic.OpenUI(url.Values{}, true)
+	if cleanup != nil {
+		cleanup()
+	}
 
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to open UI"})
 		return
 	}
 }
 
-func handleUIOpened(c *gin.Context) {
+func handleUIActive(c *gin.Context) {
 	var req struct {
 		Session string `json:"session"`
 	}
@@ -41,6 +44,7 @@ func handleUIOpened(c *gin.Context) {
 		return
 	}
 
-	logic.OnUIOpened(req.Session)
-	c.Status(http.StatusOK)
+	shouldContinue := logic.OnUIActive(req.Session)
+
+	c.JSON(http.StatusOK, gin.H{"continue": shouldContinue})
 }

service/server/app.go

@@ -21,7 +21,7 @@ func SetupAppAPI(router gin.IRouter) {
 	router.Group("/app").Use(RequireUserLogin()).DELETE("/clear", handleAppClear)
 }
 
-var waitForGrant = make(map[string]chan bool)
+var waitForGrant = make(map[string]chan<- bool)
 
 func handleAppRegister(c *gin.Context) {
 	var req struct {
@@ -98,35 +98,39 @@ func handleAppRegister(c *gin.Context) {
 
 	channel := make(chan bool)
 	waitForGrant[uid] = channel
+	defer delete(waitForGrant, uid)
 
 	params := url.Values{
 		"action":         {"register"},
 		"appId":          {uid},
 		"appName":        {req.Name},
 		"appDescription": {req.Description},
 	}
-	err := logic.OpenUI(params, true)
-
-	timeout := 10 * time.Minute
+	uiActive, cleanup, err := logic.OpenUI(params, true)
+	if cleanup != nil {
+		defer cleanup()
+	}
 	if err != nil {
-		timeout = 10 * time.Second
+		c.JSON(http.StatusInternalServerError, gin.H{"error": fmt.Sprintf("Failed to open UI: %v", err)})
+		return
 	}
 
-	select {
-	case result := <-channel:
-		if result {
-			granted()
-		} else {
-			c.JSON(http.StatusForbidden, gin.H{"error": "App registration denied"})
-		}
-	case <-time.After(timeout):
-		if err != nil {
-			c.JSON(http.StatusInternalServerError, gin.H{"error": fmt.Sprintf("Failed to open UI: %v", err)})
-		} else {
-			c.JSON(http.StatusRequestTimeout, gin.H{"error": "App registration timed out"})
+	for {
+		select {
+		case result := <-channel:
+			if result {
+				granted()
+			} else {
+				c.JSON(http.StatusForbidden, gin.H{"error": "App registration denied"})
+			}
+			return
+		case <-uiActive:
+			continue
+		case <-time.After(5 * time.Second):
+			c.JSON(http.StatusRequestTimeout, gin.H{"error": "App registration timed out. User may have closed the tab"})
+			return
 		}
 	}
-	delete(waitForGrant, uid)
 }
 
 func handleAppList(c *gin.Context) {