(ml5717) Reduce message size using MessagePack and pako

dist/peer.js

@@ -22,6 +22,14 @@ var _webrtcsupport = require('./webrtcsupport');
 
 var _webrtcsupport2 = _interopRequireDefault(_webrtcsupport);
 
+var _whatThePack = require('what-the-pack');
+
+var _whatThePack2 = _interopRequireDefault(_whatThePack);
+
+var _pako = require('pako');
+
+var _pako2 = _interopRequireDefault(_pako);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -30,6 +38,10 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+var _MessagePack$initiali = _whatThePack2.default.initialize(Math.pow(2, 22)),
+    encode = _MessagePack$initiali.encode,
+    decode = _MessagePack$initiali.decode;
+
 function isAllTracksEnded(stream) {
   var isAllTracksEnded = true;
   stream.getTracks().forEach(function (t) {
@@ -38,6 +50,11 @@ function isAllTracksEnded(stream) {
   return isAllTracksEnded;
 }
 
+var protoSend = RTCDataChannel.prototype.send;
+RTCDataChannel.prototype.send = function (data) {
+  protoSend.apply(this, [_pako2.default.deflate(encode(data))]);
+};
+
 var Peer = function (_WildEmitter) {
   _inherits(Peer, _WildEmitter);
 
@@ -203,7 +220,7 @@ var Peer = function (_WildEmitter) {
       this.logger.log('sending via datachannel', channel, messageType, message);
       var dc = this.getDataChannel(channel);
       if (dc.readyState !== 'open') return false;
-      dc.send(JSON.stringify(message));
+      dc.send(message);
       return true;
     }
 
@@ -213,10 +230,11 @@ var Peer = function (_WildEmitter) {
     key: '_observeDataChannel',
     value: function _observeDataChannel(channel, peer) {
       var self = this;
+      channel.binaryType = 'arraybuffer';
       channel.onclose = this.emit.bind(this, 'channelClose', channel, peer);
       channel.onerror = this.emit.bind(this, 'channelError', channel, peer);
       channel.onmessage = function (event) {
-        self.emit('channelMessage', self, channel.label, JSON.parse(event.data), channel, event);
+        self.emit('channelMessage', self, channel.label, decode(_whatThePack2.default.Buffer.from(_pako2.default.inflate(event.data))), channel, event);
       };
       channel.onopen = this.emit.bind(this, 'channelOpen', channel, peer);
     }
@@ -335,10 +353,10 @@ var Peer = function (_WildEmitter) {
       });
       // override onopen
       dc.onopen = function () {
-        dc.send(JSON.stringify({
+        dc.send({
           size: file.size,
           name: file.name
-        }));
+        });
         sender.send(file, dc);
       };
       // override onclose

dist/webrtc.js

@@ -96,7 +96,7 @@ var WebRTC = function (_LocalMedia) {
           if (peer.enableDataChannels) {
             var dc = peer.getDataChannel('liowebrtc');
             if (dc.readyState !== 'open') return;
-            dc.sendDirectlyToAll(JSON.stringify({ type: 'speaking' }));
+            dc.sendDirectlyToAll({ type: 'speaking' });
           }
         });
       }
@@ -107,7 +107,7 @@ var WebRTC = function (_LocalMedia) {
           if (peer.enableDataChannels) {
             var dc = peer.getDataChannel('liowebrtc');
             if (dc.readyState !== 'open') return;
-            dc.sendDirectlyToAll(JSON.stringify({ type: 'stoppedSpeaking' }));
+            dc.sendDirectlyToAll({ type: 'stoppedSpeaking' });
           }
         });
       }
@@ -118,7 +118,7 @@ var WebRTC = function (_LocalMedia) {
           if (peer.enableDataChannels) {
             var dc = peer.getDataChannel('liowebrtc');
             if (dc.readyState !== 'open') return;
-            dc.sendDirectlyToAll(JSON.stringify({ type: 'payload', volume: volume }));
+            dc.sendDirectlyToAll({ type: 'payload', volume: volume });
           }
         });
       }

