fix: unable to establish WebSocket connection in Chrome

Author: bclswl0827

internal/server/router/socket/setup.go

@@ -6,7 +6,6 @@ import (
 
 	"github.com/anyshake/observer/internal/hardware"
 	"github.com/anyshake/observer/internal/hardware/explorer"
-	"github.com/anyshake/observer/internal/server/middleware/auth_jwt"
 	"github.com/anyshake/observer/internal/server/response"
 	"github.com/anyshake/observer/pkg/logger"
 	"github.com/anyshake/observer/pkg/message"
@@ -18,15 +17,16 @@ import (
 
 func Setup(routerGroup *gin.RouterGroup, timeSource *timesource.Source, hardware hardware.IHardware, jwtMiddleware gin.HandlerFunc) {
 	s := socket{
-		messageBus:    message.NewBus[explorer.EventHandler](LOG_PREFIX, 65535),
-		historyBuffer: make([]buffer, 0, HISTORY_BUFFER_SIZE),
+		messageBus:     message.NewBus[explorer.EventHandler](LOG_PREFIX, 65535),
+		historyBuffer:  make([]buffer, 0, HISTORY_BUFFER_SIZE),
+		tokenValidator: newTokenValidator(jwtMiddleware),
 	}
 	hardware.Subscribe(LOG_PREFIX, func(t time.Time, di *explorer.DeviceConfig, dv *explorer.DeviceVariable, cd []explorer.ChannelData) {
 		s.messageBus.Publish(t, di, dv, cd)
 		s.storeHistory(t, di, cd)
 	})
 
-	routerGroup.GET("/socket", auth_jwt.NewWebsocketAuthAdapter(), jwtMiddleware, func(ctx *gin.Context) {
+	routerGroup.GET("/socket", func(ctx *gin.Context) {
 		upgrader := websocket.Upgrader{
 			ReadBufferSize:    1024,
 			WriteBufferSize:   1024,
@@ -91,8 +91,22 @@ func (s *socket) sendHistory(conn *websocket.Conn, timeSource *timesource.Source
 
 func (s *socket) handleWebSocket(_ *gin.Context, conn *websocket.Conn, timeSource *timesource.Source) {
 	clientID := conn.RemoteAddr().String()
+	logger.GetLogger(LOG_PREFIX).Infof("%s - client connected, waiting for authentication", clientID)
+
+	conn.SetReadDeadline(time.Now().Add(10 * time.Second))
+	_, tokenBytes, err := conn.ReadMessage()
+	conn.SetReadDeadline(time.Time{})
+	if err != nil {
+		logger.GetLogger(LOG_PREFIX).Warnf("%s - authentication timeout or read error: %v", clientID, err)
+		return
+	}
+	if !s.tokenValidator(string(tokenBytes)) {
+		logger.GetLogger(LOG_PREFIX).Warnf("%s - authentication failed", clientID)
+		return
+	}
+
 	subscribedAt := time.Now()
-	logger.GetLogger(LOG_PREFIX).Infof("%s - client subscribed to message bus", clientID)
+	logger.GetLogger(LOG_PREFIX).Infof("%s - authenticated and subscribed to message bus", clientID)
 
 	callbackFn := func(t time.Time, di *explorer.DeviceConfig, dv *explorer.DeviceVariable, cd []explorer.ChannelData) {
 		data := map[string]any{

internal/server/router/socket/types.go

@@ -18,7 +18,8 @@ type buffer struct {
 }
 
 type socket struct {
-	mu            sync.Mutex
-	messageBus    message.Bus[explorer.EventHandler]
-	historyBuffer []buffer
+	mu             sync.Mutex
+	messageBus     message.Bus[explorer.EventHandler]
+	tokenValidator func(string) bool
+	historyBuffer  []buffer
 }

internal/server/router/socket/validator.go

@@ -0,0 +1,28 @@
+package socket
+
+import (
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+)
+
+type noopResponseWriter struct {
+	header http.Header
+	code   int
+}
+
+func (n *noopResponseWriter) Header() http.Header         { return n.header }
+func (n *noopResponseWriter) Write(b []byte) (int, error) { return len(b), nil }
+func (n *noopResponseWriter) WriteHeader(code int)        { n.code = code }
+
+func newTokenValidator(middlewareFn gin.HandlerFunc) func(string) bool {
+	return func(tokenStr string) bool {
+		w := &noopResponseWriter{header: make(http.Header)}
+		c, _ := gin.CreateTestContext(w)
+		req, _ := http.NewRequest(http.MethodGet, "/", nil)
+		req.Header.Set("Authorization", "Bearer "+tokenStr)
+		c.Request = req
+		middlewareFn(c)
+		return !c.IsAborted()
+	}
+}

web/src/src/views/RealTime/index.tsx

@@ -96,7 +96,6 @@ const RealTime = () => {
 
     const { readyState, sendMessage } = useSocket(
         {
-            protocols: [`Bearer#${getCredential().token.replace(/=/g, '')}`],
             url: getSocketApiUrl(),
             onData: ({ data }) => {
                 const { channel_data, sample_rate, record_time, current_time } = data;
@@ -132,9 +131,10 @@ const RealTime = () => {
     );
     useEffect(() => {
         if (readyState === 1) {
+            sendMessage(getCredential().token);
             sendMessage('client hello');
         }
-    }, [readyState, sendMessage]);
+    }, [readyState, sendMessage, getCredential]);
 
     const getInitialLayout = useCallback(
         (id: string, index: number) => {