Streaming a file from server to client with socket.io-stream

Question

I've managed to upload files in chunk from a client to a server, but now i want to achieve the opposite way. Unfortunately the documentation on the offical module page lacks for this part.

I want to do the following:

• emit a stream and 'download'-event with the filename to the server
• the server should create a readstream and pipe it to the stream emitted from the client
• when the client reaches the stream, a download-popup should appear and ask where to save the file

The reason why i don't wanna use simple file-hyperlinks is obfuscating: the files on the server are encrpted and renamed, so i have to decrypt and rename them for each download request.

Any code snippets around to get me started with this?

Answer 1

This is a working example I'm using. But somehow (maybe only in my case) this can be very slow.

//== Server Side
ss(socket).on('filedownload', function (stream, name, callback) {

    //== Do stuff to find your file
    callback({
        name : "filename",
        size : 500
    });

    var MyFileStream = fs.createReadStream(name);
    MyFileStream.pipe(stream);

});

//== Client Side
/** Download a file from the object store
 * @param {string} name Name of the file to download
 * @param {string} originalFilename Overrules the file's originalFilename
 * @returns {$.Deferred}
 */
function downloadFile(name, originalFilename) {

    var deferred = $.Deferred();

    //== Create stream for file to be streamed to and buffer to save chunks
    var stream = ss.createStream(),
    fileBuffer = [],
    fileLength = 0;

    //== Emit/Request
    ss(mysocket).emit('filedownload', stream, name, function (fileError, fileInfo) {
        if (fileError) {
            deferred.reject(fileError);
        } else {

            console.log(['File Found!', fileInfo]);

            //== Receive data
            stream.on('data', function (chunk) {
                fileLength += chunk.length;
                var progress = Math.floor((fileLength / fileInfo.size) * 100);
                progress = Math.max(progress - 2, 1);
                deferred.notify(progress);
                fileBuffer.push(chunk);
            });

            stream.on('end', function () {

                var filedata = new Uint8Array(fileLength),
                i = 0;

                //== Loop to fill the final array
                fileBuffer.forEach(function (buff) {
                    for (var j = 0; j < buff.length; j++) {
                        filedata[i] = buff[j];
                        i++;
                    }
                });

                deferred.notify(100);

                //== Download file in browser
                downloadFileFromBlob([filedata], originalFilename);

                deferred.resolve();
            });
        }
    });

    //== Return
    return deferred;
}

var downloadFileFromBlob = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, fileName) {
        var blob = new Blob(data, {
                type : "octet/stream"
            }),
        url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

Answer 2

Answer My dear friend Jeffrey van Norden That's right. it worked for me. But there was a small bug so I changed the server side code this way:

//== Server Side
ss(socket).on('filedownload', function (stream, name, callback) {

    //== Do stuff to find your file
    try {
            let stats = fs.statSync(name);
            let size = stats.size;
            callback(false,{
                name: name,
                size: size
            });
            let MyFileStream = fs.createReadStream(name);
            MyFileStream.pipe(stream);
        }
        catch (e){
            callback(true,{});
        }
});

//== Client Side
/** Download a file from the object store
 * @param {string} name Name of the file to download
 * @param {string} originalFilename Overrules the file's originalFilename
 * @returns {$.Deferred}
 */
function downloadFile(name, originalFilename) {

    var deferred = $.Deferred();

    //== Create stream for file to be streamed to and buffer to save chunks
    var stream = ss.createStream(),
    fileBuffer = [],
    fileLength = 0;

    //== Emit/Request
    ss(mysocket).emit('filedownload', stream, name, function (fileError, fileInfo) {
        if (fileError) {
            deferred.reject(fileError);
        } else {

            console.log(['File Found!', fileInfo]);

            //== Receive data
            stream.on('data', function (chunk) {
                fileLength += chunk.length;
                var progress = Math.floor((fileLength / fileInfo.size) * 100);
                progress = Math.max(progress - 2, 1);
                deferred.notify(progress);
                fileBuffer.push(chunk);
            });

            stream.on('end', function () {

                var filedata = new Uint8Array(fileLength),
                i = 0;

                //== Loop to fill the final array
                fileBuffer.forEach(function (buff) {
                    for (var j = 0; j < buff.length; j++) {
                        filedata[i] = buff[j];
                        i++;
                    }
                });

                deferred.notify(100);

                //== Download file in browser
                downloadFileFromBlob([filedata], originalFilename);

                deferred.resolve();
            });
        }
    });

    //== Return
    return deferred;
}

var downloadFileFromBlob = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, fileName) {
        var blob = new Blob(data, {
                type : "octet/stream"
            }),
        url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());