node.jsサーバ上の静的ファイルを、fsのストリームを使用してクライアントに返却したら、ダウンロードの進捗（プログレスバー）が表示されなかったので対処した話

nodeサーバに置かれた大きめのファイル（max 1GB）を、fsのストリームを使って以下のように返却したところ、プログレスバーが表示されなくて、いつダウンロードが終わるのか分からない状態になった。

const fs = require('fs')

// express のミドルウエア
const download = (req, res, next) => {
  // ファイルのパスを取得する
  const filePath = req.asset.filePath
  // ファイル情報を取得する
  fs.stat(filePath, (err, stat) => {
    if (err) {
      next(err)
    }
    // ファイル名をエンコードする
    const filename = encodeURIComponent(req.asset.title)
    // ヘッダーセットする
    res.set({
      'Content-Type': req.asset.mime,
      'Content-disposition': `inline; filename*=utf-8''${filename}`,
      'Content-Length': stat.size
    })
    filestream = fs.createReadStream(filePath)
    filestream.pipe(res)
  })
})

むむむ、ファイルサイズをヘッダに入れるだけではダメなのか…。

いろいろ調べたところ、どうもkeep aliveが怪しい感じなので、ヘッダに { Connectin: ‘close’ } を追加してみた。

res.set({
  'Content-Type': req.asset.mime,
  'Content-disposition': `inline; filename*=utf-8''${filename}`,
  'Content-Length': stat.size,
   Connection: 'close'   // <== これを追加
})

テストしてみたところ、無事にプログレスバーが表示された。

橋本たかし

ホームページの制作（デザイン・コーディング・プログラミング）に加え、ネットショップの販売促進に関するアドバイスも致します。 20年以上に渡って実際にネットショップを運営した経験を生かし、聞きかじりではない実績を伴ったノウハウを、自分の言葉でお伝えいたします。プログラミングの経験は30年以上。HTML、CSS、JavaScript、TypeScript、Vue、NuxtJS、Node.js、MySQL、MongoDB、Elasticsearch、WordPress、PHP、Docker、Electronなど、幅広く対応します。

bagooon.com