基于 SSE 的前端日志展示

1，SSE 的基本搭建

参考服务器往浏览器推消息（SSE）应用

2，核心代码

后台

    @GetMapping(value = "/log",produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public SseEmitter streamLog() {
        SseEmitter emitter = new SseEmitter();
        new Thread(() -> {
            try {
                String message;
                Process process = Runtime.getRuntime().exec("tail -f /Users/waynezhao/Code/Myself/codeTest/log/codeTest.log");

                BufferedReader reader = new BufferedReader(new InputStreamReader(process.getInputStream()));

                while ((message = reader.readLine()) != null){
                    emitter.send(SseEmitter.event().data(message+"<br>"));
                    // 休眠1秒钟
                    Thread.sleep(1000);
                }
            } catch (Exception e) {
                emitter.completeWithError(e);
            }
        }).start();
        return emitter;
    }

前端

<div>
    服务器返回消息:
    <div id="log-container" style="height: 650px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
        <div>
        </div>
    </div>
</div>

function (){
        const eventSource = new EventSource('http://localhost:8080/test/test/log');
        eventSource.onmessage = function (event) {
            //showMsg(event.data)
            $("#log-container div").append(event.data);
            $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());

        }
    }

3，最终效果

sse 方式日志