Skip to content

Commit

Permalink
Examples: send data as form
Browse files Browse the repository at this point in the history
  • Loading branch information
Vitaly Puzrin committed Mar 8, 2017
1 parent a3b3ae3 commit 61f59e7
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 45 deletions.
41 changes: 33 additions & 8 deletions examples/browser.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,14 @@
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;
Expand All @@ -52,22 +59,40 @@

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() {
var xhr = new XMLHttpRequest;

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);

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, 2000);
setTimeout(sendAncient, 5000);
}

sendModern();
Expand Down
92 changes: 63 additions & 29 deletions examples/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');

// 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');
}

req.on('end', () => {
console.log('--- received request');
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
Expand All @@ -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);
Expand Down
18 changes: 10 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "*"
}
}

0 comments on commit 61f59e7

Please sign in to comment.