メインコンテンツへ移動します

ファイルをアップロードする方法

ファイルはそのままで送信できます

<!doctype html>
<html lang="en">
  <body>
    <input type="file" onchange="upload(this.files)" />

    <script src="/path/to/socket.io.js"></script>
    <script>
      const socket = io();

      function upload(files) {
        socket.emit("upload", files[0], (status) => {
          console.log(status);
        });
      }
    </script>
  </body>
</html>

ファイルはサーバー側で バッファー として受信されます

import { writeFile } from "fs";

io.on("connection", (socket) => {
  socket.on("upload", (file, callback) => {
    console.log(file); // <Buffer 25 50 44 ...>

    // save the content to the disk, for example
    writeFile("/tmp/upload", file, (err) => {
      callback({ message: err ? "failure" : "success" });
    });
  });
});

追加メモ​

maxHttpBufferSize 制限​

ファイルをアップロードすると、最大許容メッセージサイズ（バイト）である maxHttpBufferSize の値に達する場合があります。この値はデフォルトで 1 MB です。

ユースケースに応じて、この値を増やすことができます

import { Server } from "socket.io";

const io = new Server({
  maxHttpBufferSize: 1e8 // 100 MB
});

参照: maxHttpBufferSize オプション

ワイヤー上​

他のバイナリ構造（ArrayBuffer、Blob）の場合と同様に、emit() メソッドの引数は、2 つの WebSocket フレームとしてワイヤーを介して送信されます。

最初はテキストフレームです。

451-["upload",{"_placeholder":true,"num":0}]
||||└─ JSON-encoded payload with placeholders for binary attachments
||||
|||└─ separator
||└─ number of binary attachments
|└─ socket.io BINARY EVENT packet type
└─ engine.io MESSAGE packet type

その後、バイナリフレーム（バイナリ構造ごとに 1 つ）になります。

<0x25 0x50 0x44 ...>

ユースケースによっては、カスタムパーサー を使用してこの動作を変更できます。