package.json

@@ -9,9 +9,11 @@
     "filetransfer": "^2.0.4",
     "hark": "^1.2.0",
     "mockconsole": "0.0.1",
+    "pako": "^1.0.10",
     "rtcpeerconnection": "file:../rtcpeerconnection",
     "socket.io-client": "^2.3.0",
     "webrtc-adapter": "^7.3.0",
+    "what-the-pack": "^2.0.3",
     "wildemitter": "^1.2.0"
   },
   "devDependencies": {

src/peer.js

@@ -2,6 +2,10 @@ import PeerConnection from 'rtcpeerconnection';
 import WildEmitter from 'wildemitter';
 import FileTransfer from 'filetransfer';
 import webrtcSupport from './webrtcsupport';
+import MessagePack from 'what-the-pack';
+import pako from 'pako';
+
+const { encode, decode } = MessagePack.initialize(2**22);
 
 function isAllTracksEnded(stream) {
   let isAllTracksEnded = true;
@@ -11,6 +15,11 @@ function isAllTracksEnded(stream) {
   return isAllTracksEnded;
 }
 
+const protoSend = RTCDataChannel.prototype.send;
+RTCDataChannel.prototype.send = function (data) {
+  protoSend.apply(this, [pako.deflate(encode(data))])
+};
+
 class Peer extends WildEmitter {
   constructor(options) {
     super();
@@ -159,17 +168,18 @@ class Peer extends WildEmitter {
     this.logger.log('sending via datachannel', channel, messageType, message);
     const dc = this.getDataChannel(channel);
     if (dc.readyState !== 'open') return false;
-    dc.send(JSON.stringify(message));
+    dc.send(message);
     return true;
   }
 
   // Internal method registering handlers for a data channel and emitting events on the peer
   _observeDataChannel(channel, peer) {
     const self = this;
+    channel.binaryType = 'arraybuffer';
     channel.onclose = this.emit.bind(this, 'channelClose', channel, peer);
     channel.onerror = this.emit.bind(this, 'channelError', channel, peer);
     channel.onmessage = (event) => {
-      self.emit('channelMessage', self, channel.label, JSON.parse(event.data), channel, event);
+      self.emit('channelMessage', self, channel.label, decode(MessagePack.Buffer.from(pako.inflate(event.data))), channel, event);
     };
     channel.onopen = this.emit.bind(this, 'channelOpen', channel, peer);
   }
@@ -272,10 +282,10 @@ class Peer extends WildEmitter {
     });
       // override onopen
     dc.onopen = () => {
-      dc.send(JSON.stringify({
+      dc.send({
         size: file.size,
         name: file.name,
-      }));
+      });
       sender.send(file, dc);
     };
     // override onclose

src/webrtc.js

@@ -61,7 +61,7 @@ class WebRTC extends LocalMedia {
           if (peer.enableDataChannels) {
             const dc = peer.getDataChannel('liowebrtc');
             if (dc.readyState !== 'open') return;
-            dc.sendDirectlyToAll(JSON.stringify({ type: 'speaking' }));
+            dc.sendDirectlyToAll({ type: 'speaking' });
           }
         });
       }
@@ -72,7 +72,7 @@ class WebRTC extends LocalMedia {
           if (peer.enableDataChannels) {
             const dc = peer.getDataChannel('liowebrtc');
             if (dc.readyState !== 'open') return;
-            dc.sendDirectlyToAll(JSON.stringify({ type: 'stoppedSpeaking' }));
+            dc.sendDirectlyToAll({ type: 'stoppedSpeaking' });
           }
         });
       }
@@ -83,7 +83,7 @@ class WebRTC extends LocalMedia {
           if (peer.enableDataChannels) {
             const dc = peer.getDataChannel('liowebrtc');
             if (dc.readyState !== 'open') return;
-            dc.sendDirectlyToAll(JSON.stringify({ type: 'payload', volume }));
+            dc.sendDirectlyToAll({ type: 'payload', volume });
           }
         });
       }