Fix SSE handling
continuous-integration/drone Build is passing Details

This commit is contained in:
Lauri Võsandi 2022-02-15 21:34:59 +02:00 committed by Lauri Võsandi
parent 6b977a09b4
commit 05911bbc80
4 changed files with 45 additions and 50 deletions

View File

@ -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));
});
});

View File

@ -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 <EventList data={events} />
}
function App() {
return (
<SSEProvider endpoint="/events">
<SSE/>
</SSEProvider>
)
<SSEProvider endpoint="/events" >
<Component />
</SSEProvider>
)
}
export default App;

View File

@ -5,7 +5,7 @@ function Event(props) {
return (
<div className="eventDiv">
{props.data.picUrl? <img className="eventPic" src={props.data.picUrl}></img> : JSON.stringify(props.data)}
{props.screenshots ? <img className="eventPic" src={props.screenshots[0].url}></img> : JSON.stringify(props)}
</div>
);
}

View File

@ -3,14 +3,13 @@ import Event from '../event/Event.js';
import './EventList.css';
function EventList(props) {
return ;
// <ul className="eventListUl">
// {props.data.map((event) => {
// return <li className="eventListLi"><Event data={event} /></li>
// })}
// </ul>
return (
<ul className="eventListUl">
{props.data.map((event) => {
return <li className="eventListLi"><Event data={event} /></li>
})}
</ul>
)
}
export default EventList;