Update connected clients when the data changes

[jimcantor]

Server-Sent Events (SSE)

Concept:

Server-Sent Events (SSE) allow a server to push data to the client. It's a one-way communication from server to client, suitable for scenarios where the client doesn't need to send data back to the server in real-time.

Backend Implementation:

Use Express to send updates via SSE.

Clients listen for these events and update their UI accordingly.

Example:

Backend

app.get('/events', (req, res) => {
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive',
    });

    setInterval(() => {
        res.write(`data: ${JSON.stringify({ message: 'New update' })}\n\n`);
    }, 3000);
});

Frontend Implementation: Create an EventSource to listen for updates from the server. Example:

const evtSource = new EventSource('/events');

evtSource.onmessage = (event) => {
    const data = JSON.parse(event.data);
    // Update the UI with the new data
};

[jimcantor]

Polling

Concept: Polling is a simpler approach where the client regularly requests data from the server at specified intervals.

Implementation:

The client uses setInterval to periodically make AJAX calls to the server. The server responds with the latest data. Example:

setInterval(() => {
    fetch('/latestProjectData')
        .then(response => response.json())
        .then(data => {
            // Update the UI with the new data
        });
}, 5000); // Poll every 5 seconds