Merge pull request #326 from eduardconstantin/feat/debounce-websocket

Feat/debounce websocket

apps/web/components/Objects/Editor/EditorWrapper.tsx

@@ -15,6 +15,7 @@ import { getCollaborationServerUrl } from '@services/config/config'
 import randomColor from 'randomcolor'
 import MouseMovements from './MouseMovements'
 import { v4 as uuidv4 } from 'uuid';
+import { debounce } from '@/lib/utils';
 
 interface EditorWrapperProps {
   content: string
@@ -55,17 +56,18 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
   // Store the Y document in the browser
   new IndexeddbPersistence(props.activity.activity_uuid, doc)
 
-  document.addEventListener("mousemove", (event) => {
+  document.addEventListener(
-    // Share any information you like
+    'mousemove',
-    provider?.setAwarenessField("userMouseMovement", {
+    debounce((event: MouseEvent) => {
-      user: session.data.user,
+      provider?.setAwarenessField('userMouseMovement', {
-      mouseX: event.clientX,
+        user: session.data.user,
-      mouseY: event.clientY,
+        mouseX: event.clientX,
-      color: thisPageColor,
+        mouseY: event.clientY,
-      onlineInstanceID: onlinePageInstanceID
+        color: thisPageColor,
-    });
+        onlineInstanceID: onlinePageInstanceID,
-  });
+      })
-
+    }, 300)
+  )
 
   async function setContent(content: any) {
     let activity = props.activity
@@ -196,5 +198,4 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
 
 
 
-export default EditorWrapper
+export default EditorWrapper
-

apps/web/lib/utils.ts

@@ -1,6 +1,17 @@
-import { clsx, type ClassValue } from "clsx"
+import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from "tailwind-merge"
+import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  delay: number
+): T {
+  let timeoutId: ReturnType<typeof setTimeout>
+  return function (this: any, ...args: Parameters<T>) {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => func.apply(this, args), delay)
+  } as T
+}