New example datachannel buffer limits (#5)

Author: Philippe Sultan

examples/datachannel-buffer-limits/client.js

@@ -0,0 +1,157 @@
+'use strict';
+
+const createExample = require('../../lib/browser/example');
+
+const description = 'This example sends a given amount of data from the client \
+over an RTCDataChannel. Upon receipt, node-webrtc responds by sending the data \
+back to the client. \
+Data is chunked into pieces, you can adjust both the chunk size and global \
+size to test the outbound buffer limits of the RTCDataChannel.';
+
+const dataSize = document.createElement('input');
+dataSize.type = 'number';
+dataSize.value = 10;
+dataSize.min = 1;
+dataSize.max = 1024;
+
+const chunkSize = document.createElement('input');
+chunkSize.type = 'number';
+chunkSize.value = 64;
+chunkSize.step = 16;
+chunkSize.min = 16;
+chunkSize.max = 512;
+
+function beforeAnswer(peerConnection) {
+  let dataChannel = null;
+  let downloadStartTime = 0;
+  let downLoadDuration = 0;
+  let downloadedBytes = 0;
+  const uploadedBytes = (dataSize.value)*1024*1024;
+
+  function closeDatachannel() {
+    if (dataChannel) {
+      dataChannel.removeEventListener('message', onMessage);
+      dataChannel.close();
+      dataChannel = null;
+    }
+  }
+
+  function resetButtons() {
+    document.querySelectorAll('button').forEach((button) => {
+      if (button.innerText === 'Start') {
+        button.disabled = false;
+      }
+
+      if (button.innerText === 'Stop') {
+        button.disabled = true;
+      }
+    });
+  }
+
+  function onMessage({ data }) {
+    if (/^#START/.test(data)) {
+      downloadStartTime = Date.now();
+      const uploadDuration = data.split(' ')[1];
+      const uploadBitRate = uploadedBytes*8/(uploadDuration/1000)/1000000;
+      const text = `Upload   -- total : ${uploadedBytes}, duration : ${uploadDuration} ms, bitrate : ~${uploadBitRate.toFixed(2)} Mbits/s`;
+      uploadLabel.innerHTML = text;
+      console.log(text);
+
+      return;
+    }
+
+    if (/^#STOP/.test(data)) {
+      downLoadDuration = Date.now() - downloadStartTime;
+      const downloadBitRate = downloadedBytes*8/(downLoadDuration/1000)/1000000;
+      const text = `Download -- total : ${downloadedBytes}, duration : ${downLoadDuration} ms, bitrate : ~${downloadBitRate.toFixed(2)} Mbits/s`;
+      downloadLabel.innerHTML = text;
+      console.log(text);
+
+      peerConnection.close();
+      closeDatachannel();
+      resetButtons();
+
+      return;
+    }
+
+    downloadedBytes += data.length;
+  }
+
+  function onDataChannel({ channel }) {
+    if (channel.label !== 'datachannel-buffer-limits') {
+      return;
+    }
+
+    uploadLabel.innerHTML = 'Upload   -- ...';
+    downloadLabel.innerHTML = 'Download -- ...';
+
+    // Slightly delaying everything because Firefox needs it
+    setTimeout(() => {
+      dataChannel = channel;
+      dataChannel.addEventListener('message', onMessage);
+
+      const queueStartTime = Date.now();
+      const chunkSizeInBytes = (chunkSize.value)*1024;
+      const loops = uploadedBytes / chunkSizeInBytes;
+      const rem = uploadedBytes % chunkSizeInBytes;
+
+      try {
+        dataChannel.send(`#START ${chunkSize.value}`);
+
+        var data = new Array(chunkSizeInBytes + 1).join('.');
+        for (let i = 0; i < loops; i++) {
+          dataChannel.send(data);
+        }
+
+        if (rem) {
+          dataChannel.send(data);
+        }
+
+        dataChannel.send('#STOP');
+        const queueDuration = Date.now() - queueStartTime;
+        console.log(`Queued ${uploadedBytes} bytes in ${queueDuration} ms`);
+      } catch(e) {
+        console.log('Failed to send data over dataChannel :', e);
+        peerConnection.close();
+        closeDatachannel();
+        resetButtons();
+        alert(e);
+      }
+    }, 200);
+  }
+
+  function onConnectionStateChange(event) {
+    switch(peerConnection.connectionState) {
+      case "disconnected":
+      case "failed":
+      case "closed":
+        console.log('Received close event');
+        closeDatachannel();
+        break;
+    }
+  }
+
+  peerConnection.addEventListener('connectionstatechange', onConnectionStateChange);
+  peerConnection.addEventListener('datachannel', onDataChannel);
+}
+
+createExample('datachannel-buffer-limits', description, { beforeAnswer, RTCPeerConnection: window.RTCPeerConnection });
+
+const dataSizeLabel = document.createElement('label');
+dataSizeLabel.innerText = 'Data size to send (MBytes):';
+dataSizeLabel.appendChild(dataSize);
+
+const chunkSizeLabel = document.createElement('label');
+chunkSizeLabel.innerText = 'Chunk size (Kbytes):';
+chunkSizeLabel.appendChild(chunkSize);
+
+const uploadLabel = document.createElement('label');
+uploadLabel.innerHTML = 'Upload &emsp;&emsp;-- ';
+
+const downloadLabel = document.createElement('label');
+downloadLabel.innerHTML = 'Download -- ';
+
+document.body.appendChild(dataSizeLabel);
+document.body.appendChild(chunkSizeLabel);
+document.body.appendChild(uploadLabel);
+document.body.appendChild(downloadLabel);

examples/datachannel-buffer-limits/server.js

@@ -0,0 +1,79 @@
+'use strict';
+
+function beforeOffer(peerConnection) {
+  const dataChannel = peerConnection.createDataChannel('datachannel-buffer-limits');
+  let uploadStartTime = 0;
+  let uploadedBytesTotal = 0;
+  let chunkSize = 64; // Default value, updated from the client
+
+  function onMessage({ data }) {
+    if (/^#START/.test(data)) {
+      uploadStartTime = Date.now();
+      const value = parseInt(data.split(' ')[1]);
+
+      if (!isNaN(value)) {
+        chunkSize = value;
+      }
+
+      return;
+    }
+
+    if (data === '#STOP') {
+      const uploadDuration = Date.now() - uploadStartTime;
+
+      console.log('Client upload duration :', uploadDuration, 'ms');
+      console.log(`uploadedBytesTotal : ${uploadedBytesTotal}`);
+
+      const queueStartTime = Date.now();
+      const chunkSizeInBytes = chunkSize*1024;
+
+      const loops = uploadedBytesTotal / chunkSizeInBytes;
+      const rem = uploadedBytesTotal % chunkSizeInBytes;
+      const obuf = new Array(chunkSizeInBytes + 1).join('.');
+
+      try {
+        dataChannel.send('#START ' + uploadDuration);
+
+        for (let i = 0; i < loops; i++) {
+          dataChannel.send(obuf);
+        }
+
+        if (rem) {
+          dataChannel.send(obuf);
+        }
+
+        const queueDuration = Date.now() - queueStartTime;
+
+        dataChannel.send('#STOP ' + queueDuration);
+        console.log(`Data sent back to client, queueDuration : ${queueDuration} ms`)
+
+      } catch(e) {
+        console.log('Failed to send data :', e);
+        dataChannel.removeEventListener('message', onMessage);
+        dataChannel.close();
+        peerConnection.close();
+      }
+
+      return;
+    }
+
+    uploadedBytesTotal += Buffer.byteLength(data);
+  }
+
+  function onConnectionStateChange(event) {
+    switch(peerConnection.connectionState) {
+      case "disconnected":
+      case "failed":
+      case "closed":
+        console.log('Received close event');
+        dataChannel.removeEventListener('message', onMessage);
+        dataChannel.close();
+        break;
+    }
+  }
+
+  dataChannel.addEventListener('message', onMessage);
+  peerConnection.addEventListener('connectionstatechange', onConnectionStateChange);
+}
+
+module.exports = { beforeOffer };

html/index.html

@@ -43,6 +43,7 @@ <h1>node-webrtc examples</h1>
   <li><a href="/audio-video-loopback/index.html">audio-video-loopback
   <li><a href="/ping-pong/index.html">ping-pong
   <li><a href="/pitch-detector/index.html">pitch-detector
+  <li><a href="/datachannel-buffer-limits/index.html">datachannel-buffer-limits
   <li><a href="/sine-wave/index.html">sine-wave
   <li><a href="/sine-wave-stereo/index.html">sine-wave-stereo
   <li><a href="/video-compositing/index.html">video-compositing