davidl/MoonTVPlus

Fork 0

Files

mtvpls 9bccf564ee 新增弹幕功能

2025-12-02 01:00:42 +08:00

6.7 KiB

Raw Blame History

弹幕代理转发实现总结

改进说明

已将弹幕 API 请求改为通过 LunaTV 后端代理转发，而不是前端直接 fetch。

最新更新 (2025-12-01): 弹幕配置已从环境变量迁移到管理面板的站点配置中，存储在数据库中。

架构变化

之前的架构

前端浏览器 → 直接 fetch → danmu_api (http://localhost:9321)

问题：

前端直接暴露 danmu_api 地址
可能存在 CORS 跨域问题
无法在后端做统一的缓存和控制

现在的架构

前端浏览器 → Next.js API 路由 (代理) → danmu_api (http://localhost:9321)

优点：

✅ 前端不直接暴露 danmu_api 地址
✅ 避免 CORS 跨域问题
✅ 可在后端实现缓存和请求控制
✅ 更好的安全性
✅ 统一的错误处理
✅ 配置存储在数据库中，支持在线修改

实现的 API 路由

创建了 4 个 Next.js API 路由作为代理：

/api/danmaku/search (GET)
- 搜索动漫
- 参数: keyword
- 转发到: /api/v2/search/anime
/api/danmaku/episodes (GET)
- 获取剧集列表
- 参数: animeId
- 转发到: /api/v2/bangumi/{animeId}
/api/danmaku/comment (GET)
- 获取弹幕数据
- 参数: episodeId 或 url
- 转发到: /api/v2/comment/{episodeId}?format=xml 或 /api/v2/comment?url=...&format=xml
- 特殊处理: 使用 XML 格式获取完整弹幕数据（避免 JSON 格式丢失数据），后端解析 XML 并转换为 JSON 返回给前端
/api/danmaku/match (POST)
- 自动匹配弹幕
- 参数: fileName
- 转发到: /api/v2/match

修改的文件

新增文件

src/app/api/danmaku/search/route.ts    # 搜索动漫代理
src/app/api/danmaku/episodes/route.ts  # 获取剧集代理
src/app/api/danmaku/comment/route.ts   # 获取弹幕代理
src/app/api/danmaku/match/route.ts     # 自动匹配代理

修改文件

src/lib/admin.types.ts                 # 添加弹幕配置类型
src/lib/config.ts                      # 添加弹幕配置初始化和自检
src/app/api/admin/site/route.ts        # 添加弹幕配置的保存和读取
src/app/admin/page.tsx                 # 添加弹幕配置 UI
src/lib/danmaku/api.ts                 # 改为调用本地代理 API
DANMAKU_INTEGRATION.md                 # 更新文档说明

配置方式变化

之前（环境变量）

# .env.local
DANMAKU_API_BASE=http://localhost:9321
DANMAKU_API_TOKEN=87654321

现在（管理面板配置）

弹幕配置现在存储在数据库的站点配置中，可以通过管理面板进行修改：

访问管理面板：/admin
展开"站点配置"标签
在"弹幕配置"部分配置以下项：
- 弹幕 API 地址: danmu_api 服务器地址（默认: http://localhost:9321）
- 弹幕 API Token: danmu_api 访问令牌（默认: 87654321）
点击"保存"按钮

优点：

✅ 无需重启服务器即可修改配置
✅ 配置持久化到数据库
✅ 支持在线管理
✅ 更直观的用户界面

注意：环境变量仍可用作初始配置的后备选项，但优先使用数据库中的配置。

代码示例

前端调用（修改后）

// src/lib/danmaku/api.ts

// 搜索动漫
export async function searchAnime(keyword: string) {
  const url = `/api/danmaku/search?keyword=${encodeURIComponent(keyword)}`;
  const response = await fetch(url);
  return await response.json();
}

// 获取弹幕
export async function getDanmakuById(episodeId: number) {
  const url = `/api/danmaku/comment?episodeId=${episodeId}`;
  const response = await fetch(url);
  return (await response.json()).comments;
}

后端代理（新增）

// src/app/api/danmaku/search/route.ts

export async function GET(request: NextRequest) {
  const keyword = request.nextUrl.searchParams.get('keyword');

  // 转发到 danmu_api
  const apiUrl = `${DANMAKU_API_BASE}/api/v2/search/anime?keyword=${keyword}`;
  const response = await fetch(apiUrl);
  const data = await response.json();

  return NextResponse.json(data);
}

测试验证

# 类型检查通过
pnpm typecheck
✓ 无 TypeScript 错误

# 编译通过
pnpm build
✓ 构建成功

使用说明

1. 配置弹幕服务（首次使用或更新配置）

方式一：通过管理面板配置（推荐）

启动 LunaTV 服务
访问管理面板：http://localhost:3000/admin
展开"站点配置"标签
滚动到"弹幕配置"部分
设置以下参数：
- 弹幕 API 地址: danmu_api 服务器地址（例如：http://192.168.1.100:9321）
- 弹幕 API Token: danmu_api 访问令牌（默认：87654321）
点击"保存"按钮
配置立即生效，无需重启服务器

方式二：使用环境变量（作为初始配置）

如果 danmu_api 不在默认地址，创建 .env.local：

DANMAKU_API_BASE=http://192.168.1.100:9321
DANMAKU_API_TOKEN=your_custom_token

注意：

环境变量仅在首次初始化时使用
一旦在管理面板修改配置，将使用数据库中的配置
环境变量修改需要重启服务器才能生效

2. 启动服务

# 启动 danmu_api（如果使用）
cd D:\projects\danmu_api
npm start

# 启动 LunaTV
cd D:\projects\LunaTV
pnpm dev

3. 测试弹幕功能

打开视频播放页面
点击"弹幕"选项卡
搜索并选择弹幕
弹幕自动加载到播放器

注意事项

配置管理
- 推荐：使用管理面板进行配置，无需重启服务器
- 配置存储在数据库中，持久化保存
- 环境变量可用作初始配置的后备选项
- 修改配置后立即生效
网络连接
- LunaTV 服务器必须能访问 danmu_api
- 如果在不同机器，确保网络可达
- 检查防火墙设置
调试方法
- 浏览器 Network 标签查看 /api/danmaku/* 请求
- 服务器日志查看后端转发情况
- 直接访问 danmu_api 测试：http://localhost:9321/api/v2/search/anime?keyword=测试
- 在管理面板查看和修改当前配置
数据库配置
- 配置存储在 Redis 数据库中
- 使用 NEXT_PUBLIC_STORAGE_TYPE 环境变量控制存储类型
- 如果使用 localstorage，将无法在管理面板修改配置

未来改进

添加缓存机制
- 在后端代理层添加 Redis 缓存
- 减少对 danmu_api 的请求压力
- 提升响应速度
添加请求限流
- 防止恶意频繁请求
- 保护 danmu_api 服务
添加错误重试
- 请求失败时自动重试
- 提高稳定性
添加监控和日志
- 记录所有代理请求
- 便于排查问题

完成时间: 2025-12-01 状态: ✅ 已完成并测试通过

6.7 KiB Raw Blame History Unescape Escape