Stream from Winston log file directly in React App

Question

In my Node backend, i create a winston JSON log file (more like an Array of Json objects). I have a react frontend in which I want to stream the log file content live. Is this possible without piping it through my backend?

Answer 1

Yes you can do it but that really costs Web Server performance. There is only one way to do it without piping through backend,you can do it with sending HEAD requests to web server at certain intervals.

Vanilla JavaScript Code :

var xhr = new XMLHttpRequest();
var intervalMs = 500;
var lastTime = new Date().getTime();
var intervalObj = window.setInterval(function(){
    xhr.open('HEAD', 'http://localhost:80/logfile.log');
    xhr.onreadystatechange = function() {
        if(this.readyState = this.DONE)
        {
            let lastModifiedStr = this.getResponseHeader('Last-Modified');
            var lastModifiedTimeStamp = new Date(lastModifiedStr).getTime();
            console.log("Last Modified",lastModifiedTimeStamp)
            if(lastTime < lastModifiedTimeStamp)
            {
                lastTime = lastModifiedTimeStamp;
                // Update your Redux State here and catch it with React and Update your UI
            }
        }
    };
    xhr.send()
}, intervalMs);