eduvia/workavia-calendar-front
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#449] added debounce for websocket updates (#476)

Browse Source 
* [#449] added debounce for websocket updates

* [#449] changed behavior to have disableable debounce + changed debounced messages data storage to be handled by websocket Gate
This commit is contained in:
Camille Moussu
2026-01-26 11:15:37 +01:00
committed by GitHub
parent 1fc85e141e
commit dafac94aec
8 changed files with 341 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
__test__/features/websocket/utils/notificationStorm.test.tsx
+131
View File
@@ -0,0 +1,131 @@
import type { AppDispatch, RootState } from "@/app/store";
import { store } from "@/app/store";
import { refreshCalendarWithSyncToken } from "@/features/Calendars/services";
import { getDisplayedCalendarRange } from "@/utils";
import { updateCalendars } from "@/websocket/messaging/updateCalendars";
jest.mock("@/features/Calendars/services", () => ({
refreshCalendarWithSyncToken: jest.fn(),
}));
jest.mock("@/utils", () => ({
getDisplayedCalendarRange: jest.fn(),
findCalendarById: jest.requireActual("@/utils").findCalendarById,
}));
jest.mock("@/app/store", () => ({
store: {
getState: jest.fn(),
},
}));
jest.useFakeTimers();
const mockDispatch = jest.fn();
const mockRange = {
start: new Date("2025-01-15T10:00:00Z"),
end: new Date("2025-01-16T10:00:00Z"),
};
const mockState = {
calendars: {
list: {
"cal1/entry1": { id: "cal1/entry1", name: "Calendar 1", syncToken: 1 },
"cal2/entry2": { id: "cal2/entry2", name: "Calendar 2", syncToken: 1 },
"cal/A": { id: "cal/A", name: "Cal A", syncToken: 1 },
"cal/B": { id: "cal/B", name: "Cal B", syncToken: 1 },
"cal/C": { id: "cal/C", name: "Cal C", syncToken: 1 },
},
templist: {},
},
} as unknown as RootState;
const mockAccumulators: {
calendarsToRefresh: Map<string, any>;
calendarsToHide: Set<string>;
debouncedUpdateFn?: (dispatch: AppDispatch) => void;
currentDebouncePeriod?: number;
} = {
calendarsToRefresh: new Map<string, any>(),
calendarsToHide: new Set(),
currentDebouncePeriod: 0,
debouncedUpdateFn: undefined,
};
describe("websocket messages storm", () => {
beforeEach(() => {
(refreshCalendarWithSyncToken as unknown as jest.Mock).mockClear();
jest.clearAllMocks();
jest.clearAllTimers();
jest.resetModules();
(getDisplayedCalendarRange as jest.Mock).mockReturnValue(mockRange);
(store.getState as jest.Mock).mockReturnValue(mockState);
(window as any).WS_DEBOUNCE_PERIOD_MS = 500;
mockAccumulators.calendarsToRefresh = new Map<string, any>();
mockAccumulators.calendarsToHide = new Set();
mockAccumulators.currentDebouncePeriod = 0;
mockAccumulators.debouncedUpdateFn = undefined;
});
it("debounces calendar updates during message storm", () => {
const mockMessage = {
"/calendars/cal1/entry1": {
syncToken: "ldsk",
},
};
for (let i = 0; i < 50; i++) {
updateCalendars(mockMessage, mockDispatch, mockAccumulators);
}
// Dispatch called once because of leading edge
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(1);
// Trailing edge
jest.advanceTimersByTime(500);
// only one call for the last message + leading edge message
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(2);
});
it("debounces calendar updates during message storm with multiple updates", () => {
// Send a storm with mixed messages
for (let i = 0; i < 50; i++) {
if (i % 3 === 0)
updateCalendars(
{ "/calendars/cal/A": { syncToken: "ldskfjsld" + i } },
mockDispatch,
mockAccumulators
);
else if (i % 3 === 1)
updateCalendars(
{ "/calendars/cal/B": { syncToken: "ldskfjsld" + i } },
mockDispatch,
mockAccumulators
);
else
updateCalendars(
{ "/calendars/cal/C": { syncToken: "ldskfjsld" + i } },
mockDispatch,
mockAccumulators
);
}
// Dispatch called once because of leading edge
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(1);
// Trailing edge
jest.advanceTimersByTime(500);
// Trailing edge updates once per calendar + the original leading edge
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(4);
});
it("executes immediately when debounce is disabled", () => {
(window as any).WS_DEBOUNCE_PERIOD_MS = 0;
updateCalendars(
{ "/calendars/cal1/entry1": { syncToken: "abc" } },
mockDispatch,
mockAccumulators
);
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(1);
});
});
__test__/features/websocket/utils/updateCalendars.test.tsx
+34 -17
View File
@@ -1,4 +1,4 @@
import { RootState, store } from "@/app/store";
import { AppDispatch, RootState, store } from "@/app/store";
import { refreshCalendarWithSyncToken } from "@/features/Calendars/services/refreshCalendar";
import { getDisplayedCalendarRange } from "@/utils/CalendarRangeManager";
import { updateCalendars } from "@/websocket/messaging/updateCalendars";
@@ -29,23 +29,38 @@ describe("updateCalendars", () => {
templist: {},
},
} as unknown as RootState;
const mockAccumulators: {
calendarsToRefresh: Map<string, any>;
calendarsToHide: Set<string>;
debouncedUpdateFn?: (dispatch: AppDispatch) => void;
currentDebouncePeriod?: number;
} = {
calendarsToRefresh: new Map<string, any>(),
calendarsToHide: new Set(),
currentDebouncePeriod: 0,
debouncedUpdateFn: jest.fn(),
};
beforeEach(() => {
jest.clearAllMocks();
mockDispatch = jest.fn();
(getDisplayedCalendarRange as jest.Mock).mockReturnValue(mockRange);
(store.getState as jest.Mock).mockReturnValue(mockState);
mockAccumulators.calendarsToRefresh = new Map<string, any>();
mockAccumulators.calendarsToHide = new Set();
mockAccumulators.currentDebouncePeriod = 0;
mockAccumulators.debouncedUpdateFn = jest.fn();
});
it("should not dispatch for non-object messages", () => {
updateCalendars(null, mockDispatch);
updateCalendars("string", mockDispatch);
updateCalendars(123, mockDispatch);
updateCalendars(null, mockDispatch, mockAccumulators);
updateCalendars("string", mockDispatch, mockAccumulators);
updateCalendars(123, mockDispatch, mockAccumulators);
expect(refreshCalendarWithSyncToken).not.toHaveBeenCalled();
});
it("should dispatch for registered calendars", () => {
it("should dispatch for registered calendars", async () => {
const message = {
[WS_INBOUND_EVENTS.CLIENT_REGISTERED]: [
"/calendars/cal1/entry1",
@@ -53,19 +68,22 @@ describe("updateCalendars", () => {
],
};
updateCalendars(message, mockDispatch);
updateCalendars(message, mockDispatch, mockAccumulators);
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(2);
await waitFor(() =>
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(2)
);
});
it("should dispatch for calendar path updates", () => {
it("should dispatch for calendar path updates", async () => {
const message = {
"/calendars/cal1/entry1": { updated: true },
};
updateCalendars(message, mockDispatch);
expect(refreshCalendarWithSyncToken).toHaveBeenCalled();
updateCalendars(message, mockDispatch, mockAccumulators);
await waitFor(() =>
expect(refreshCalendarWithSyncToken).toHaveBeenCalled()
);
expect(refreshCalendarWithSyncToken).toHaveBeenCalledWith({
calendar: mockState.calendars.list["cal1/entry1"],
calType: undefined,
@@ -73,14 +91,13 @@ describe("updateCalendars", () => {
});
});
it("should use current displayed calendar range", () => {
it("should use displayed calendar range", async () => {
const message = {
"/calendars/cal1/entry1": {},
};
updateCalendars(message, mockDispatch);
expect(getDisplayedCalendarRange).toHaveBeenCalled();
updateCalendars(message, mockDispatch, mockAccumulators);
await waitFor(() => expect(getDisplayedCalendarRange).toHaveBeenCalled());
});
it("should handle temp calendars", async () => {
@@ -103,7 +120,7 @@ describe("updateCalendars", () => {
"/calendars/temp1/entry1": {},
};
updateCalendars(message, mockDispatch);
updateCalendars(message, mockDispatch, mockAccumulators);
await waitFor(() =>
expect(refreshCalendarWithSyncToken).toHaveBeenCalledWith({
@@ -120,7 +137,7 @@ describe("updateCalendars", () => {
"not-a-path": {},
};
updateCalendars(message, mockDispatch);
updateCalendars(message, mockDispatch, mockAccumulators);
expect(refreshCalendarWithSyncToken).not.toHaveBeenCalled();
});
package-lock.json
Generated
+12 -3
View File
@@ -27,6 +27,7 @@
"i18next": "^23.7.9",
"ical.js": "^2.2.0",
"ky": "^1.8.1",
"lodash": "^4.17.23",
"moment": "^2.30.1",
"moment-timezone": "^0.5.48",
"openid-client": "^6.5.3",
@@ -53,6 +54,7 @@
"@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^30.0.0",
"@types/lodash": "^4.17.23",
"@types/node": "^20.19.24",
"@types/react": "^18.3.26",
"@types/react-dom": "^18.3.7",
@@ -4619,6 +4621,13 @@
"dev": true,
"license": "MIT"
},
"node_modules/@types/lodash": {
"version": "4.17.23",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.23.tgz",
"integrity": "sha512-RDvF6wTulMPjrNdCoYRC8gNR880JNGT8uB+REUpC2Ns4pRqQJhGz90wh7rgdXDPpCczF3VGktDuFGVnz8zP7HA==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/node": {
"version": "20.19.27",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.27.tgz",
@@ -11103,9 +11112,9 @@
}
},
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"version": "4.17.23",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
"integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
"license": "MIT"
},
"node_modules/lodash.debounce": {
package.json
+2
View File
@@ -22,6 +22,7 @@
"i18next": "^23.7.9",
"ical.js": "^2.2.0",
"ky": "^1.8.1",
"lodash": "^4.17.23",
"moment": "^2.30.1",
"moment-timezone": "^0.5.48",
"openid-client": "^6.5.3",
@@ -71,6 +72,7 @@
"@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^30.0.0",
"@types/lodash": "^4.17.23",
"@types/node": "^20.19.24",
"@types/react": "^18.3.26",
"@types/react-dom": "^18.3.7",
public/.env.example.js
+1
View File
@@ -11,3 +11,4 @@ var VIDEO_CONFERENCE_BASE_URL = "https://meet.linagora.com";
var DEBUG = false;
var LANG = "en";
var WEBSOCKET_URL = "wss://calendar.example.com";
var WS_DEBOUNCE_PERIOD_MS = 100; // milliseconds, remove or set to 0 to disable debounce
src/websocket/WebSocketGate.tsx
+19 -2
View File
@@ -1,10 +1,11 @@
import { useAppDispatch, useAppSelector } from "@/app/hooks";
import { AppDispatch } from "@/app/store";
import { useSelectedCalendars } from "@/utils/storage/useSelectedCalendars";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { WebSocketWithCleanup } from "./connection";
import { closeWebSocketConnection } from "./connection/lifecycle/closeWebSocketConnection";
import { establishWebSocketConnection } from "./connection/lifecycle/establishWebSocketConnection";
import { updateCalendars } from "./messaging";
import { updateCalendars } from "./messaging/updateCalendars";
import { syncCalendarRegistrations } from "./operations";
export function WebSocketGate() {
@@ -24,9 +25,25 @@ export function WebSocketGate() {
useAppSelector((state) => state?.calendars?.templist) ?? {}
);
const calendarsToRefreshRef = useRef<Map<string, any>>(new Map());
const calendarsToHideRef = useRef<Set<string>>(new Set());
const debouncedUpdateFnRef = useRef<
((dispatch: AppDispatch) => void) | undefined
>();
const currentDebouncePeriodRef = useRef<number | undefined>();
const onMessage = useCallback(
(message: unknown) => {
updateCalendars(message, dispatch);
const accumulators = {
calendarsToRefresh: calendarsToRefreshRef.current,
calendarsToHide: calendarsToHideRef.current,
debouncedUpdateFn: debouncedUpdateFnRef.current,
currentDebouncePeriod: currentDebouncePeriodRef.current,
};
updateCalendars(message, dispatch, accumulators);
// Persist any mutations back to refs
debouncedUpdateFnRef.current = accumulators.debouncedUpdateFn;
currentDebouncePeriodRef.current = accumulators.currentDebouncePeriod;
},
[dispatch]
);
src/websocket/messaging/type/UpdateCalendarsAccumulators.ts
+8
View File
@@ -0,0 +1,8 @@
import { AppDispatch } from "@/app/store";
export interface UpdateCalendarsAccumulators {
calendarsToRefresh: Map<string, any>;
calendarsToHide: Set<string>;
debouncedUpdateFn?: (dispatch: AppDispatch) => void;
currentDebouncePeriod?: number;
}
src/websocket/messaging/updateCalendars.ts
+128 -13
View File
@@ -3,21 +3,132 @@ import { store } from "@/app/store";
import { refreshCalendarWithSyncToken } from "@/features/Calendars/services";
import { findCalendarById, getDisplayedCalendarRange } from "@/utils";
import { setSelectedCalendars } from "@/utils/storage/setSelectedCalendars";
import { debounce } from "lodash";
import { parseCalendarPath } from "./parseCalendarPath";
import { parseMessage } from "./parseMessage";
import { UpdateCalendarsAccumulators } from "./type/UpdateCalendarsAccumulators";
export function updateCalendars(message: unknown, dispatch: AppDispatch) {
const DEFAULT_DEBOUNCE_MS = 0;
function createDebouncedUpdate(
debouncePeriodMs: number,
getCalendarsToRefresh: () => Map<string, any>,
getCalendarsToHide: () => Set<string>
) {
return debounce(
(dispatch: AppDispatch) => {
const currentRange = getDisplayedCalendarRange();
// Snapshot state
const calendarsToProcess = new Map(getCalendarsToRefresh());
const calendarsToHideSnapshot = new Set(getCalendarsToHide());
// Clear accumulators
getCalendarsToRefresh().clear();
getCalendarsToHide().clear();
try {
processCalendarsToRefresh(dispatch, currentRange, calendarsToProcess);
processCalendarsToHide(calendarsToHideSnapshot);
} catch (error) {
console.warn("Error processing accumulated calendar updates:", error);
}
},
debouncePeriodMs,
{ leading: true, trailing: true }
);
}
export function updateCalendars(
message: unknown,
dispatch: AppDispatch,
accumulators: UpdateCalendarsAccumulators
) {
const state = store.getState();
const { calendarsToRefresh, calendarsToHide } = parseMessage(message);
calendarsToRefresh.forEach((calendarPath) => {
// Accumulate
accumulateCalendarsToRefresh(
state,
calendarsToRefresh,
accumulators.calendarsToRefresh
);
accumulateCalendarsToHide(calendarsToHide, accumulators.calendarsToHide);
const debouncePeriod =
(window as any).WS_DEBOUNCE_PERIOD_MS ?? DEFAULT_DEBOUNCE_MS;
if (debouncePeriod > 0) {
if (
!accumulators.debouncedUpdateFn ||
accumulators.currentDebouncePeriod !== debouncePeriod
) {
accumulators.debouncedUpdateFn = createDebouncedUpdate(
debouncePeriod,
() => accumulators.calendarsToRefresh,
() => accumulators.calendarsToHide
);
accumulators.currentDebouncePeriod = debouncePeriod;
}
accumulators.debouncedUpdateFn(dispatch);
return;
}
// Immediate processing if debounce disabled
const currentRange = getDisplayedCalendarRange();
const calendarsToProcess = new Map(accumulators.calendarsToRefresh);
const calendarsToHideSnapshot = new Set(accumulators.calendarsToHide);
accumulators.calendarsToRefresh.clear();
accumulators.calendarsToHide.clear();
try {
processCalendarsToRefresh(dispatch, currentRange, calendarsToProcess);
processCalendarsToHide(calendarsToHideSnapshot);
} catch (error) {
console.warn("Error processing calendar updates:", error);
}
}
// --- Helpers ---
function accumulateCalendarsToRefresh(
state: ReturnType<typeof store.getState>,
calendarPaths: Set<string>,
calendarsToRefreshMap: Map<string, any>
) {
calendarPaths.forEach((calendarPath) => {
const calendarId = parseCalendarPath(calendarPath);
if (!calendarId) {
console.warn("Invalid calendar path received:", calendarPath);
return;
}
const calendar = findCalendarById(state, calendarId);
if (calendar) {
if (!calendar) {
console.warn("Calendar not found for id:", calendarId);
return;
}
calendarsToRefreshMap.set(calendarId, calendar);
});
}
function accumulateCalendarsToHide(
calendarPaths: Set<string>,
calendarsToHideSet: Set<string>
) {
calendarPaths.forEach((calendarPath) => {
const calendarId = parseCalendarPath(calendarPath);
if (calendarId) {
calendarsToHideSet.add(calendarId);
}
});
}
function processCalendarsToRefresh(
dispatch: AppDispatch,
currentRange: { start: Date; end: Date },
calendarsMap: Map<string, any>
) {
calendarsMap.forEach((calendar) => {
dispatch(
refreshCalendarWithSyncToken({
calendar: calendar.calendar,
@@ -25,20 +136,24 @@ export function updateCalendars(message: unknown, dispatch: AppDispatch) {
calendarRange: currentRange,
})
);
} else {
console.warn("Calendar not found for id:", calendarId);
}
});
const currentSelectedCalendars = JSON.parse(
localStorage.getItem("selectedCalendars") ?? "[]"
) as string[];
}
const calendarIdsToHide = [...calendarsToHide]
.map(parseCalendarPath)
.filter((id): id is string => Boolean(id));
function processCalendarsToHide(calendarsToHideSnapshot: Set<string>) {
if (calendarsToHideSnapshot.size === 0) return;
let currentSelectedCalendars: string[];
try {
const stored = localStorage.getItem("selectedCalendars") ?? "[]";
currentSelectedCalendars = JSON.parse(stored);
} catch (error) {
console.warn("Failed to parse selectedCalendars from localStorage:", error);
return;
}
const updatedSelectedCalendars = currentSelectedCalendars.filter(
(id) => !calendarIdsToHide.includes(id)
(id) => !calendarsToHideSnapshot.has(id)
);
setSelectedCalendars(updatedSelectedCalendars);