seqlog/example/webui/README.md

Seqlog Web UI 示例

这个示例展示了如何使用 seqlog 的内置 Web UI 功能。

特性

• 零编译前端：使用 Vue 3 和 Tailwind CSS CDN，无需前端构建步骤
• 实时日志查看：查看多个 topic 的日志记录
• 统计信息：实时显示每个 topic 的统计数据
• 日志查询：支持查询最早、最新的日志记录
• 状态追踪：显示日志的处理状态（待处理、处理中、已处理）
• 灵活集成：可以集成到现有的 HTTP 服务器或其他框架

运行示例

cd example/webui
go run main.go

然后在浏览器中访问 http://localhost:8080

API 端点

Web UI 提供以下 API 端点：

• GET /api/topics - 获取所有 topic 列表
• GET /api/logs?topic=xxx&count=N - 查询最新的 N 条日志（从最后一条向前查询）
• GET /api/logs/first?topic=xxx&count=N - 查询从第一条开始的 N 条日志（从索引 0 向后查询）
• GET /api/logs/last?topic=xxx&count=N - 查询最后的 N 条日志（从最后一条向前查询）
• GET /api/stats?topic=xxx - 获取指定 topic 的统计信息

使用方式

方式 1：独立 Web UI 服务器

最简单的方式，直接启动一个独立的 Web UI 服务器：

import "code.tczkiot.com/seqlog"

// 创建 LogHub
hub := seqlog.NewLogHub("./logs", logger, handler)

// 启动服务
hub.Start()

// 启动 Web UI（会阻塞）
hub.ServeUI(":8080")

如果需要在后台运行 Web UI：

go func() {
    if err := hub.ServeUI(":8080"); err != nil {
        logger.Error("Web UI 错误", "error", err)
    }
}()

方式 2：集成到现有 HTTP 服务器

如果你已经有一个 HTTP 服务器，可以将 Web UI 集成到现有的 ServeMux：

import (
    "net/http"
    "code.tczkiot.com/seqlog"
)

// 创建 LogHub
hub := seqlog.NewLogHub("./logs", logger, handler)
hub.Start()

// 创建自己的 ServeMux
mux := http.NewServeMux()

// 注册业务端点
mux.HandleFunc("/api/users", handleUsers)
mux.HandleFunc("/health", handleHealth)

// 注册 seqlog Web UI 到根路径
hub.RegisterWebUIRoutes(mux)

// 启动服务器
http.ListenAndServe(":8080", mux)

方式 3：集成到子路径

如果你想将 Web UI 放在子路径下（比如 /logs/）：

// 创建主 ServeMux
mux := http.NewServeMux()

// 注册业务端点
mux.HandleFunc("/health", handleHealth)

// 创建 Web UI 的 ServeMux
logsMux := http.NewServeMux()
hub.RegisterWebUIRoutes(logsMux)

// 挂载到 /logs/ 路径
mux.Handle("/logs/", http.StripPrefix("/logs", logsMux))

// 启动服务器
http.ListenAndServe(":8080", mux)

访问 http://localhost:8080/logs/ 查看 Web UI。

完整的集成示例请参考 example/webui_integration。

方式 4：集成到其他 Web 框架

对于 gin、echo 等框架，可以通过适配器集成：

// Gin 框架示例
import (
    "github.com/gin-gonic/gin"
    "net/http"
)

r := gin.Default()

// 业务路由
r.GET("/api/users", handleUsers)

// 创建 seqlog Web UI 的 ServeMux
logsMux := http.NewServeMux()
hub.RegisterWebUIRoutes(logsMux)

// 使用 gin.WrapH 包装 http.Handler
r.Any("/logs/*path", gin.WrapH(http.StripPrefix("/logs", logsMux)))

r.Run(":8080")