How to view data (.log) in real time on an HTML page?

Question

So I’m trying to make a logger that can be viewed on an HTML page in real time. The page loads all the files. log’s (from: /clearing-dit/logs/) and allows clicking on each one to show its contents.

<button type="submit" class="list-group-item link">
   <i class="fa fa-fw fa-history"></i> [[${l.filename}]]
   <span class="badge" th:text="${#dates.format(l.lastModified,'dd/MM/YYYY HH:mm:ss')}">10/09/1992 23:55:23</span>
   <span class="badge" th:text="${#numbers.formatDecimal(l.size, 1, 3)}+MB">10MB</span>
 </button>

Once the file is selected, you get the last 50 lines of the . log ( which is like a . txt)

 public void fileNumberLines(Log log) throws IOException {

 InputStream inputStream = new BufferedInputStream(new FileInputStream(logsDir + "/" + log.getFilename()));
    try {
        byte[] byteArray = new byte[1024];
        int count = 0;
        int readChar = 0;
        while ((readChar = inputStream.read(byteArray)) != -1) {
            for (int i = 0; i < readChar; ++i) {
                if (byteArray[i] == '\n') {
                    ++count;
                }
            }
        }
        log.setFinalLine(count);
        log.setInitLine(count - 50 > 0 ? count - 50 : 0);
    } finally {
        inputStream.close();
    }
}

And returned the contents of these 50:

    private String getLogContentByRange(int lineOccurrence, int firstLine, int lastLine, String logPath) {
        BufferedReader buffRead;
        int lineNumber = 1;
        String content = "";
        File file = new File(logPath);

        try {
            buffRead = new BufferedReader(new FileReader(file));
            String line = null;
            do {
                line = "";
                line = buffRead.readLine();
                if (lineNumber <= lastLine && lineNumber >= firstLine) {
                    if (lineNumber == lineOccurrence) {
                        content += "<mark style='background-color: red; color: white;'>" + lineNumber + ". " + line + "</mark>\n";
                    } else {
                        content += lineNumber + ". " + line + "\n";
                    }
                }
                lineNumber++;
            } while (line != null);
        } catch (IOException e) {
            logger.error(e.getMessage());
        }
        return content;
    }
}

This log is returned and accessed in HTML:

                <div class="panel-body">

                    <pre>
                        <p th:utext="${log.content}">Log content</p>
                    </pre>
                </div>  

My problem is: How do I continue to "print" the information of a file, as it is being incremented/edited? Is there any way to leave the check "idle", waiting for new updates? I wanted to make it as if the data were being viewed on a console, where it is possible to give the command grep and derivatives.

Answer 1

Speak David! You can make a javascript call that "will be" x in x seconds! The problem is that the latency to open a txt file, go through the lines and close that file and finally render the content on the screen is quite high! So it would be nice to put a process in ajax to call a method in the control layer (JSF, Struts or Spring MVC) every 10 seconds.

See this example in Primefaces: https://www.primefaces.org/showcase/ui/ajax/poll.xhtml