Moved to msgpack instead of js-binarypack

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",

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;

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

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",

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"