从Winston日志文件直接在React App中流式传输

Question

在我的Node后端中，我创建了一个Winston JSON日志文件（更像是Json对象的数组）。 我有一个React前端，我想在其中实时流式传输日志文件内容。 在不通过后端管道传输的情况下可以做到吗？

Answer 1

是的，您可以执行此操作，但这确实会降低Web服务器的性能。 只有一种方法可以不通过后端进行管道传输，您可以通过按一定间隔将HEAD请求发送到Web服务器来完成。

香草JavaScript代码：

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