从零开始-文件资源管理器-26-Next.js 对接 QBittorrent web api

为后续实现自定义订阅下载前置功能。使用 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 方法，用于获取当前下载速度与上传速度信息。依赖组件没有提供对应方法，需要自行调用接口获取。参考接口文档#get-global-transfer-info)。

使用依赖提供的 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 主界面进行操作与配置。

如有需要，后续还会在这个界面的基础上面添加一些简单的“增删改查”功能。

效果

git-repo

yangWs29/share-explorer