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