mirror of
https://github.com/0x5eal/rbxts-pako.git
synced 2025-04-10 22:00:58 +01:00
Cleanup example
This commit is contained in:
parent
9f5e7dcefc
commit
6607dbc18a
3 changed files with 21 additions and 75 deletions
|
@ -2,5 +2,5 @@ Demo of sending compressed objects from browser to server.
|
||||||
|
|
||||||
Run `node server.js` and open `browser.html`.
|
Run `node server.js` and open `browser.html`.
|
||||||
|
|
||||||
__Warning!__ This is the sample only, to explain data reencoding steps. It does
|
__Warning!__ This is the sample only, to show data reencoding steps. It does
|
||||||
not have error checks and so on. Don't copy-paste to production code "as is".
|
not have error checks and so on. Don't copy-paste to production code "as is".
|
||||||
|
|
|
@ -5,43 +5,20 @@
|
||||||
<script>
|
<script>
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var pako = window.pako;
|
|
||||||
|
|
||||||
// In browser
|
|
||||||
|
|
||||||
// Initial object //////////////////////////////////////////////////////////////
|
// Initial object //////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
var obj = new Array(10);
|
const obj = [
|
||||||
|
{ foo: 'bar', baz: 'БАТ' },
|
||||||
for (var i = 0; i < obj.length; i++) {
|
{ abra: 1, cadabra: null }
|
||||||
obj[i] = { foo: 'bar', baz: 'БАТ' };
|
]
|
||||||
}
|
|
||||||
|
|
||||||
// Convert /////////////////////////////////////////////////////////////////////
|
// Convert /////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
var str = JSON.stringify(obj);
|
var str = JSON.stringify(obj);
|
||||||
|
|
||||||
//
|
|
||||||
// Now `str` is standard utf16 (16-bit) string. But we need 8-bit data
|
|
||||||
//
|
|
||||||
|
|
||||||
// Let's reencode to utf8
|
|
||||||
// This method is dirty, but simple and ok for example.
|
|
||||||
var data = unescape(encodeURIComponent(str));
|
|
||||||
|
|
||||||
|
|
||||||
// Compress ////////////////////////////////////////////////////////////////////
|
// Compress ////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
//
|
var result = window.pako.deflate(str);
|
||||||
// After compression we have binary data (typed array here).
|
|
||||||
//
|
|
||||||
// `XMLHttpRequest.send` accepts typed arrays in modern browsers.
|
|
||||||
// For ancient ones - more work needed.
|
|
||||||
//
|
|
||||||
|
|
||||||
var resultAsUint8Array = pako.deflate(data);
|
|
||||||
var resultAsBinString = pako.deflate(data, { to: 'string' });
|
|
||||||
|
|
||||||
|
|
||||||
// Send data to server
|
// Send data to server
|
||||||
//
|
//
|
||||||
|
@ -52,51 +29,23 @@ var resultAsBinString = pako.deflate(data, { to: 'string' });
|
||||||
//
|
//
|
||||||
/////////////////////////////////////////////////////////
|
/////////////////////////////////////////////////////////
|
||||||
|
|
||||||
function sendModern() {
|
function send() {
|
||||||
var xhr = new XMLHttpRequest;
|
var xhr = new XMLHttpRequest;
|
||||||
|
|
||||||
console.log('Sending data in modern browsers...');
|
console.log('Sending data...');
|
||||||
|
|
||||||
xhr.open('POST', 'http://localhost:8000/', true);
|
xhr.open('POST', 'http://localhost:8000/', true);
|
||||||
|
|
||||||
var formData = new FormData(document.forms.person);
|
var formData = new FormData(document.forms.person);
|
||||||
var blob = new Blob([ resultAsUint8Array ], { type: 'application/octet-stream'});
|
var blob = new Blob([ result ], { type: 'application/octet-stream'});
|
||||||
|
|
||||||
formData.append('binson', blob);
|
formData.append('binson', blob);
|
||||||
xhr.send(formData);
|
xhr.send(formData);
|
||||||
|
|
||||||
setTimeout(sendModern, 5000);
|
setTimeout(send, 5000);
|
||||||
}
|
}
|
||||||
|
|
||||||
function sendAncient() {
|
send();
|
||||||
var xhr = new XMLHttpRequest;
|
|
||||||
|
|
||||||
console.log('Sending data in ancient browsers...');
|
|
||||||
|
|
||||||
// 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, 5000);
|
|
||||||
}
|
|
||||||
|
|
||||||
sendModern();
|
|
||||||
sendAncient();
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,12 +1,15 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
/*eslint-disable no-console*/
|
/* eslint-disable no-console */
|
||||||
|
|
||||||
const http = require('http');
|
const http = require('http');
|
||||||
const pako = require('../');
|
|
||||||
const multiparty = require('multiparty');
|
const multiparty = require('multiparty');
|
||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
|
const zlib = require('zlib');
|
||||||
|
const util = require('util');
|
||||||
|
|
||||||
|
const readFile = util.promisify(fs.readFile);
|
||||||
|
const inflate = util.promisify(zlib.inflate);
|
||||||
|
|
||||||
const MULTIPART_RE = /^multipart\/form-data(?:;|$)/i;
|
const MULTIPART_RE = /^multipart\/form-data(?:;|$)/i;
|
||||||
const MAX_FIELDS_SIZE = 100 * 1024; // 100kb
|
const MAX_FIELDS_SIZE = 100 * 1024; // 100kb
|
||||||
|
@ -20,8 +23,7 @@ function error(msg) {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const server = http.createServer(async function (req, res) {
|
||||||
const server = http.createServer(async (req, res) => {
|
|
||||||
|
|
||||||
console.log('--- received request');
|
console.log('--- received request');
|
||||||
|
|
||||||
|
@ -60,22 +62,17 @@ const server = http.createServer(async (req, res) => {
|
||||||
throw err;
|
throw err;
|
||||||
}
|
}
|
||||||
|
|
||||||
// In ideal world, we should process data as stream to minimize memory use
|
let bin = await readFile(files.binson[0].path);
|
||||||
// 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 = fs.readFileSync(files.binson[0].path);
|
|
||||||
|
|
||||||
// Kludge - here we should cleanup all files
|
// Kludge - here we should cleanup all files
|
||||||
fs.unlinkSync(files.binson[0].path);
|
fs.unlinkSync(files.binson[0].path);
|
||||||
|
|
||||||
// Decompress binary content
|
// Decompress binary content
|
||||||
// Note! Can throw error on bad data
|
// Note! Can throw error on bad data
|
||||||
let uncompressed = pako.inflate(new Uint8Array(bin), { to: 'string' });
|
let uncompressed = await inflate(bin);
|
||||||
|
|
||||||
// Convert utf8 -> utf16 (native JavaScript string format)
|
// Convert utf8 buffer -> utf16 string (native JavaScript string format)
|
||||||
let decoded = decodeURIComponent(escape(uncompressed));
|
let decoded = uncompressed.toString();
|
||||||
|
|
||||||
// Finally, create an object
|
// Finally, create an object
|
||||||
// Note! Can throw error on bad data
|
// Note! Can throw error on bad data
|
||||||
|
|
Loading…
Add table
Reference in a new issue