feat: améliorer la gestion de WebSocket Directus

components/session/sign.js

@@ -1,7 +1,7 @@
 'use client'
 
 import PropTypes from 'prop-types'
-import {useEffect, useState} from 'react'
+import {useEffect, useState, useMemo} from 'react'
 import {signOut} from 'next-auth/react'
 import {useRouter} from 'next/navigation'
 import Box from '@mui/material/Box'
@@ -15,7 +15,7 @@ import PersonAddIcon from '@mui/icons-material/PersonAdd'
 import {createDirectus, realtime, staticToken} from '@directus/sdk'
 import ConfirmationAlert from './confirmation-alert.js'
 
-const apiWsUrl = process.env.DIRECTUS_API_WS_URL || process.env.NEXT_PUBLIC_DIRECTUS_API_WS_URL
+const apiUrl = process.env.DIRECTUS_API_URL || process.env.NEXT_PUBLIC_DIRECTUS_API_URL
 
 const LightTooltip = styled(({className, ...props}) => (
   <Tooltip {...props} classes={{popper: className}} />
@@ -32,17 +32,41 @@ export default function Sign({session, navButton}) {
   const router = useRouter()
   const [isOpen, setIsOpen] = useState(false)
 
-  const directusClientWS = createDirectus(apiWsUrl)
-    .with(staticToken(session?.user?.accessToken))
-    .with(realtime())
-
   const handleSignout = () => {
     setIsOpen(false)
     signOut()
   }
 
-  async function subscribe() {
-    const {subscription} = await directusClientWS.subscribe('directus_versions', {
+  useEffect(() => {
+    let cleanup = () => {}
+
+    if (session?.user?.accessToken) {
+      (async () => {
+        try {
+          console.log('Creating WebSocket client with token...')
+
+          // Create client with static token
+          const client = createDirectus(apiUrl)
+            .with(staticToken(session.user.accessToken))
+            .with(realtime())
+
+          console.log('Connecting to WebSocket...')
+          await client.connect()
+
+          client.onWebSocket('open', () => {
+            console.log({event: 'onopen', message: 'WebSocket connection opened'})
+          })
+
+          client.onWebSocket('message', message => {
+            console.log({event: 'onmessage', message})
+
+            // Once authenticated, subscribe
+            if (message.type === 'auth' && message.status === 'ok') {
+              console.log('WebSocket authenticated successfully!')
+
+              // Subscribe to version changes
+              ;(async () => {
+                const {subscription} = await client.subscribe('directus_versions', {
                   event: 'create',
                   query: {
                     fields: ['*'],
@@ -57,37 +81,21 @@ export default function Sign({session, navButton}) {
                 for await (const item of subscription) {
                   console.log('New version created:', item)
                 }
-  }
-
-  useEffect(() => {
-    let cleanup = () => {}
-
-    if (session) {
-      (async () => {
-        try {
-          await directusClientWS.connect()
-
-          directusClientWS.onWebSocket('open', () => {
-            console.log({event: 'onopen'})
-            subscribe()
-          })
-
-          directusClientWS.onWebSocket('message', message => {
-            if (message.type === 'auth' && message.status === 'ok') {
-              console.log({event: 'onmessage', message})
+              })()
             }
           })
 
-          directusClientWS.onWebSocket('close', () => {
-            console.log({event: 'onclose'})
+          client.onWebSocket('close', () => {
+            console.log({event: 'onclose', message: 'WebSocket connection closed'})
           })
 
-          directusClientWS.onWebSocket('error', error => {
+          client.onWebSocket('error', error => {
             console.log({event: 'onerror', error})
           })
 
           cleanup = () => {
-            directusClientWS.disconnect()
+            console.log('Disconnecting WebSocket...')
+            client.disconnect()
           }
         } catch (error) {
           console.error('WebSocket connection error:', error)
@@ -96,7 +104,7 @@ export default function Sign({session, navButton}) {
     }
 
     return () => cleanup()
-  }, [session]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [session?.user?.accessToken])
 
   return (
     <>