Status de connexion WebSocket et /ws sur NGINX

front/src/components/collaborative/CollaborativeEditor.jsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
 import useGraphQL, { useMutation } from '../../hooks/graphql.js'
+import CollaborativeEditorWebSocketStatus from './CollaborativeEditorWebSocketStatus.jsx'
 
 import { stopCollaborativeSession, getCollaborativeSession } from './CollaborativeSession.graphql'
 

front/src/components/collaborative/CollaborativeEditorWebSocketStatus.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Dot, Loading } from '@geist-ui/core'
+
+
+import styles from './CollaborativeEditorWebSocketStatus.module.scss'
+
+export default function CollaborativeEditorWebSocketStatus ({ status }) {
+  return (
+    <>
+      {status === 'connected' && <Dot type="success" className={styles.dot}>Connected</Dot>}
+      {status === 'disconnected' && <Dot type="error" className={styles.dot}>Disconnected</Dot>}
+      {status === 'connecting' && <Dot type="warning" className={styles.dot}>Connecting <Loading/></Dot>}
+    </>
+  )
+}
+
+CollaborativeEditorWebSocketStatus.propTypes = {
+  status: PropTypes.string.isRequired
+}

front/src/components/collaborative/CollaborativeEditorWebSocketStatus.module.scss

@@ -0,0 +1,3 @@
+.dot {
+  font-size: 0.8rem !important;
+}

front/src/components/collaborative/CollaborativeTextEditor.jsx

@@ -6,6 +6,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { shallowEqual, useDispatch, useSelector } from 'react-redux'
 import { MonacoBinding } from 'y-monaco'
 import * as collaborating from './collaborating.js'
+import CollaborativeEditorWebSocketStatus from './CollaborativeEditorWebSocketStatus.jsx'
 import CollaborativeEditorWriters from './CollaborativeEditorWriters.jsx'
 
 import styles from './CollaborativeTextEditor.module.scss'
