fix(ui): remove WS event listeners at main page unmount

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>

diff --git a/ui/web/src/composables/UIClient.ts b/ui/web/src/composables/UIClient.ts
index 04b703e3e5e397eaabf4c8f37d191e9806761633..8a86d1504624819305e38049d38bb3d321f74ae2 100644 (file)
--- a/ui/web/src/composables/UIClient.ts
+++ b/ui/web/src/composables/UIClient.ts
@@ -53,6 +53,14 @@ export class UIClient {
     this.ws?.addEventListener(event, listener, options)
   }
 
+  public unregisterWSEventListener<K extends keyof WebSocketEventMap>(
+    event: K,
+    listener: (event: WebSocketEventMap[K]) => void,
+    options?: boolean | AddEventListenerOptions
+  ) {
+    this.ws?.removeEventListener(event, listener, options)
+  }
+
   public async simulatorState(): Promise<ResponsePayload> {
     return this.sendRequest(ProcedureName.SIMULATOR_STATE, {})
   }

diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 109803f4beb8c2827c058cccddd9ae1235cbec8c..621c7122132ca6fd5564816446ccdaeaeb7bd21e 100644 (file)
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -18,7 +18,7 @@
                     state.uiServerIndex
                   ]
                 )
-                initializeWSEventListeners()
+                registerWSEventListeners()
                 uiClient.registerWSEventListener(
                   'open',
                   () => {
@@ -41,7 +41,7 @@
                         getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
                       ]
                     )
-                    initializeWSEventListeners()
+                    registerWSEventListeners()
                   },
                   { once: true }
                 )
@@ -115,7 +115,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, getCurrentInstance, onMounted, ref } from 'vue'
+import { computed, getCurrentInstance, onMounted, onUnmounted, ref } from 'vue'
 import { useToast } from 'vue-toast-notification'
 import CSTable from '@/components/charging-stations/CSTable.vue'
 import type { ResponsePayload, SimulatorState, UIServerConfigurationSection } from '@/types'
@@ -246,18 +246,30 @@ const getChargingStations = (): void => {
   }
 }
 
-const initializeWSEventListeners = () => {
-  uiClient.registerWSEventListener('open', () => {
-    getSimulatorState()
-    getTemplates()
-    getChargingStations()
-  })
+const getData = (): void => {
+  getSimulatorState()
+  getTemplates()
+  getChargingStations()
+}
+
+const registerWSEventListeners = () => {
+  uiClient.registerWSEventListener('open', getData)
   uiClient.registerWSEventListener('error', clearChargingStations)
   uiClient.registerWSEventListener('close', clearChargingStations)
 }
 
+const unregisterWSEventListeners = () => {
+  uiClient.unregisterWSEventListener('open', getData)
+  uiClient.unregisterWSEventListener('error', clearChargingStations)
+  uiClient.unregisterWSEventListener('close', clearChargingStations)
+}
+
 onMounted(() => {
-  initializeWSEventListeners()
+  registerWSEventListeners()
+})
+
+onUnmounted(() => {
+  unregisterWSEventListeners()
 })
 
 const uiServerConfigurations: { index: number; configuration: UIServerConfigurationSection }[] =