UniqAI/hexabot
1
0
Fork 0
mirror of https://github.com/hexastack/hexabot synced 2025-04-05 13:35:20 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge pull request #653 from Hexastack/652-bug---broadcastchannel-duplicate-tab
Some checks failed
Build and Push Docker API Image / build-and-push (push) Has been cancelled
Details
Build and Push Docker Base Image / build-and-push (push) Has been cancelled
Details
Build and Push Docker UI Image / build-and-push (push) Has been cancelled
Details

Browse Source 
fix: resolve broadcastChannel duplication tab bug
This commit is contained in:
Med Marrouchi 2025-01-31 08:25:42 +01:00 committed by GitHub
commit 1b5b759549
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 14 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/contexts/broadcast-channel.context.tsx
View File

@ -15,23 +15,16 @@ import {
useRef, useRef,
} from "react"; } from "react";
import { generateId } from "@/utils/generateId";
export enum EBCEvent { export enum EBCEvent {
LOGIN = "login", LOGIN = "login",
LOGOUT = "logout", LOGOUT = "logout",
} }
type BroadcastChannelPayload = { type BroadcastChannelMessage = {
event: `${EBCEvent}`; event: `${EBCEvent}`;
data?: string | number | boolean | Record<string, unknown> | undefined | null; data?: string | number | boolean | Record<string, unknown> | undefined | null;
}; };
type BroadcastChannelData = {
tabId: string;
payload: BroadcastChannelPayload;
};
interface IBroadcastChannelProps { interface IBroadcastChannelProps {
channelName: string; channelName: string;
children: ReactNode; children: ReactNode;
@ -40,24 +33,11 @@ interface IBroadcastChannelProps {
interface IBroadcastChannelContext { interface IBroadcastChannelContext {
subscribe: ( subscribe: (
event: `${EBCEvent}`, event: `${EBCEvent}`,
callback: (message: BroadcastChannelData) => void, callback: (message: BroadcastChannelMessage) => void,
) => void; ) => void;
postMessage: (payload: BroadcastChannelPayload) => void; postMessage: (message: BroadcastChannelMessage) => void;
} }
const getOrCreateTabId = () => {
let storedTabId = sessionStorage.getItem("tab_uuid");
if (storedTabId) {
return storedTabId;
}
storedTabId = generateId();
sessionStorage.setItem("tab_uuid", storedTabId);
return storedTabId;
};
export const BroadcastChannelContext = createContext< export const BroadcastChannelContext = createContext<
IBroadcastChannelContext | undefined IBroadcastChannelContext | undefined
>(undefined); >(undefined);
@ -75,19 +55,10 @@ export const BroadcastChannelProvider: FC<IBroadcastChannelProps> = ({
Array<Parameters<IBroadcastChannelContext["subscribe"]>["1"]> Array<Parameters<IBroadcastChannelContext["subscribe"]>["1"]>
> >
>({}); >({});
const tabUuid = getOrCreateTabId();
useEffect(() => { useEffect(() => {
const handleMessage = ({ data }: MessageEvent<BroadcastChannelData>) => { const handleMessage = ({ data }: MessageEvent<BroadcastChannelMessage>) => {
const { tabId, payload } = data; subscribersRef.current[data.event].forEach((callback) => callback(data));
if (tabId === tabUuid) {
return;
}
subscribersRef.current[payload.event].forEach((callback) =>
callback(data),
);
}; };
channelRef.current.addEventListener("message", handleMessage); channelRef.current.addEventListener("message", handleMessage);
@ -113,11 +84,8 @@ export const BroadcastChannelProvider: FC<IBroadcastChannelProps> = ({
} }
}; };
}; };
const postMessage: IBroadcastChannelContext["postMessage"] = (payload) => { const postMessage: IBroadcastChannelContext["postMessage"] = (message) => {
channelRef.current.postMessage({ channelRef.current.postMessage(message);
tabId: tabUuid,
payload,
});
}; };
return ( return (

47
widget/src/providers/BroadcastChannelProvider.tsx
View File

@ -15,22 +15,15 @@ import {
useRef, useRef,
} from "react"; } from "react";
import { generateId } from "../utils/generateId";
export enum EBCEvent { export enum EBCEvent {
LOGOUT = "logout", LOGOUT = "logout",
} }
type BroadcastChannelPayload = { type BroadcastChannelMessage = {
event: `${EBCEvent}`; event: `${EBCEvent}`;
data?: string | number | boolean | Record<string, unknown> | undefined | null; data?: string | number | boolean | Record<string, unknown> | undefined | null;
}; };
type BroadcastChannelData = {
tabId: string;
payload: BroadcastChannelPayload;
};
interface IBroadcastChannelProps { interface IBroadcastChannelProps {
channelName: string; channelName: string;
children: ReactNode; children: ReactNode;
@ -39,24 +32,11 @@ interface IBroadcastChannelProps {
interface IBroadcastChannelContext { interface IBroadcastChannelContext {
subscribe: ( subscribe: (
event: `${EBCEvent}`, event: `${EBCEvent}`,
callback: (message: BroadcastChannelData) => void, callback: (message: BroadcastChannelMessage) => void,
) => void; ) => void;
postMessage: (payload: BroadcastChannelPayload) => void; postMessage: (message: BroadcastChannelMessage) => void;
} }
const getOrCreateTabId = () => {
let storedTabId = sessionStorage.getItem("tab_uuid");
if (storedTabId) {
return storedTabId;
}
storedTabId = generateId();
sessionStorage.setItem("tab_uuid", storedTabId);
return storedTabId;
};
export const BroadcastChannelContext = createContext< export const BroadcastChannelContext = createContext<
IBroadcastChannelContext | undefined IBroadcastChannelContext | undefined
>(undefined); >(undefined);
@ -74,19 +54,10 @@ export const BroadcastChannelProvider: FC<IBroadcastChannelProps> = ({
Array<Parameters<IBroadcastChannelContext["subscribe"]>["1"]> Array<Parameters<IBroadcastChannelContext["subscribe"]>["1"]>
> >
>({}); >({});
const tabUuid = getOrCreateTabId();
useEffect(() => { useEffect(() => {
const handleMessage = ({ data }: MessageEvent<BroadcastChannelData>) => { const handleMessage = ({ data }: MessageEvent<BroadcastChannelMessage>) => {
const { tabId, payload } = data; subscribersRef.current[data.event].forEach((callback) => callback(data));
if (tabId === tabUuid) {
return;
}
subscribersRef.current[payload.event].forEach((callback) =>
callback(data),
);
}; };
channelRef.current.addEventListener("message", handleMessage); channelRef.current.addEventListener("message", handleMessage);
@ -96,7 +67,6 @@ export const BroadcastChannelProvider: FC<IBroadcastChannelProps> = ({
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
channelRef.current.close(); channelRef.current.close();
}; };
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
const subscribe: IBroadcastChannelContext["subscribe"] = ( const subscribe: IBroadcastChannelContext["subscribe"] = (
@ -114,11 +84,8 @@ export const BroadcastChannelProvider: FC<IBroadcastChannelProps> = ({
} }
}; };
}; };
const postMessage: IBroadcastChannelContext["postMessage"] = (payload) => { const postMessage: IBroadcastChannelContext["postMessage"] = (message) => {
channelRef.current.postMessage({ channelRef.current.postMessage(message);
tabId: tabUuid,
payload,
});
}; };
return ( return (

21
widget/src/utils/generateId.ts
View File

@ -1,21 +0,0 @@
/*
* Copyright © 2025 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
*/
import { getRandom } from "./safeRandom";
export const generateId = () => {
const d =
typeof performance === "undefined" ? Date.now() : performance.now() * 1000;
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
const r = (getRandom() * 16 + d) % 16 | 0;
return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
});
};

16
widget/src/utils/safeRandom.ts
View File

@ -1,16 +0,0 @@
/*
* Copyright © 2025 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
*/
/**
* Return a cryptographically secure random value between 0 and 1
*
* @returns A cryptographically secure random value between 0 and 1
*/
export const getRandom = (): number =>
window.crypto.getRandomValues(new Uint32Array(1))[0] * Math.pow(2, -32);