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,62 +32,70 @@ 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', {
-      event: 'create',
-      query: {
-        fields: ['*'],
-        filter: {
-          collection: {
-            _eq: 'titres'
-          }
-        }
-      }
-    })
-
-    for await (const item of subscription) {
-      console.log('New version created:', item)
-    }
-  }
-
   useEffect(() => {
     let cleanup = () => {}
 
-    if (session) {
+    if (session?.user?.accessToken) {
       (async () => {
         try {
-          await directusClientWS.connect()
+          console.log('Creating WebSocket client with token...')
 
-          directusClientWS.onWebSocket('open', () => {
+          // Create client with static token
-            console.log({event: 'onopen'})
+          const client = createDirectus(apiUrl)
-            subscribe()
+            .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'})
           })
 
-          directusClientWS.onWebSocket('message', message => {
+          client.onWebSocket('message', message => {
+            console.log({event: 'onmessage', message})
+
+            // Once authenticated, subscribe
             if (message.type === 'auth' && message.status === 'ok') {
-              console.log({event: 'onmessage', message})
+              console.log('WebSocket authenticated successfully!')
+
+              // Subscribe to version changes
+              ;(async () => {
+                const {subscription} = await client.subscribe('directus_versions', {
+                  event: 'create',
+                  query: {
+                    fields: ['*'],
+                    filter: {
+                      collection: {
+                        _eq: 'titres'
+                      }
+                    }
+                  }
+                })
+
+                for await (const item of subscription) {
+                  console.log('New version created:', item)
+                }
+              })()
             }
           })
 
-          directusClientWS.onWebSocket('close', () => {
+          client.onWebSocket('close', () => {
-            console.log({event: 'onclose'})
+            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 (
     <>