fix: reverse proxy for sse

Author: 0xJacky

api/system/router.go

@@ -31,6 +31,7 @@ func InitSelfCheckRouter(r *gin.RouterGroup) {
 	g := r.Group("self_check", authIfInstalled)
 	g.GET("", middleware.Proxy(), SelfCheck)
 	g.POST("/:name/fix", middleware.Proxy(), SelfCheckFix)
+	g.GET("sse", middleware.Proxy(), CheckSSE)
 	g.GET("websocket", middleware.ProxyWs(), CheckWebSocket)
 }
 

api/system/self_check.go

@@ -1,9 +1,13 @@
 package system
 
 import (
+	"io"
+	"net/http"
+
 	"github.com/gorilla/websocket"
 	"github.com/uozi-tech/cosy/logger"
-	"net/http"
+
+	"time"
 
 	"github.com/0xJacky/Nginx-UI/internal/self_check"
 	"github.com/gin-gonic/gin"
@@ -39,3 +43,19 @@ func CheckWebSocket(c *gin.Context) {
 		return
 	}
 }
+
+func CheckSSE(c *gin.Context) {
+	notify := c.Writer.CloseNotify()
+	for i := 0; i < 10; i++ {
+		select {
+		case <-notify:
+			return
+		default:
+			c.Stream(func(w io.Writer) bool {
+				c.SSEvent("message", time.Now())
+				return false
+			})
+			time.Sleep(time.Second * 2)
+		}
+	}
+}

app/src/components/SelfCheck/tasks/frontend/index.ts

@@ -1,10 +1,11 @@
 import type { FrontendTask } from '../types'
 import HttpsCheckTask from './https-check'
+import SSETask from './sse'
 import WebsocketTask from './websocket'
-
 // Collection of all frontend tasks
 const frontendTasks: Record<string, FrontendTask> = {
   'Frontend-Websocket': WebsocketTask,
+  'Frontend-SSE': SSETask,
   'Frontend-HttpsCheck': HttpsCheckTask,
   // Add more frontend tasks here
 }

app/src/components/SelfCheck/tasks/frontend/sse.ts

@@ -0,0 +1,57 @@
+import type { ReportStatusType } from '@/api/self_check'
+import type { FrontendTask } from '../types'
+import { ReportStatus } from '@/api/self_check'
+import { useSSE } from '@/composables/useSSE'
+
+/**
+ * SSE Task
+ *
+ * Checks if the application is able to connect to the backend through the Server-Sent Events protocol
+ */
+const SSETask: FrontendTask = {
+  key: 'sse',
+  name: () => 'SSE',
+  description: () => $gettext('Support communication with the backend through the Server-Sent Events protocol. '
+    + 'If your Nginx UI is being used via an Nginx reverse proxy, '
+    + 'please refer to this link to write the corresponding configuration file: '
+    + 'https://nginxui.com/guide/nginx-proxy-example.html'),
+  check: async (): Promise<ReportStatusType> => {
+    try {
+      const connected = await new Promise<boolean>(resolve => {
+        const { connect, disconnect } = useSSE()
+
+        // Use the connect method from useSSE
+        connect({
+          url: '/api/self_check/sse',
+          onMessage: () => {
+            resolve(true)
+          },
+          onError: () => {
+            resolve(false)
+            disconnect()
+          },
+          reconnectInterval: 0,
+        })
+
+        // Set a timeout for the connection attempt
+        setTimeout(() => {
+          resolve(false)
+          disconnect()
+        }, 5000)
+      })
+
+      if (connected) {
+        return ReportStatus.Success
+      }
+      else {
+        return ReportStatus.Error
+      }
+    }
+    catch (error) {
+      console.error(error)
+      return ReportStatus.Error
+    }
+  },
+}
+
+export default SSETask

app/src/composables/useSSE.ts

@@ -1,10 +1,12 @@
 import type { SSEvent } from 'sse.js'
 import { urlJoin } from '@/lib/helper'
-import { useUserStore } from '@/pinia'
+import { useSettingsStore, useUserStore } from '@/pinia'
+import { storeToRefs } from 'pinia'
 import { SSE } from 'sse.js'
 
 const userStore = useUserStore()
 const { token } = storeToRefs(userStore)
+const settings = useSettingsStore()
 
 export interface SSEOptions {
   url: string
@@ -40,10 +42,16 @@ export function useSSE() {
 
     const fullUrl = urlJoin(window.location.pathname, url)
 
+    const headers = {
+      Authorization: token.value,
+    }
+
+    if (settings.environment.id) {
+      headers['X-Node-ID'] = settings.environment.id.toString()
+    }
+
     const sse = new SSE(fullUrl, {
-      headers: {
-        Authorization: token.value,
-      },
+      headers,
     })
 
     // Handle messages
@@ -86,9 +94,11 @@ export function useSSE() {
   }
 
   // Automatically disconnect when the component is unmounted
-  onUnmounted(() => {
-    disconnect()
-  })
+  if (getCurrentInstance()) {
+    onUnmounted(() => {
+      disconnect()
+    })
+  }
 
   return {
     connect,