bourdon
810664eb12
- 修改记录存储格式为 [4B len][8B offset][4B CRC][16B UUID][data] - 修复 TopicProcessor 中 WaitGroup 使用错误导致 handler 不执行的问题 - 修复写入保护逻辑，避免 dirtyOffset=-1 时误判为写入中 - 添加统计信息定期持久化功能 - 改进 UTF-8 字符截断处理，防止 CJK 字符乱码 - 优化 Web UI：显示人类可读的文件大小，支持点击外部关闭弹窗 - 重构示例代码，添加 webui 和 webui_integration 示例 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
141 lines
3.2 KiB
Markdown
141 lines
3.2 KiB
Markdown
# Seqlog Web UI 示例
|
||
|
||
这个示例展示了如何使用 seqlog 的内置 Web UI 功能。
|
||
|
||
## 特性
|
||
|
||
- **零编译前端**：使用 Vue 3 和 Tailwind CSS CDN，无需前端构建步骤
|
||
- **实时日志查看**：查看多个 topic 的日志记录
|
||
- **统计信息**：实时显示每个 topic 的统计数据
|
||
- **日志查询**：支持查询最早、最新的日志记录
|
||
- **状态追踪**：显示日志的处理状态（待处理、处理中、已处理）
|
||
- **灵活集成**：可以集成到现有的 HTTP 服务器或其他框架
|
||
|
||
## 运行示例
|
||
|
||
```bash
|
||
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 服务器：
|
||
|
||
```go
|
||
import "code.tczkiot.com/seqlog"
|
||
|
||
// 创建 LogHub
|
||
hub := seqlog.NewLogHub("./logs", logger, handler)
|
||
|
||
// 启动服务
|
||
hub.Start()
|
||
|
||
// 启动 Web UI（会阻塞）
|
||
hub.ServeUI(":8080")
|
||
```
|
||
|
||
如果需要在后台运行 Web UI：
|
||
|
||
```go
|
||
go func() {
|
||
if err := hub.ServeUI(":8080"); err != nil {
|
||
logger.Error("Web UI 错误", "error", err)
|
||
}
|
||
}()
|
||
```
|
||
|
||
### 方式 2：集成到现有 HTTP 服务器
|
||
|
||
如果你已经有一个 HTTP 服务器，可以将 Web UI 集成到现有的 ServeMux：
|
||
|
||
```go
|
||
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/`）：
|
||
|
||
```go
|
||
// 创建主 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](../webui_integration/main.go)。
|
||
|
||
### 方式 4：集成到其他 Web 框架
|
||
|
||
对于 gin、echo 等框架，可以通过适配器集成：
|
||
|
||
```go
|
||
// 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")
|
||
```
|