@@ -44,6 +45,7 @@ const colors = [
 export default function CollaborativeTextEditor ({ collaborativeSessionId }) {
   const connectingRef = useRef(false)
   const [dynamicStyles, setDynamicStyles] = useState('')
+  const [ websocketStatus, setWebsocketStatus] = useState('')
   const [yStatus, setYStatus] = useState()
   const [yText, setYText] = useState()
   const [awareness, setAwareness] = useState()
@@ -60,8 +62,8 @@ export default function CollaborativeTextEditor ({ collaborativeSessionId }) {
 
   const options = useMemo(() => ({
     automaticLayout: true,
-    readOnly: false,
-    contextmenu: true,
+    readOnly: websocketStatus !== 'connected',
+    contextmenu: websocketStatus === 'connected',
     autoClosingBrackets: 'never',
     wordBasedSuggestions: false,
     overviewRulerLanes: 0,
@@ -73,7 +75,7 @@ export default function CollaborativeTextEditor ({ collaborativeSessionId }) {
     minimap: {
       enabled: false
     }
-  }), [])
+  }), [websocketStatus])
 
   const handleUpdateArticleStructureAndStats = throttle(({ text }) => {
       dispatch({ type: 'UPDATE_ARTICLE_STATS', md: text })
@@ -114,6 +116,9 @@ export default function CollaborativeTextEditor ({ collaborativeSessionId }) {
 }`
         }).join('\n'))
       },
+      onStatusUpdated: (status) => {
+        setWebsocketStatus(status)
+      }
     })
     const yText = yDocument.getText('main')
     const yStatus= yDocument.getText('status')
@@ -154,8 +159,13 @@ export default function CollaborativeTextEditor ({ collaborativeSessionId }) {
     <style>
       {dynamicStyles}
     </style>
-    <div className={styles.writers}>
-      <CollaborativeEditorWriters/>
+    <div className={styles.row}>
+      <div className={styles.writers}>
+        <CollaborativeEditorWriters/>
+      </div>
+      <div className={styles.status}>
+        <CollaborativeEditorWebSocketStatus status={websocketStatus}/>
+      </div>
     </div>
     <Editor
       options={options}

front/src/components/collaborative/CollaborativeTextEditor.module.scss

@@ -14,6 +14,16 @@
 }
 
 .writers {
-  margin-bottom: 1em;
   margin-left: 1em;
+  flex: 1;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1em;
+}
+
+.status {
+  font-weight: 300;
 }

front/src/components/collaborative/collaborating.js

@@ -4,7 +4,7 @@ import * as awarenessProtocol from 'y-protocols/awareness.js'
 
 const noop = () => {}
 
-export function connect({ roomName, websocketEndpoint, user, onChange = noop, onConnection = noop }) {
+export function connect({ roomName, websocketEndpoint, user, onChange = noop, onConnection = noop, onStatusUpdated = noop, onConnectionError = noop, onConnectionClosed = noop }) {
   const doc = new Y.Doc()
   const awareness = new awarenessProtocol.Awareness(doc);
   const wsProvider = new WebsocketProvider(websocketEndpoint, roomName, doc, {
@@ -22,6 +22,15 @@ export function connect({ roomName, websocketEndpoint, user, onChange = noop, on
   wsProvider.once('sync', () => onConnection({
     states: awareness.getStates(),
   }))
+  wsProvider.on('status', function(event)  {
+    onStatusUpdated(event.status)
+  })
+  wsProvider.on('connection-close', function(wsClosedEvent) {
+    onConnectionClosed(wsClosedEvent)
+  })
+  wsProvider.on('connection-error', function(wsErrorEvent) {
+    onConnectionError(wsErrorEvent)
+  })
 
   awareness.setLocalState({ user })
 

front/src/createReduxStore.js

@@ -18,9 +18,9 @@ function toWebsocketEndpoint (endpoint) {
   if (endpoint) {
     const endpointUrl = new URL(endpoint)
     const protocol = endpointUrl.protocol
-    return `${protocol === 'https:' ? 'wss' : 'ws'}://${endpointUrl.hostname}:${endpointUrl.port}`
+    return `${protocol === 'https:' ? 'wss' : 'ws'}://${endpointUrl.hostname}:${endpointUrl.port}/ws`
   }
-  return `ws://127.0.0.1:3030`
+  return `ws://127.0.0.1:3030/ws`
 }
 
 // Définition du store Redux et de l'ensemble des actions

graphql/resolvers/articleResolver.js

@@ -357,7 +357,7 @@ module.exports = {
         createdAt: new Date()
       }
       article.collaborativeSession = collaborativeSession
-      const yDoc = getYDoc(collaborativeSessionId.toString())
+      const yDoc = getYDoc(`ws/${collaborativeSessionId.toString()}`)
       const yText = yDoc.getText('main')
       yText.insert(0, article.workingVersion.md)
       await article.save()
@@ -366,7 +366,7 @@ module.exports = {
 
     async stopCollaborativeSession(article) {
       if (article.collaborativeSession && article.collaborativeSession.id) {
-        const yDoc = getYDoc(article.collaborativeSession.id.toString())
+        const yDoc = getYDoc(`ws/${article.collaborativeSession.id.toString()}`)
         const yStatus = yDoc.getText('status')
         yStatus.delete(0, yStatus.length)
         yStatus.insert(0, 'ended')

infrastructure/files/stylo-dev.huma-num.fr.conf

@@ -44,7 +44,7 @@ server {
     proxy_redirect off;
   }
 
-  location ~ ^/(graphql|login/openid|login/local|login/zotero|logout|authorization-code) {
+  location ~ ^/(graphql|login/openid|login/local|login/zotero|logout|authorization-code|ws) {
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header X-Forwarded-Proto $scheme;

infrastructure/files/stylo.huma-num.fr.conf

@@ -44,7 +44,7 @@ server {
     proxy_redirect off;
   }
 
-  location ~ ^/(graphql|login/openid|login/local|login/zotero|logout|authorization-code) {
+  location ~ ^/(graphql|login/openid|login/local|login/zotero|logout|authorization-code|ws) {
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header X-Forwarded-Proto $scheme;