为后续实现自定义订阅下载前置功能。使用 Next.js 对接 qBittorrent web api。实现 torrent 列表的呈现。
开发
主要使用 @ctrl/qbittorrent 这个依赖对接 qBittorrent 服务。由 Next.js 与 antd 实现 UI 的呈现。
基本用法很简单
import { QBittorrent } from '@ctrl/qbittorrent';
const client = new QBittorrent({
baseUrl: 'http://localhost:8080/',
username: 'admin',
password: 'adminadmin',
});
async function main() {
const res = await qbittorrent.getAllData();
console.log(res);
}
开发时，将 username 与 password 通过环境变量读取。本地开发使用 .env.local 控制。生产环境通过 explorer.docker-compose.yml 进行控制。
qBittorrent UI 呈现
封装一个 q-bittorrent-client.ts 方法。
import { QBittorrent } from '@ctrl/qbittorrent'
export const client = new QBittorrent({
baseUrl: 'http://192.168.31.17:8080/',
username: process.env.Q_BITTORRENT_USERNAME,
password: process.env.Q_BITTORRENT_PASSWORD,
})
通过环境变量的 Q_BITTORRENT_USERNAME 与 Q_BITTORRENT_PASSWORD 获取到对应的 username 与 password。
创建一个 .env.local 文件并输入下面的内容。
explorer/.env.local
Q_BITTORRENT_USERNAME=admin
Q_BITTORRENT_PASSWORD=adminadmin
有些 qBittorrent 默认的用户名与密码为 admin adminadmin
创建顶部 layout 组件。实现 Card 组件内部滚动。
explorer/src/app/q-bittorrent/layout.tsx
import React from 'react'
import { Card, Space } from 'antd'
import ChangeThemeDropdown from '@/components/change-theme/change-theme-dropdown'
import type { Metadata } from 'next'
import LayoutFooter from '@/app/q-bittorrent/layout-footer'
export const metadata: Metadata = {
title: '从零开始-文件资源管理器-qBittorrent',
description: '从零开始-文件资源管理器-qBittorrent',
}
const layout: React.FC<React.PropsWithChildren> = ({ children }) => {
return (
<>
<Card
title={<>qBittorrent</>}
style={{ height: 'calc(100vh - 40px)', display: 'flex', flexDirection: 'column' }}
bodyStyle={{
flex: 1,
overflow: 'scroll',
overscrollBehavior: 'contain',
}}
extra={
<Space>
<ChangeThemeDropdown />
</Space>
}
>
{children}
</Card>
<LayoutFooter />
</>
)
}
export default layout
使用 listTorrents 方法获取 qBittorrent 内的 torrent 列表。并将内容插入 QBittorrentContext 上下文内。
explorer/src/app/q-bittorrent/page.tsx
import React from 'react'
import { client } from '@/app/q-bittorrent/q-bittorrent-client'
import { QBittorrentProvider } from '@/app/q-bittorrent/q-bittorrent-context'
import TorrentTable from '@/app/q-bittorrent/torrent-table'
const Page: React.FC = async () => {
const data = await client.listTorrents()
return (
<QBittorrentProvider value={data}>
<TorrentTable />
</QBittorrentProvider>
)
}
export default Page
上下文文件
explorer/src/app/q-bittorrent/q-bittorrent-context.tsx
'use client'
import createCtx from '@/lib/create-ctx'
import React from 'react'
import type { Torrent } from '@ctrl/qbittorrent/dist/src/types'
export const QBittorrentContext = createCtx<Torrent[]>()
export const QBittorrentProvider: React.FC<React.ProviderProps<Torrent[]>> = ({ children, value }) => {
return <QBittorrentContext.ContextProvider value={value}>{children}</QBittorrentContext.ContextProvider>
}
使用 antd Table 组件简单处理下 torrent 列表。并关闭 Table 组件的分页配置。
explorer/src/app/q-bittorrent/torrent-table.tsx
'use client'
import React from 'react'
import { Table } from 'antd'
import { QBittorrentContext } from '@/app/q-bittorrent/q-bittorrent-context'
import DateFormat from '@/components/date-format'
import Bit from '@/components/bit'
const TorrentTable: React.FC = () => {
const data = QBittorrentContext.useStore()
return (
<Table
rowKey="hash"
pagination={false}
dataSource={data}
columns={[
{ key: 'name', title: 'name', dataIndex: 'name', width: '30%' },
{ key: 'save_path', title: '保存路径', dataIndex: 'save_path', width: '20%' },
{ key: 'progress', title: '进度', dataIndex: 'progress' },
{ key: 'size', title: '大小', dataIndex: 'size', render: (size) => <Bit>{size}</Bit> },
{ key: 'completed', title: '完成大小', dataIndex: 'completed', render: (size) => <Bit>{size}</Bit> },
{
key: 'added_on',
title: '添加时间',
dataIndex: 'added_on',
sorter: (a, b) => a.added_on - b.added_on,
render: (time) => <DateFormat>{time * 1000}</DateFormat>,
},
{
key: 'completion_on',
title: '完成时间',
dataIndex: 'completion_on',
sorter: (a, b) => a.completion_on - b.completion_on,
render: (time) => <DateFormat>{time * 1000}</DateFormat>,
},
]}
/>
)
}
export default TorrentTable
创建一个 actions 文件。用于存放 server action。
explorer/src/app/q-bittorrent/actions.tsx
添加一个 getTransferInfo 方法，用于获取当前下载速度与上传速度信息。依赖组件没有提供对应方法，需要自行调用接口获取。参考接口文档。
使用依赖提供的 request 方法，加上对应的 path 即可获取到对应的接口信息。
'use server'
import { client } from '@/app/q-bittorrent/q-bittorrent-client'
/**
* https://github.com/qbittorrent/qBittorrent/wiki/WebUI-API-(qBittorrent-4.1)#get-global-transfer-info
*/
type Info = {
connection_status: 'connected' | 'firewalled' | 'disconnected'
dht_nodes: number
dl_info_data: number
dl_info_speed: number
dl_rate_limit: number
up_info_data: number
up_info_speed: number
up_rate_limit: number
}
export const getTransferInfo = () => client.request<Info>('/transfer/info', 'GET')
通过上面的方法即可获取到“当前下载速度与上传速度信息”。
创建一个 use-transfer-info hooks 文件。用于轮询获取当前下载速度与上传速度。
explorer/src/app/q-bittorrent/use-transfer-info.tsx
'use client'
import { useRequest } from 'ahooks'
import { getTransferInfo } from '@/app/q-bittorrent/actions'
export const useGetTransferInfo = () => {
const { data } = useRequest(() => getTransferInfo(), {
pollingInterval: 1000,
})
return { data }
}
这里使用了 useRequest 提供的轮询参数。每秒轮询获取接口信息。
创建一个呈现上传于下载信息的组件
explorer/src/app/q-bittorrent/global-torrent-speed.tsx
'use client'
import React from 'react'
import { Space } from 'antd'
import { useGetTransferInfo } from '@/app/q-bittorrent/use-transfer-info'
import Bit from '@/components/bit'
const GlobalTorrentSpeed: React.FC = () => {
const { data } = useGetTransferInfo()
return (
<Space split=" | ">
<Space>
<span>DHT</span>
<span>{data?.dht_nodes}</span>
</Space>
<Space>
<span>下载</span>
<Bit
after={
<>
/s（<Bit>{data?.dl_info_data}</Bit>）
</>
}
>
{data?.dl_info_speed}
</Bit>
</Space>
<Space>
<span>上传</span>
<Bit
after={
<>
/s（<Bit>{data?.up_info_data}</Bit>）
</>
}
>
{data?.up_info_speed}
</Bit>
</Space>
</Space>
)
}
export default GlobalTorrentSpeed
配置好 layout-footer 组件
explorer/src/app/q-bittorrent/layout-footer
'use client'
import React from 'react'
import { Flex } from 'antd'
import GlobalTorrentSpeed from '@/app/q-bittorrent/global-torrent-speed'
const LayoutFooter: React.FC = () => {
return (
<Flex style={{ height: 40, padding: '0 20px' }} justify="flex-end" align="center">
<GlobalTorrentSpeed />
</Flex>
)
}
export default LayoutFooter
到此，简单完成了 Next.js 对接 qBittorrent。并简单将 qBittorrent 的 torrent 列表渲染出来，间隔 1 秒轮询获取当前下载速度、上传信息。
这里只是简单的列出 torrent 列表等信息，并不是当做一个可操作 qBittorrent 的 web ui。更多的功能还是在 qBittorrent 主界面进行操作与配置。
如有需要，后续还会在这个界面的基础上面添加一些简单的“增删改查”功能。
效果
