从零开始-文件资源管理器-19-async 同步目录

使用 async 命令同步文件。实现备份或移动文件。

开发

dockerfile

安装 async 命令

FROM node:20.9.0-alpine AS base

# 添加源
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories

...
RUN apk add --no-cache rsync

explorer-manage

使用 node 的 spawn 模块执行 rsync 命令。

import { spawn } from 'child_process'
import { formatPath } from '../format-path.mjs'

/**
 *
 * @param {string} source
 * @param {string} destination
 * @param {string[]} opt
 * @param {boolean} test
 * @returns {ChildProcessWithoutNullStreams}
 */
export const rsync = (source, destination, opt = [], test = false) => {
  if (test) {
    opt.push('-n')
  }

  console.log('rsync', [...opt, source, destination].join(' '))

  return spawn('rsync', [...opt, source, destination])
}

/**
 *
 * @param {string} source
 * @param {string} destination
 * @param {boolean} has_delete_source
 * @param {boolean} test
 * @returns {ChildProcessWithoutNullStreams}
 */
export const rsyncMovePath = (source, destination, has_delete_source = false, test = false) => {
  const opt = ['-a', '--progress']

  has_delete_source && opt.push('--remove-source-files')

  return rsync(formatPath(source), formatPath(destination), opt, test)
}

新增两个方法，rsync 与 rsyncMovePath 方法

• rsync：为简单的命令行封装
• rsyncMovePath：添加一个当同步完成后，删除原目录的参数 --remove-source-files。

explorer

创建一个流式数据 route api 接口

import { NextRequest, NextResponse } from 'next/server'
import { rsyncMovePath } from '@/explorer-manager/src/rsync/index.mjs'

export const POST = async (req: NextRequest) => {
  const { path, out_path, rsync_delete_source } = await req.json()

  try {
    const stream = rsyncMovePath(path, out_path, rsync_delete_source)

    return new NextResponse(stream.stdout, {
      headers: {
        'Content-Type': 'application/octet-stream',
      },
    })
  } catch (e: any) {
    return NextResponse.json({ err_msg: e.message }, { status: 500 })
  }
}

客户端部分在原”移动“的弹窗上新增一个移动方式的 Select 菜单。提供两个选项

• 移动
• rsync 同步。当选择 rsync 同步时，出现一个”删除源文件“的开关

      <Form.Item<FieldType> label="移动方式" name="move_type" rules={[{ required: true, message: '请选择移动方式' }]}>
        <Select
          options={[
            { label: '移动', value: 'move' },
            { label: 'rsync 同步', value: 'rsync' },
          ]}
        />
      </Form.Item>

提交表单时，判断移动方式类型，选择不同的两种移动方式。

有时候目录文件比较大，rsync 同步使用流式回传当前同步状态信息。

...
import { moveAction } from '@/components/move-modal/action'

const MoveModal: React.FC = () => {
  const move_path = useMovePathStore()
  const changeMovePath = useMovePathDispatch()
  const [chunk, changeChunk] = useState<string[]>([])
  const { update } = useUpdateReaddirList()
  const { message } = App.useApp()

  const rsyncMove = useRequest(
    async (values: FieldType) => {
      const { path, new_path, last, rsync_delete_source } = values

      const res = await fetch('/path/api/rsync-move', {
        method: 'post',
        body: JSON.stringify({
          path: path,
          out_path: [new_path, last].join('/'),
          rsync_delete_source: rsync_delete_source,
        }),
      })

      if (res.body) {
        const reader = res.body.getReader()
        const decode = new TextDecoder()

        while (1) {
          const { done, value } = await reader.read()

          const decode_value = decode.decode(value)

          !isEmpty(decode_value) && changeChunk((chunk) => chunk.concat(decode_value).reverse())

          if (done) {
            break
          }
        }
      }

      return Promise.resolve().then(update)
    },
    {
      manual: true,
    },
  )

  return (
    <Modal
      title="移动"
      open={!isEmpty(move_path)}
      width={1000}
      onCancel={() => changeMovePath('')}
      footer={false}
      destroyOnClose={true}
    >
      <MoveForm
        onFinish={(values) => {
          const { move_type, path, new_path, last } = values

          const thenAction = () => {
            changeMovePath('')
            update()
            message.success('移动成功').then()
          }

          if (move_type === 'move') {
            return moveAction(path, [new_path, last].join('/')).then(thenAction)
          } else if (move_type === 'rsync') {
            rsyncMove.run(values)
          }
        }}
      />

      {!isEmpty(chunk) && (
        <Card>
          <pre>{chunk.join('')}</pre>
        </Card>
      )}
    </Modal>
  )
}

export default MoveModal

效果

git-repo

yangWs29/share-explorer