diff --git a/packages/editor-ui/src/mixins/pushConnection.ts b/packages/editor-ui/src/mixins/pushConnection.ts index 7117ebd4f3ded..86d2cb2d2a907 100644 --- a/packages/editor-ui/src/mixins/pushConnection.ts +++ b/packages/editor-ui/src/mixins/pushConnection.ts @@ -53,13 +53,19 @@ export const pushConnection = defineComponent({ return { retryTimeout: null as NodeJS.Timeout | null, pushMessageQueue: [] as Array<{ message: IPushData; retriesLeft: number }>, + removeEventListener: null as (() => void) | null, }; }, created() { - this.pushStore.addEventListener((message) => { + this.removeEventListener = this.pushStore.addEventListener((message) => { void this.pushMessageReceived(message); }); }, + unmounted() { + if (typeof this.removeEventListener === 'function') { + this.removeEventListener(); + } + }, computed: { ...mapStores( useCredentialsStore, diff --git a/packages/editor-ui/src/stores/pushConnection.store.ts b/packages/editor-ui/src/stores/pushConnection.store.ts index e7a2f68bc1ea7..b636303c24b98 100644 --- a/packages/editor-ui/src/stores/pushConnection.store.ts +++ b/packages/editor-ui/src/stores/pushConnection.store.ts @@ -33,10 +33,17 @@ export const usePushConnectionStore = defineStore(STORES.PUSH, () => { const lostConnection = ref(false); const outgoingQueue = ref([]); const isConnectionOpen = ref(false); + const onMessageReceivedHandlers = ref([]); const addEventListener = (handler: OnPushMessageHandler) => { onMessageReceivedHandlers.value.push(handler); + return () => { + const index = onMessageReceivedHandlers.value.indexOf(handler); + if (index !== -1) { + onMessageReceivedHandlers.value.splice(index, 1); + } + }; }; function onConnectionError() { @@ -139,7 +146,7 @@ export const usePushConnectionStore = defineStore(STORES.PUSH, () => { } catch (error) { return; } - // TODO: Why is this received multiple times? + onMessageReceivedHandlers.value.forEach((handler) => handler(receivedData)); }