setup socket.io server on Playground

packages/editor/package.json

@@ -67,6 +67,8 @@
     "reactstrap": "^9.2.2",
     "string-width": "=4.2.2",
     "simplebar-react": "^2.3.6",
+    "socket.io": "^4.7.5",
+    "socket.io-client": "^4.7.5",
     "swr": "^2.2.2",
     "ts-deepmerge": "^6.2.0",
     "y-codemirror.next": "^0.3.5",

packages/editor/src/client/components-internal/playground/Playground.tsx

@@ -3,6 +3,7 @@ import {
 } from 'react';
 
 import { AcceptedUploadFileType } from '@growi/core';
+import { GLOBAL_SOCKET_KEY, useSWRStatic } from '@growi/core/dist/swr';
 import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 import { toast } from 'react-toastify';
 
@@ -27,6 +28,8 @@ export const Playground = (): JSX.Element => {
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
 
+  const { mutate } = useSWRStatic(GLOBAL_SOCKET_KEY);
+
   const initialValue = '# header\n';
 
   // initialize
@@ -50,6 +53,26 @@ export const Playground = (): JSX.Element => {
     });
   }, [setEditorSettings, editorKeymap, editorTheme, editorPaste]);
 
+  // initialize global socket
+  useEffect(() => {
+    const setUpSocket = async() => {
+      const { io } = await import('socket.io-client');
+      const socket = io({
+        transports: ['websocket'],
+      });
+
+      // eslint-disable-next-line no-console
+      socket.on('error', (err) => { console.error(err) });
+      // eslint-disable-next-line no-console
+      socket.on('connect_error', (err) => { console.error('Failed to connect with websocket.', err) });
+
+      mutate(socket);
+    };
+
+    setUpSocket();
+
+  }, [mutate]);
+
   // set handler to save with shortcut key
   const saveHandler = useCallback(() => {
     // eslint-disable-next-line no-console
@@ -82,6 +105,7 @@ export const Playground = (): JSX.Element => {
           <CodeMirrorEditorMain
             enableCollaboration
             enableUnifiedMergeView={enableUnifiedMergeView}
+            pageId="pageId-for-playground"
             onSave={saveHandler}
             onUpload={uploadHandler}
             indentSize={4}

packages/editor/vite.config.ts

@@ -1,8 +1,11 @@
 import path from 'path';
 
+
 import react from '@vitejs/plugin-react';
 import glob from 'glob';
 import { nodeExternals } from 'rollup-plugin-node-externals';
+import { Server } from 'socket.io';
+import type { Plugin } from 'vite';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 
@@ -13,10 +16,31 @@ const excludeFiles = [
   '**/vite-env.d.ts',
 ];
 
+const devSocketIOPlugin = (): Plugin => ({
+  name: 'dev-socket-io',
+  apply: 'serve',
+  configureServer(server) {
+    if (!server.httpServer) return;
+
+    const io = new Server(server.httpServer);
+
+    io.on('connection', (socket) => {
+      // eslint-disable-next-line no-console
+      console.log('Client connected');
+
+      socket.on('disconnect', () => {
+        // eslint-disable-next-line no-console
+        console.log('Client disconnected');
+      });
+    });
+  },
+});
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     react(),
+    devSocketIOPlugin(),
     dts({
       entryRoot: 'src',
       exclude: [

pnpm-lock.yaml

@@ -1235,6 +1235,12 @@ importers:
       simplebar-react:
         specifier: ^2.3.6
         version: 2.4.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      socket.io:
+        specifier: ^4.7.5
+        version: 4.8.1
+      socket.io-client:
+        specifier: ^4.7.5
+        version: 4.8.1
       string-width:
         specifier: '=4.2.2'
         version: 4.2.2