leebigshan/bt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 浏览器端 P2P 取清单/预览增加进度与超时提示

Browse Source
This commit is contained in:
ice-a
2026-10-16 19:43:38 +08:00
parent cc6cb76d67
commit 7e65ae975f
4 changed files with 89 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/css/main.css
+3
View File
@@ -365,6 +365,9 @@ h3 { font-family: var(--display); font-size: 15px; margin: 0; font-weight: 600;
.spin { display: inline-block; width: 11px; height: 11px; border: 1.5px solid var(--line-2); border-top-color: var(--acc); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.bar { width: min(360px, 80%); height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--acc); transition: width 0.25s ease; }
.footer { border-top: 1px solid var(--line); padding: 16px 0 26px; color: var(--fg-mute); font-family: var(--mono); font-size: 11px; }
/* 图片预览弹层 */
app/components/ImagePreview.vue
+16 -4
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import type { TorrentFileEntry } from '~/types/api'
import { readFileBytesClient } from '~/utils/clientTorrent'
import { formatBytes } from '~/utils/format'
import { readFileBytesClient, type FileProgress } from '~/utils/clientTorrent'
const props = defineProps<{
infoHash: string
@@ -15,6 +16,8 @@ const emit = defineEmits<{ close: []; 'update:index': [value: number] }>()
const status = ref<'loading' | 'ok' | 'err'>('loading')
const errorText = ref('')
const src = ref('')
const progress = ref(0)
const progressText = ref('')
let objectUrl = ''
const MIME: Record<string, string> = {
@@ -50,10 +53,18 @@ async function load() {
revoke()
src.value = ''
errorText.value = ''
progress.value = 0
progressText.value = ''
status.value = 'loading'
try {
// 优先在用户浏览器里用 WebRTC 从 P2P 网络直接拉取图片字节（不经过 Vercel/Serverless）
const bytes = await readFileBytesClient(props.magnet, current.value?.path || '', 25000)
const bytes = await readFileBytesClient(props.magnet, current.value?.path || '', {
timeoutMs: 25000,
onProgress: (p: FileProgress) => {
progress.value = p.progress
progressText.value = p.message
}
})
const mime = MIME[extOf(current.value?.path || '')] || 'application/octet-stream'
objectUrl = URL.createObjectURL(new Blob([bytes], { type: mime }))
src.value = objectUrl
@@ -119,8 +130,9 @@ onBeforeUnmount(() => {
</div>
<div class="lightbox-bd">
<div v-if="status === 'loading'" class="empty">
<span class="spin" /> 正在从做种节点拉取这张图片，取决于对方的上传速度…
<div v-if="status === 'loading'" class="empty stack sm">
<span class="spin" /> {{ progressText || '正在通过 WebRTC 从做种节点拉取图片…' }}
<div v-if="progress > 0" class="bar"><i :style="{ width: (progress * 100).toFixed(0) + '%' }" /></div>
</div>
<div v-else-if="status === 'err'" class="stack sm" style="padding: 22px">
<div class="note err">{{ errorText }}</div>
app/components/TorrentDetail.vue
+11 -2
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import type { TorrentFileEntry, TorrentView } from '~/types/api'
import { resolveMetadataClient } from '~/utils/clientTorrent'
import { resolveMetadataClient, type ResolveProgress } from '~/utils/clientTorrent'
const props = defineProps<{
torrent: TorrentView
@@ -12,6 +12,7 @@ const emit = defineEmits<{ resolved: [payload: { files: TorrentFileEntry[]; size
const local = ref<TorrentView>({ ...props.torrent })
const resolving = ref(false)
const resolveStatus = ref('')
const showTrackers = ref(false)
watch(
@@ -61,6 +62,7 @@ function applyResolved(res: { files: TorrentFileEntry[]; size: number; name: str
async function doResolve() {
resolving.value = true
resolveStatus.value = ''
try {
// 服务端先尝试（缓存服务取清单，自托管还会走 P2P），成功即返回并落库
const res = await $fetch<{ files: TorrentFileEntry[]; size: number; name: string }>(
@@ -72,7 +74,12 @@ async function doResolve() {
} catch {
// 服务端无法走 P2P（如 Vercel/Serverless）→ 回退到浏览器端 WebRTC 直接解析
try {
const meta = await resolveMetadataClient(local.value.magnet, 30000)
const meta = await resolveMetadataClient(local.value.magnet, {
timeoutMs: 30000,
onProgress: (p: ResolveProgress) => {
resolveStatus.value = p.message
}
})
applyResolved(meta)
pushToast('ok', '通过浏览器 P2P 解析文件清单', `共 ${meta.files.length} 个文件 / ${formatBytes(meta.size)}`)
} catch (err2) {
@@ -165,6 +172,8 @@ onMounted(() => {
文件清单里有 {{ previewImages.length }} 张图片可以点「预览」直接看：只会按需拉取这几张图所在的分片，不会下载整个种子。
</div>
<div v-if="resolving && resolveStatus" class="note warn">{{ resolveStatus }}</div>
<div class="panel">
<div class="panel-bd tight">
<FileTable
app/utils/clientTorrent.ts
+59 -3
View File
@@ -57,20 +57,50 @@ function waitForMetadata(torrent: any, timeoutMs: number): Promise<void> {
})
}
export interface ResolveProgress {
phase: 'connecting' | 'metadata' | 'done'
peers: number
message: string
}
export interface FileProgress {
progress: number
peers: number
downloaded: number
length: number
message: string
}
export async function resolveMetadataClient(
magnet: string,
timeoutMs = 30000
opts: { timeoutMs?: number; onProgress?: (p: ResolveProgress) => void } = {}
): Promise<{ name: string; files: { path: string; length: number }[]; size: number }> {
const onProgress = opts.onProgress
const timeoutMs = opts.timeoutMs ?? 30000
const WebTorrent = await loadWebTorrent()
const client = new WebTorrent()
try {
const torrent = client.add(withWsTrackers(magnet))
const report = (phase: ResolveProgress['phase'], message?: string) => {
const peers = torrent.numPeers ?? 0
onProgress?.({
phase,
peers,
message:
message ??
(peers > 0 ? `已连接 ${peers} 个节点，正在获取元数据…` : '正在通过 WebRTC 寻找 P2P 节点…')
})
}
torrent.on('wire', () => report('connecting'))
torrent.on('metadata', () => report('metadata', '已拿到元数据，正在整理文件清单…'))
await waitForMetadata(torrent, timeoutMs)
report('metadata', '已拿到元数据，正在整理文件清单…')
const files = (torrent.files || []).map((f: any) => ({
path: normPath(String(f.path || f.name || '')),
length: Number(f.length) || 0
}))
if (!files.length) throw new Error('已连上节点，但对方没有返回任何文件信息')
onProgress?.({ phase: 'done', peers: torrent.numPeers ?? 0, message: `共 ${files.length} 个文件` })
return { name: String(torrent.name || ''), files, size: files.reduce((s, f) => s + f.length, 0) }
} finally {
try {
@@ -84,8 +114,10 @@ export async function resolveMetadataClient(
export async function readFileBytesClient(
magnet: string,
filePath: string,
timeoutMs = 25000
opts: { timeoutMs?: number; onProgress?: (p: FileProgress) => void } = {}
): Promise<ArrayBuffer> {
const onProgress = opts.onProgress
const timeoutMs = opts.timeoutMs ?? 25000
const WebTorrent = await loadWebTorrent()
const client = new WebTorrent()
try {
@@ -95,7 +127,31 @@ export async function readFileBytesClient(
(f: any) => normPath(String(f.path || f.name || '')) === normPath(filePath)
)
if (!target) throw new Error('这个种子里没有该文件，文件清单可能已过期')
return await target.arrayBuffer()
const report = () => {
const peers = torrent.numPeers ?? 0
const progress = Number(target.progress) || 0
onProgress?.({
progress,
peers,
downloaded: Number(target.downloaded) || 0,
length: Number(target.length) || 0,
message:
peers > 0 ? `下载中 ${Math.round(progress * 100)}% · ${peers} 个节点` : '正在连接 P2P 节点…'
})
}
torrent.on('wire', report)
if (typeof target.on === 'function') target.on('download', report)
report()
const ab = await target.arrayBuffer()
onProgress?.({
progress: 1,
peers: torrent.numPeers ?? 0,
downloaded: Number(target.length) || 0,
length: Number(target.length) || 0,
message: '完成'
})
return ab
} finally {
try {
client.destroy()