diff --git a/backend/server.js b/backend/server.js
index 563f136..f46217b 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -31,8 +31,6 @@ async function run() {
await mongoClient.connect();
const collection = mongoClient.db().collection(mongoCollection);
- let eventArray = [];
-
changeStream = collection.watch(pipeline, options);
console.log("Started watching changes in database");
@@ -46,39 +44,32 @@ async function run() {
secretKey: minioURI.password
});
+ function wrapEvent(doc) {
+ if (doc.screenshot_count) {
+ doc.screenshots = [];
+ for (let i = 1; i <= doc.screenshot_count ; i++) {
+ minioClient.presignedUrl('GET', minioBucket, `${data.fullDocument.camera}/${data.fullDocument._id}/${i}.jpg`, 60 * 60, (err, presignedUrl) => {
+ if (err) { return console.log(err) };
+ doc.screenshots.push({ url: presignedUrl });
+ })
+ }
+ };
+ let blob = JSON.stringify(doc);
+ return `event: log-entry\ndata: ${blob}\n\n`
+ }
+
// Notify SSE to React
const header = { 'Content-Type': 'text/event-stream', 'Connection': 'keep-alive' };
response.writeHead(200, "OK", header);
- response.write('Connection established \n\n');
const historyCursor = collection.find({}).sort({$natural : -1}).limit(historyNumber);
historyCursor.forEach((document) => {
- const stringFormat = JSON.stringify(document);
- eventArray = [stringFormat, ...eventArray];
+ response.write(wrapEvent(document));
})
- response.write(`event: events \n`)
- response.write(`data: [${[...eventArray]}]\n\n`)
changeStream.on("change", data => {
-
- let document = JSON.stringify(data.fullDocument);
- eventArray = [document];
-
- if (data.fullDocument.screenshot_count) {
-
- for (let i = 1; i <= data.fullDocument.screenshot_count ; i++) {
- minioClient.presignedUrl('GET', minioBucket, `${data.fullDocument.camera}/${data.fullDocument._id}/${i}.jpg`, 60 * 60, (err, presignedUrl) => {
- if (err) { return console.log(err) };
- const realURL = JSON.stringify({ picUrl: presignedUrl });
- eventArray = [realURL, ...eventArray];
- })
- }
-
- };
-
- response.write(`data: [${[...eventArray]}]\n\n`);
-
+ response.write(wrapEvent(data.fullDocument));
});
});
diff --git a/frontend/src/components/app/App.js b/frontend/src/components/app/App.js
index 11d4c95..243d57b 100644
--- a/frontend/src/components/app/App.js
+++ b/frontend/src/components/app/App.js
@@ -1,30 +1,35 @@
import React, { useState, useEffect } from 'react';
-import { useSSE, SSEProvider, createCustomSource } from 'react-hooks-sse';
+import { useSSE, SSEProvider } from 'react-hooks-sse';
import './App.css';
import EventList from '../eventList/EventList.js';
-const SSE = () => {
- const state = useSSE('events');
- const [events, setEvents] = useState([]); // initialises Event state
- useEffect(() => {
- console.log('render');
- if (state) {
- setEvents([JSON.parse(state.data), ...events]);
+import './App.css';
+
+
+const Component = () => {
+ const event = useSSE('log-entry')
+ const [events, setEvents] = useState([])
+
+ useEffect(() =>{
+ console.info(event);
+ if (event) {
+ setEvents([event, ...events]);
}
- }, [state])
-
- return events;
+ }, [event])
+ return