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) => {
-    // Share any information you like
-    provider?.setAwarenessField("userMouseMovement", {
+  document.addEventListener(
+    'mousemove',
+    debounce((event: MouseEvent) => {
+      provider?.setAwarenessField('userMouseMovement', {
         user: session.data.user,
         mouseX: event.clientX,
         mouseY: event.clientY,
         color: thisPageColor,
-      onlineInstanceID: onlinePageInstanceID
-    });
-  });
-
+        onlineInstanceID: onlinePageInstanceID,
+      })
+    }, 300)
+  )
 
   async function setContent(content: any) {
     let activity = props.activity
@@ -197,4 +199,3 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
 
 
 export default EditorWrapper
-

apps/web/lib/utils.ts

@@ -1,6 +1,17 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from 'clsx'
+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
+}