WS souscription

.env.sample

@@ -1,4 +1,5 @@
 DIRECTUS_API_URL=http://0.0.0.0:8055
+DIRECTUS_API_WS_URL=ws://0.0.0.0:8055/websocket
 APP_TITLE=constitution de karukera
 APP_FOOTER_TEXT=organisation ka internationale (oki)
 APP_FOOTER_URL=https://o-k-i.net
@@ -9,6 +10,7 @@ NEXTAUTH_SECRET=NEXTAUTH_SECRET
 USER_ROLE=DIRECTUS_USER_ROLE_ID
 NEXT_PUBLIC_URL=http://0.0.0.0:3000
 NEXT_PUBLIC_DIRECTUS_API_URL=$DIRECTUS_API_URL
+NEXT_PUBLIC_DIRECTUS_API_WS_URL=$DIRECTUS_API_WS_URL
 
 # COMMENTS
 COMMENTS_PER_PAGE=5

components/session/sign.js

@@ -1,7 +1,7 @@
 'use client'
 
 import PropTypes from 'prop-types'
-import {useState} from 'react'
+import {useEffect, useState} from 'react'
 import {signOut} from 'next-auth/react'
 import {useRouter} from 'next/navigation'
 import Box from '@mui/material/Box'
@@ -12,8 +12,11 @@ import Tooltip, {tooltipClasses} from '@mui/material/Tooltip'
 import LogoutIcon from '@mui/icons-material/Logout'
 import LoginIcon from '@mui/icons-material/Login'
 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 LightTooltip = styled(({className, ...props}) => (
   <Tooltip {...props} classes={{popper: className}} />
 ))(({theme}) => ({
@@ -29,11 +32,72 @@ 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) {
+      (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'})
+          })
+
+          directusClientWS.onWebSocket('error', error => {
+            console.log({event: 'onerror', error})
+          })
+
+          cleanup = () => {
+            directusClientWS.disconnect()
+          }
+        } catch (error) {
+          console.error('WebSocket connection error:', error)
+        }
+      })()
+    }
+
+    return () => cleanup()
+  }, [session]) // eslint-disable-line react-hooks/exhaustive-deps
+
   return (
     <>
       <Box sx={{display: 'flex', justifyContent: session ? 'start' : 'center', marginTop: 2}}>