diff --git a/examples/browser.html b/examples/browser.html index 052558b..0323cb0 100644 --- a/examples/browser.html +++ b/examples/browser.html @@ -43,7 +43,14 @@ var resultAsUint8Array = pako.deflate(data); var resultAsBinString = pako.deflate(data, { to: 'string' }); -// Send data to server ///////////////////////////////////////////////////////// +// Send data to server +// +// Use multipart/form-data: +// +// - small overhead +// - well known format, easy to process anywhere +// +///////////////////////////////////////////////////////// function sendModern() { var xhr = new XMLHttpRequest; @@ -52,11 +59,13 @@ function sendModern() { xhr.open('POST', 'http://localhost:8000/', true); - // We could make this work everywhere, if send data as base64 string. - // But that will add 25% of size. - xhr.send(resultAsUint8Array); + var formData = new FormData(document.forms.person); + var blob = new Blob([ resultAsUint8Array ], { type: 'application/octet-stream'}); - setTimeout(sendModern, 2000); + formData.append('binson', blob); + xhr.send(formData); + + setTimeout(sendModern, 5000); } function sendAncient() { @@ -64,10 +73,26 @@ function sendAncient() { console.log('Sending data in ancient browsers...'); - xhr.open('POST', 'http://localhost:8000/', true); - xhr.send(resultAsBinString); + // Emulate form body. But since we can send intact only 7-bit + // characters, wrap binary data to base64. That will add 30% of size. + var boundary = '----' + String(Math.random()).slice(2); - setTimeout(sendAncient, 2000); + var data = ''; + + data += '--' + boundary + '\r\n'; + data += 'Content-Disposition: form-data; name="binson"; filename="blob"\r\n'; + data += 'Content-Type: application/octet-stream\r\n'; + data += 'Content-Transfer-Encoding: base64\r\n' + data += '\r\n'; + data += btoa(resultAsBinString) + '\r\n'; + data += '--' + boundary + '--\r\n'; + + + xhr.open('POST', 'http://localhost:8000/'); + xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary); + xhr.send(data); + + setTimeout(sendAncient, 5000); } sendModern(); diff --git a/examples/server.js b/examples/server.js index cd2f02f..0a6336b 100644 --- a/examples/server.js +++ b/examples/server.js @@ -2,39 +2,76 @@ /*eslint-disable no-console*/ -const http = require('http'); -const pako = require('../'); +const http = require('http'); +const pako = require('../'); +const multiparty = require('multiparty'); +const Promise = require('bluebird'); +const fs = require('fs'); + + +const MULTIPART_RE = /^multipart\/form-data(?:;|$)/i; +const MAX_FIELDS_SIZE = 100 * 1024; // 100kb +const MAX_FILES_SIZE = 10 * 1024 * 1024; // 10mb + + +function error(msg) { + let e = new Error(msg); + e.statusCode = 400; + return e; +} + const server = http.createServer((req, res) => { - var buf = []; - req.on('data', data => buf.push(data)); + console.log('--- received request'); - req.on('end', () => { - console.log('--- received request'); + // Quick hack to bypass security restrictions when demo html is opened from + // file system. Don't do such things on production. + res.setHeader('Access-Control-Allow-Origin', '*'); + + Promise.coroutine(function* () { + // + // Check request size early by header and terminate immediately for big data + // + let length = parseInt((req.headers['content-length'] || '0'), 10); + + if (!length || isNaN(length)) throw error('Length required'); + + if (!MULTIPART_RE.test(req.headers['content-type'])) { + throw error('Expect form data'); + } + + let err = null; + + let form = new multiparty.Form({ + maxFieldsSize: MAX_FIELDS_SIZE, + maxFilesSize: MAX_FILES_SIZE + }); + + let files = yield new Promise(resolve => { + form.parse(req, function (e, fields, files) { + if (e) err = e; + resolve(files); + }); + }); + + if (err) { + err.statusCode = err.statusCode || 400; + throw err; + } // In ideal world, we should process data as stream to minimize memory use // on big data (and use node's `zlib` inflate). // // But that's just a quick sample to explain data reencoding steps from // browser to server. Feel free to improve. + let bin = yield Promise.fromCallback(cb => { + fs.readFile(files.binson[0].path, cb); + }); - // Join all pending chunks. - let bin = Buffer.concat(buf); - - // Test header to understand if data was sent as raw binary (modern browser) - // or string (utf8) format. If utf8 - reencode to binary. - // - // We could also use base64 encoding for strings on client side, but that - // needs more libraries for old browsers (for unsupported `window.btoa()`). - // - // If you don't need IE8/9 support - just drop this part. - if (/UTF-8/i.test(String(req.headers['content-type']))) { - console.log('--- data has utf-8 encoding'); - - bin = Buffer.from(bin.toString(), 'binary'); - } + // Kludge - here we should cleanup all files + fs.unlinkSync(files.binson[0].path); // Decompress binary content // Note! Can throw error on bad data @@ -48,17 +85,14 @@ const server = http.createServer((req, res) => { let obj = JSON.parse(decoded); console.log('--- received object is: ', obj); - - // Quick hack to bypass security restrictions when demo html is opened from - // file system. Don't do such things on production. - res.setHeader('Access-Control-Allow-Origin', '*'); res.end('ok'); + })() + .catch(err => { + console.log(err); + res.statusCode = err.statusCode || 400; + res.end(err.message); }); - req.on('error', () => { - res.setHeader('Access-Control-Allow-Origin', '*'); - res.end('error'); - }); }); server.listen(8000); diff --git a/package.json b/package.json index 8087ec5..4490ca4 100644 --- a/package.json +++ b/package.json @@ -21,20 +21,22 @@ "license": "MIT", "repository": "nodeca/pako", "devDependencies": { - "mocha": "^3.2.0", - "benchmark": "*", "ansi": "*", + "async": "*", + "benchmark": "*", + "bluebird": "^3.5.0", "browserify": "*", "eslint": "^3.12.2", "eslint-plugin-nodeca": "~1.0.3", - "uglify-js": "*", - "istanbul": "*", - "ndoc": "*", - "lodash": "*", - "async": "*", "grunt": "^1.0.1", "grunt-cli": "^1.2.0", + "grunt-contrib-connect": "^1.0.2", "grunt-saucelabs": "^9.0.0", - "grunt-contrib-connect": "^1.0.2" + "istanbul": "*", + "lodash": "*", + "mocha": "^3.2.0", + "multiparty": "^4.1.3", + "ndoc": "*", + "uglify-js": "*" } }