springboot + WebSocket + tail 输出 Linux 上日志到浏览器，实时输出

JDK 1.8
websocket
thymeleaf
web
1.修改 yml 中端口
2.修改 index.html 中请求路径
3.修改 WebSocketController.java 中 33 行，日志路径
4.打包部署，即可访问

---

目录结构

1.pom.xml 引入

引入 web, thymeleaf, websocket

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.0</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.ilyuc</groupId>
    <artifactId>logtobrowser</artifactId>
    <packaging>jar</packaging>
    <version>0.0.1-SNAPSHOT</version>
    <name>logtobrowser</name>
    <description>Linux server log send to browser project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

2.application.yml

只有一个重要参数，端口

# Tomcat
server:
  port: 9090

spring:
  output:
    ansi:
      enabled: detect
  thymeleaf:
    cache: false
    freemarker:
      cache: false    #页面不加载缓存，修改即时生效

3.WebSocket配置类

package com.ilyuc.logtobrowser.config;

import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @author ilyuc
 * @version v 1.0.0
 * @Description
 * @date 2021/8/2 15:49
 */
@Component
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

4.controller

里面有严 tail 的路径

package com.ilyuc.logtobrowser.controller;

import com.ilyuc.logtobrowser.util.TailfLogThread;
import org.springframework.web.bind.annotation.RestController;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.io.InputStream;

/**
 * @author ilyuc
 * @version v 1.0.0
 * @Description
 * @date 2021/8/2 15:51
 */
@ServerEndpoint("/log")
@RestController
public class WebSocketController {

    private Process process;
    private InputStream inputStream;

    /**
     * 新的WebSocket请求开启
     */
    @OnOpen
    public void onOpen(Session session) throws Exception{
        try {
            process = Runtime.getRuntime().exec("tail -f /home/ilyuc/dp.log");
            inputStream = process.getInputStream();
            TailfLogThread thread = new TailfLogThread(inputStream, session);
            thread.start();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * WebSocket请求关闭
     */
    @OnClose
    public void onClose() {
        try {
            if(inputStream != null){
                inputStream.close();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        if(process != null){
            process.destroy();
        }
    }

    @OnError
    public void onError(Throwable thr) {
        thr.printStackTrace();
    }
}

5.打印日志的线程类

单独写一个线程，以免阻塞

package com.ilyuc.logtobrowser.util;

import javax.websocket.Session;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;

/**
 * @author ilyuc
 * @version v 1.0.0
 * @Description
 * @date 2021/8/2 15:53
 */
public class TailfLogThread extends Thread{

    private BufferedReader reader;
    private Session session;

    public TailfLogThread(InputStream in, Session session) {
        this.reader = new BufferedReader(new InputStreamReader(in));
        this.session = session;
    }

    @Override
    public void run() {
        String line;
        try {
            while((line = reader.readLine()) != null) {
                // 将实时日志通过WebSocket发送给客户端，给每一行添加一个HTML换行
                session.getBasicRemote().sendText(line + "<br>");
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

6.主页面 index.html

ws 对应 ip 需与当前应用的启动位置一致
比如本地启动，就用 localhost ，部署到服务上就用服务上的 ip

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>log-page</title>
</head>
<body>
<div id="log-container" style="height: 680px; overflow-y: scroll; background: #333; color: #aaa; padding: 1px;">
    <div>
    </div>
</div>
</body>
<script th:src="@{/jquery/jquery.js}" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        //ws 对应 ip 需与当前应用的启动位置一致
        //比如本地启动，就用 localhost ，部署到服务上就用服务上的 ip
        var websocket = new WebSocket('ws://10.222.111.996:9090/log');
        websocket.onmessage = function(event) {
            $("#log-container div").append(event.data);
            //滚动条到最后一行
            // $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
        }
    })
</script>
</body>
</html>

7.demo地址

链接: https://gitee.com/ilyuc/logtobrowser/
（完）