如何使用 WebSockets 将多个文件发送到服务器？

Question

I'm trying to send multiple files from the client to the NodeJS server using WebSockets.

To send one file, I currently do the following:

// Client

let upload = document.getElementById('upload')

button.onclick = async function() {
    let file = upload.files[0];
    let byteFile = await getAsByteArray(file);
    socket.send(byteFile);
}

async function getAsByteArray(file) {
  return new Uint8Array(await readFile(file))
}

function readFile(file) {
    return new Promise((resolve, reject) => {
        let reader = new FileReader()

        reader.addEventListener("loadend", e => resolve(e.target.result))
        reader.addEventListener("error", reject)

        reader.readAsArrayBuffer(file)
    });
}

// Server

ws.on('message', function incoming(message) {

    // This returns a buffer which is what I'm looking for when working with a single file.
    console.log(message);
    return;
}

This works great for one file. I'm able to use the buffer and process the file as I would like. To send two files, my thought was to convert each file to a Uint8Array (as I did for the single file) and push to an array like so:

// Client

let filesArray = [];
let files = upload.files;       // Grab uploaded Manifests

for (let file of files) {
    let byteFile = await getAsByteArray(file);
    filesArray.push(byteFile);
}

socket.send(filesArray);

In the same way as with one file, the server returns a buffer for the array that was sent; however, I'm not sure how to work with it. I need each file to be their own buffer in order to work with them. Am I taking the wrong approach here? Or am I just missing some conversion to be able to work with each file?

Answer 1

Send each buffer in separate message:

button.onclick = async function() {
    upload.files.forEach(file => socket.send(await getAsByteArray(file)));
}

Answer 2

This works great for one file.

Not really. Unless it is supposed to be used in some very simplistic setup, probably in an isolated (from the internet) network.

You literally send a sequence of bytes to the server which reads it and what is it going to do with it? Save it to disk? Without validating? But how can it validate a random sequence of bytes, it has no hint about what it is? Secondly, where will it save it? Under what name? You didn't send any metadata like filename. Is it supposed to generate a random name for it? How will the user know that this is his file? Finally, what about security? Can I open a WebSocket connection to your server and spam it with arbitrary sequences of data, effictively killing it? You probably need some authentication, but even with it, can any user spam such upload? Maybe you additionally need tokens with timeouts for that (but then you have to think about how will your server issue such tokens).

I need each file to be their own buffer in order to work with them.

No, you don't. The bare minimum you need is (1) the ability to send files with metadata from the client and (2) the ability to read files with metadata on the server side. You most likely need some authentication mechanism as well. Typically you would use classical HTTP for that, which I strongly encourage you to utilize.

If you want to stick with WebSockets, then you have to implement those already well established mechanisms by yourself. So here's how I would do that:

(1) Define a custom protocol on top of WebSocket. Each frame should have a structure, for example first two bytes indicating "size of command", next X bytes (previous 2 bytes interpreted as int of size 16) the command as string. On the server side you read that command, map it to some handler, and run appropriate action. The data that the command should process, is the data from the remaining bytes of the frame.

(2) Setup authentication. Not in the scope of this answer, just indicating it is crucial. I'm putting this after (1) because you can reuse the protocol for that.

(3) Whenever you want to upload a file: send a command "SEND" to the server. In the same frame, after "SEND" command put metadata (file name, size, content type, etc.), you can encode it as JSON prefixed with length. Afterwards put the content of the file in the buffer.

This solution should obviously be refined with (mentioned earlier) tokens. For proper responsivness and concurrency, you should probably split large files into separate WebSocket frames (which complicates the design a lot).

Anyway, as you can see, the topic is far from trivial and requires lots of experience. And it is basically reimplementing what HTTP does anyway. Again: I strongly suggest you use plain old HTTP.