From 05d5c76c86af1f6a0a10057c4caba7edf13f2420 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Sun, 3 May 2020 10:44:26 +1000
Subject: [PATCH] Moved to msgpack instead of js-binarypack
---
package.json | 2 +-
src/helpers/Peer.js | 63 ++++++++++++++++++++++++++----------
src/helpers/blobToBuffer.js | 8 ++---
src/modals/SelectMapModal.js | 1 +
yarn.lock | 10 +++---
5 files changed, 56 insertions(+), 28 deletions(-)
diff --git a/package.json b/package.json
index 353b2ff..c408468 100644
--- a/package.json
+++ b/package.json
@@ -3,13 +3,13 @@
"version": "1.2.0",
"private": true,
"dependencies": {
+ "@msgpack/msgpack": "^1.12.1",
"@stripe/stripe-js": "^1.3.2",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"dexie": "^2.0.4",
"interactjs": "^1.9.7",
- "js-binarypack": "^0.0.9",
"normalize-wheel": "^1.0.1",
"react": "^16.13.0",
"react-dom": "^16.13.0",
diff --git a/src/helpers/Peer.js b/src/helpers/Peer.js
index 04d8893..1c01515 100644
--- a/src/helpers/Peer.js
+++ b/src/helpers/Peer.js
@@ -1,5 +1,5 @@
import SimplePeer from "simple-peer";
-import BinaryPack from "js-binarypack";
+import { encode, decode } from "@msgpack/msgpack";
import shortid from "shortid";
import blobToBuffer from "./blobToBuffer";
@@ -14,7 +14,7 @@ class Peer extends SimplePeer {
this.currentChunks = {};
this.on("data", (packed) => {
- const unpacked = BinaryPack.unpack(packed);
+ const unpacked = decode(packed);
// If the special property __chunked is set and true
// The data is a partial chunk of the a larger file
// So wait until all chunks are collected and assembled
@@ -31,9 +31,13 @@ class Peer extends SimplePeer {
// All chunks have been loaded
if (chunk.count === chunk.total) {
- const merged = BinaryPack.unpack(Buffer.concat(chunk.data));
- this.emit("dataComplete", merged);
- delete this.currentChunks[unpacked.id];
+ // Merge chunks with a blob
+ // TODO: Look at a more efficient way to recombine buffer data
+ const merged = new Blob(chunk.data);
+ blobToBuffer(merged).then((buffer) => {
+ this.emit("dataComplete", decode(buffer));
+ delete this.currentChunks[unpacked.id];
+ });
}
} else {
this.emit("dataComplete", unpacked);
@@ -41,29 +45,24 @@ class Peer extends SimplePeer {
});
}
- async sendPackedData(packedData) {
- const buffer = await blobToBuffer(packedData);
- super.send(buffer);
- }
-
send(data) {
- const packedData = BinaryPack.pack(data);
+ const packedData = encode(data);
- if (packedData.size > MAX_BUFFER_SIZE) {
+ if (packedData.byteLength > MAX_BUFFER_SIZE) {
const chunks = this.chunk(packedData);
for (let chunk of chunks) {
- this.sendPackedData(BinaryPack.pack(chunk));
+ super.send(encode(chunk));
}
return;
} else {
- this.sendPackedData(packedData);
+ super.send(packedData);
}
}
// Converted from https://github.com/peers/peerjs/
- chunk(blob) {
+ chunk(data) {
const chunks = [];
- const size = blob.size;
+ const size = data.byteLength;
const total = Math.ceil(size / MAX_BUFFER_SIZE);
const id = shortid.generate();
@@ -72,7 +71,7 @@ class Peer extends SimplePeer {
while (start < size) {
const end = Math.min(size, start + MAX_BUFFER_SIZE);
- const slice = blob.slice(start, end);
+ const slice = data.slice(start, end);
const chunk = {
__chunked: true,
@@ -89,6 +88,36 @@ class Peer extends SimplePeer {
return chunks;
}
+
+ // // Converted from https://github.com/peers/peerjs/
+ // chunk(blob) {
+ // const chunks = [];
+ // const size = blob.size;
+ // const total = Math.ceil(size / MAX_BUFFER_SIZE);
+ // const id = shortid.generate();
+
+ // let index = 0;
+ // let start = 0;
+
+ // while (start < size) {
+ // const end = Math.min(size, start + MAX_BUFFER_SIZE);
+ // const slice = blob.slice(start, end);
+
+ // const chunk = {
+ // __chunked: true,
+ // data: slice,
+ // id,
+ // index,
+ // total,
+ // };
+
+ // chunks.push(chunk);
+ // start = end;
+ // index++;
+ // }
+
+ // return chunks;
+ // }
}
export default Peer;
diff --git a/src/helpers/blobToBuffer.js b/src/helpers/blobToBuffer.js
index 55eb6d7..c816ced 100644
--- a/src/helpers/blobToBuffer.js
+++ b/src/helpers/blobToBuffer.js
@@ -1,12 +1,10 @@
async function blobToBuffer(blob) {
if (blob.arrayBuffer) {
const arrayBuffer = await blob.arrayBuffer();
- const buffer = Buffer.from(arrayBuffer);
- return buffer;
+ return new Uint8Array(arrayBuffer);
} else {
- const arrayBuffer = await new Response(blob).arrayBuffer();
- const buffer = Buffer.from(arrayBuffer);
- return buffer;
+ const arrayBuffer = new Response(blob).arrayBuffer();
+ return new Uint8Array(arrayBuffer);
}
}
diff --git a/src/modals/SelectMapModal.js b/src/modals/SelectMapModal.js
index 62a75b4..3ffa96b 100644
--- a/src/modals/SelectMapModal.js
+++ b/src/modals/SelectMapModal.js
@@ -149,6 +149,7 @@ function SelectMapModal({
const url = URL.createObjectURL(blob);
image.onload = function () {
handleMapAdd({
+ // Save as a buffer to send with msgpack
file: buffer,
name,
type: "file",
diff --git a/yarn.lock b/yarn.lock
index 3dce1d6..4996633 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1398,6 +1398,11 @@
call-me-maybe "^1.0.1"
glob-to-regexp "^0.3.0"
+"@msgpack/msgpack@^1.12.1":
+ version "1.12.1"
+ resolved "https://registry.yarnpkg.com/@msgpack/msgpack/-/msgpack-1.12.1.tgz#aab1084bc33c955501bc0f202099e38304143e0b"
+ integrity sha512-nGwwmkdm3tuLdEkWMIwLBgFBfMFILILxcZIQY0dfqsdboN2iZdKfOYKUOKoa0wXw1FL1PL3yEYGPCXhwodQDTA==
+
"@nodelib/fs.stat@^1.1.2":
version "1.1.3"
resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
@@ -6537,11 +6542,6 @@ jest@24.9.0:
import-local "^2.0.0"
jest-cli "^24.9.0"
-js-binarypack@^0.0.9:
- version "0.0.9"
- resolved "https://registry.yarnpkg.com/js-binarypack/-/js-binarypack-0.0.9.tgz#454243d3de212961cc1514a2f119dec2faf64035"
- integrity sha1-RUJD094hKWHMFRSi8Rnewvr2QDU=
-
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"