feat: websocket performance increased

Informatievlaanderen · Oct 26, 2023 · 21b7c26 · 21b7c26
1 parent 473f924
commit 21b7c26
Show file tree

Hide file tree

Showing 9 changed files with 210 additions and 203 deletions.
diff --git a/...informatievlaanderen/vsds/demonstrator/member/application/services/MemberServiceImpl.java b/...informatievlaanderen/vsds/demonstrator/member/application/services/MemberServiceImpl.java
@@ -51,7 +51,7 @@ public void ingestMember(IngestedMemberDto ingestedMemberDto) {
             Member member = ingestedMemberDto.getMember(eventStreamConfig);
             repository.saveMember(member);
             MemberDto memberDto = new MemberDto(member.getMemberId(), geoJSONWriter.write(member.getGeometry()), ingestedMemberDto.getCollection(), member.getTimestamp(), member.getIsVersionOf(), member.getProperties());
-            messageController.send(memberDto, ingestedMemberDto.getCollection());
+            messageController.send(memberDto);
 
             log.info("new member ingested");
         } catch (FactoryException | TransformException e) {

diff --git a/...va/be/informatievlaanderen/vsds/demonstrator/member/rest/websocket/MessageController.java b/...va/be/informatievlaanderen/vsds/demonstrator/member/rest/websocket/MessageController.java
@@ -9,16 +9,15 @@
 
 @Controller
 public class MessageController {
-	private SimpMessagingTemplate template;
+	private final SimpMessagingTemplate template;
 	private static final Logger log = LoggerFactory.getLogger(MessageController.class);
 
-	@Autowired
 	public MessageController(SimpMessagingTemplate template) {
 		this.template = template;
 	}
 
-	public void send(MemberDto member, String collection) {
+	public void send(MemberDto member) {
 		log.info("sending member");
-		this.template.convertAndSend("/broker/member/" + collection, member);
+		this.template.convertAndSend("/broker/member/", member);
 	}
 }
diff --git a/demonstrator.env b/demonstrator.env
@@ -8,12 +8,12 @@ LDES_STREAMS_GIPOD_TIMESTAMPPATH=http://www.w3.org/ns/prov#generatedAtTime
 LDES_STREAMS_GIPOD_VERSIONOFPATH=http://purl.org/dc/terms/isVersionOf
 LDES_STREAMS_GIPOD_PROPERTYPREDICATES_STARTTIME=http://data.europa.eu/m8g/startTime
 LDES_STREAMS_GIPOD_PROPERTYPREDICATES_ENDTIME=http://data.europa.eu/m8g/endTime
-LDES_STREAMS_VERKEERSMETING_MEMBERTYPE=https://data.vlaanderen.be/ns/verkeersmetingen#Verkeersmeting
-LDES_STREAMS_VERKEERSMETING_TIMESTAMPPATH=http://www.w3.org/ns/prov#generatedAtTime
-LDES_STREAMS_VERKEERSMETING_VERSIONOFPATH=http://purl.org/dc/terms/isVersionOf
-LDES_STREAMS_VERKEERSMETING_PROPERTYPREDICATES_FULLNAME=http://custom/meetpunt#VolledigeNaam
-LDES_STREAMS_VERKEERSMETING_PROPERTYPREDICATES_COUNTOBSERVATIONRESULT=http://def.isotc211.org/iso19156/2011/CountObservation#OM_CountObservation.result
-LDES_STREAMS_VERKEERSMETING_PROPERTYPREDICATES_OBSERVATIONRESULT=http://def.isotc211.org/iso19156/2011/Observation#OM_Observation.result
+# LDES_STREAMS_VERKEERSMETING_MEMBERTYPE=https://data.vlaanderen.be/ns/verkeersmetingen#Verkeersmeting
+# LDES_STREAMS_VERKEERSMETING_TIMESTAMPPATH=http://www.w3.org/ns/prov#generatedAtTime
+# LDES_STREAMS_VERKEERSMETING_VERSIONOFPATH=http://purl.org/dc/terms/isVersionOf
+# LDES_STREAMS_VERKEERSMETING_PROPERTYPREDICATES_FULLNAME=http://custom/meetpunt#VolledigeNaam
+# LDES_STREAMS_VERKEERSMETING_PROPERTYPREDICATES_COUNTOBSERVATIONRESULT=http://def.isotc211.org/iso19156/2011/CountObservation#OM_CountObservation.result
+# LDES_STREAMS_VERKEERSMETING_PROPERTYPREDICATES_OBSERVATIONRESULT=http://def.isotc211.org/iso19156/2011/Observation#OM_Observation.result
 LDES_STREAMS_BLUEBIKES_MEMBERTYPE=https://purl.eu/ns/mobility/passenger-transport-hubs#ResourceReport
 LDES_STREAMS_BLUEBIKES_TIMESTAMPPATH=http://www.w3.org/ns/prov#generatedAtTime
 LDES_STREAMS_BLUEBIKES_VERSIONOFPATH=http://purl.org/dc/terms/isVersionOf

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -3,14 +3,38 @@ import LeafletMap from './components/map/LeafletMap.vue'
 import GlobalHeader from "@/components/headers/GlobalHeader.vue";
 import MemberCounter from './components/membercounter/MemberCounter.vue'
 import LineChart from "@/components/linechart/LineChart.vue";
+import {onMounted, onUnmounted, ref} from "vue";
+import Stomp from "webstomp-client";
+
+const stompClient = ref(null);
+
+onMounted(() => connect())
+onUnmounted(() => disconnect())
+
+function connect() {
+  stompClient.value = new Stomp.client(`${import.meta.env.VITE_WS_BASE_URL}/update`, {debug: false});
+  stompClient.value.connect(
+      {},
+      () => console.debug("Websocket connection readiness:", stompClient.value.connected),
+      error => {
+        console.error(error);
+        connect();
+      }
+  )
+}
+
+function disconnect() {
+  stompClient.value?.disconnect();
+}
+
 </script>
 
 <template>
   <GlobalHeader/>
   <main class="container">
     <div class="content-header">
       <h1 class="header header1">Vlaamse Smart Data Space Demonstrator</h1>
-      <MemberCounter/>
+      <MemberCounter :stomp-client="stompClient"/>
     </div>
     <div class="explanation-chart-container">
       <div class="body body-large-regular">
@@ -25,12 +49,12 @@ import LineChart from "@/components/linechart/LineChart.vue";
         </p>
       </div>
       <div class="line-chart body body-xxsmall-regular">
-        <LineChart></LineChart>
+        <LineChart :stomp-client="stompClient"></LineChart>
       </div>
     </div>
     <hr class="divider content-separator">
     <div>
-      <LeafletMap></LeafletMap>
+      <LeafletMap :stomp-client="stompClient"></LeafletMap>
     </div>
 
   </main>

diff --git a/frontend/src/components/linechart/LineChart.vue b/frontend/src/components/linechart/LineChart.vue
@@ -14,7 +14,6 @@ import {
   Legend,
 } from 'chart.js'
 import {Line} from 'vue-chartjs'
-import Stomp from "webstomp-client";
 import {streams} from "../../../streams.json"
 
 ChartJS.register(
@@ -32,14 +31,14 @@ export default {
   components: {
     Line
   },
+  props: ["stompClient"],
   data() {
     return {
       data: {
         labels: [],
         datasets: [],
-        stompClient: null,
+        subscription: null,
       },
-      //colorCodesFlanders: ["#FFED00", "blue", "#443939"],
       options: {
         interaction: {
           intersect: false,
@@ -50,74 +49,72 @@ export default {
       }
     };
   },
+  watch: {
+    'stompClient.connected': {
+      handler(newConnectedValue) {
+        if (newConnectedValue) {
+          this.subscribe();
+        }
+      },
+      immediate: true
+    }
+  },
   mounted() {
-    this.connect();
     ChartJS.defaults.font = {
       family: "'Flanders Art Sans Regular', sans-serif",
       size: 12,
       style: "normal",
       weight: 400,
     }
-
+  },
+  unmounted() {
+    this.unsubscribe();
   },
   methods: {
-    //websocket
-    connect() {
-      this.stompClient = new Stomp.client(`${import.meta.env.VITE_WS_BASE_URL}/update`, {debug: false});
-      this.stompClient.connect(
-          {},
-          () => {
-            this.stompClient.subscribe("/broker/linechart", (memberCounter) => {
-              let linechart = JSON.parse(memberCounter.body)
-              let datasetsOfLineChart = []
-              for (const element of linechart.dataSetDtos) {
-                let color = streams.find(stream => stream.id == element.name).color
-                datasetsOfLineChart.push({
-                  borderColor: color,
-                  pointRadius: 0,
-                  tension: 0.3,
-                  label: 'Aantal datapunten ' + element.name,
-                  backgroundColor: color,
-                  data: element.values,
-                })
-              }
-              this.data = {
-                labels: linechart.labels,
-                datasets: datasetsOfLineChart
-              }
-              this.options = {
-                interaction: {
-                  intersect: false,
-                },
-                scales: {
-                  x: {
-                    ticks: {
-                      maxTicksLimit: 7,
-                      maxRotation: 0,
-                      minRotation: 0,
-                    },
-                    options: {
-                      text: "Tijd (dagen)"
-                    }
-                  }
-                },
-                responsive: true,
-                maintainAspectRatio: false
-
+    subscribe() {
+      this.subscription = this.stompClient.subscribe("/broker/linechart", (memberCounter) => {
+        let linechart = JSON.parse(memberCounter.body)
+        let datasetsOfLineChart = []
+        for (const element of linechart.dataSetDtos) {
+          let color = streams.find(stream => stream.id == element.name).color
+          datasetsOfLineChart.push({
+            borderColor: color,
+            pointRadius: 0,
+            tension: 0.3,
+            label: 'Aantal datapunten ' + element.name,
+            backgroundColor: color,
+            data: element.values,
+          })
+        }
+        this.data = {
+          labels: linechart.labels,
+          datasets: datasetsOfLineChart
+        }
+        this.options = {
+          interaction: {
+            intersect: false,
+          },
+          scales: {
+            x: {
+              ticks: {
+                maxTicksLimit: 7,
+                maxRotation: 0,
+                minRotation: 0,
+              },
+              options: {
+                text: "Tijd (dagen)"
               }
-              // this.memberCounter = JSON.parse(memberCounter.body)
-            });
+            }
           },
-          error => {
-            console.error(error);
-            this.connect()
-          }
-      );
+          responsive: true,
+          maintainAspectRatio: false
+
+        }
+        // this.memberCounter = JSON.parse(memberCounter.body)
+      });
     },
-    disconnect() {
-      if (this.stompClient) {
-        this.stompClient.disconnect();
-      }
+    unsubscribe() {
+      this.subscription?.unsubscribe();
     }
   }
 }