@yz-social/webrtc 0.1.5 → 0.1.6

package/index.js

@@ -20,7 +20,7 @@ export class WebRTC {
   ];
   cleanup() { // Attempt to allow everything to be garbage-collected.
     if (!this.pc) return;
-    this.pc.onicecandidate = this.pc.ondatachannel = this.pc.onnegotiationneeded = this.pc.onconnectionstatechange = null;
+    this.pc.onicecandidate = this.pc.ondatachannel = this.pc.onnegotiationneeded = this.pc.onconnectionstatechange = this.pc.oniceconnectionstatechange = null;
     delete this.pc;
     delete this.dataChannelPromises;
     delete this.dataChannelOursPromises;
@@ -56,11 +56,27 @@ export class WebRTC {
     this.ignoreOffer = false;
 
     this.pc.onicecandidate = e => {
-      if (!e.candidate) return;
+      if (e.candidate === null) return;
       //if (this.pc.connectionState === 'connected') return; // Don't waste messages.  FIXME
+      // Including an empty string and of candidates marker.
+      // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/icecandidate_event#indicating_the_end_of_a_generation_of_candidates
       this.signal({ candidate: e.candidate });
     };
     this.pc.ondatachannel = e => this.ondatachannel(e.channel);
+    this.pc.oniceconnectionstatechange = () => {
+      if (!this.pc) return;
+      //this.flog('iceConnectionState', this.pc.iceConnectionState);
+      switch (this.pc.iceConnectionState) {
+      case 'completed':
+	this._resolveIceCompleted?.(true);
+	break;
+      case 'failed':
+	this.pc.restartIce();
+	break;
+      default:
+	;
+      }
+    };
     this.pc.onnegotiationneeded = async () => {
       try {
         this.makingOffer = true;
@@ -76,6 +92,23 @@ export class WebRTC {
       }
     };
   }
+  async renegotiate() { // Trigger negotiationneeded and promise to resolve when completed. Used in testing.
+    this._resolveIceCompleted?.(false); // clearing old promise, if any.
+    const promise = this.iceConnected;
+    this.pc.restartIce();
+    return promise;
+  }
+  get iceConnected() { // Return a promise that resolves when iceConnectionState transitions to connected or completed. Used in testing.
+    // I haven't found a reliable way to detect when this happens. If our side was in iceConnectionState 'connected' (but not 'completed')
+    // before the renegotiation, then we might never go completed. For testing, what I've been doing is racing between this side resolving,
+    // the other side resolving, and a timeout of a few seconds. NodeJS almost always resolves with the first two, and browsers mostly use the last.
+    return this._iceConnected ||= new Promise(resolve => {
+      this._resolveIceCompleted = value => {
+	this._iceConnected = null;
+	resolve(value);
+      };
+    });
+  }
   async close() {
     // Do not try to close or wait for data channels. It confuses Safari.
     const pc = this.pc;
@@ -186,7 +219,7 @@ export class WebRTC {
     // If this peer is responding to the other side, we arrange our waiting respond() to continue with data for the other side.
     //
     // Otherwise, if this side is allowed to initiate an outbound network request, then this side must define transferSignals(signals)
-    // to promise otherSide.respond(signals). If so, we call it with all pending signals (including the new one) and handle the the
+    // to promise otherSide.respond(signals). If so, we call it with all pending signals (including the new one) and handle the
     // response. (Which latter may trigger more calls to signal() on our side.)
     //
     // Otherwise, we just remember the signal for some future respond() on our side.
@@ -298,5 +331,28 @@ export class WebRTC {
     Object.assign(this, {stats, transport, candidatePair, remote, protocol, candidateType, statsTime: now, statsElapsed});
     if (doLogging) console.info(this.name, 'connected', protocol, candidateType, (statsElapsed/1e3).toFixed(1));
   }
+
+  static getPublicIP(stunServer = "stun:stun.l.google.com:19302") { // Promise external/WAN/public IP addresses for this device.
+    // This is the equivalent of whatismyip.com and the like, but using the same stun protocol that
+    // webrtc is using. Alas, the stun protocol itself is UDP and so cannot be fetched from a browser,
+    // so we use WebRTC itself.
+    return new Promise((resolve, reject) => {
+      const pc = new wrtc.RTCPeerConnection({iceServers: [{ urls: stunServer }] });
+      pc.createDataChannel("");
+      pc.onicecandidate = ({candidate}) => {
+	if (!candidate) return;
+	if (candidate.type === 'host') return;
+	// IWBNI we could gather all such addresses and let the app pick an ipV6 if desired.
+	// However, we don't always get two addresses, and I haven't been able to get a reliable indication of end of candidates.
+	resolve(candidate.address);
+	pc.onicecandidate = pc.onicecandidateerror = null;
+	pc.close();
+      };
+      pc.onicecandidateerror = reject;
+      pc.createOffer()
+	.then((offer) => pc.setLocalDescription(offer))
+	.catch(reject);
+    });
+  }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yz-social/webrtc",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Streamlined portable webrtc management of p2p and client2server.",
   "keywords": [
     "webrtc",

package/spec/portal.js

@@ -64,7 +64,7 @@ if (cluster.isPrimary) { // Parent process with portal webserver through which c
     console.log(new Date(), 'launched bot', cluster.worker.id);
     portal = new WebRTC({name: 'portal'});
     portal.getDataChannelPromise('data').then(dc => {
-      console.log('connected', cluster.worker.id);
+      console.log(new Date(), 'connected bot', cluster.worker.id);
       dc.send('Welcome!');
     });
     portal.closed.then(() => {  // Without any explicit message, this is 15 seconds after the other end goes away.

package/spec/webrtcCapacitySpec.js

@@ -6,8 +6,11 @@ function delay(ms) {
 }
 
 describe("WebRTC capacity", function () {
-  let nNodes = 20; // When running all webrtc tests at once, it is important to keep this low. (Memory leak?)
+  let nNodes = 75; // When running all webrtc tests at once, it is important to keep this low. (Memory leak?)
   let perPortalDelay = 1e3;
+  let portalSlopDelay = 2e3;
+  let perConnectionDelay = 100;
+  let connectionSlopDelay = 2e3;
   let port = 3000;
   let baseURL = `http://localhost:${port}`;
   // Alas, I can't seem to get more than about 150-160 nodes through ngrok, even on a machine that can handle 200 directly.
@@ -33,13 +36,14 @@ describe("WebRTC capacity", function () {
       const portalProcess = spawn('node', [path.resolve(__dirname, 'portal.js'), nNodes, perPortalDelay, port]);
       portalProcess.stdout.on('data', echo);
       portalProcess.stderr.on('data', echo);
-      await delay(perPortalDelay * (5 + nNodes));
+      await delay(perPortalDelay * nNodes + portalSlopDelay);
     }
 
     console.log(new Date(), 'creating', nNodes, 'nodes');
     for (let index = 0; index < nNodes; index++) {
       const node = nodes[index] = new WebRTC({name: 'node' + index});
       console.log('connecting', index);
+      node.nFetches = 0;
       node.transferSignals = messages => fetch(`${baseURL}/join/${index}`, {
 	method: 'POST',
 	headers: { 'Content-Type': 'application/json', 'Connection': 'close' },
@@ -49,6 +53,7 @@ describe("WebRTC capacity", function () {
 	  console.log('fetch', index, 'failed', response.status, response.statusText);
 	  return null;
 	}
+	node.nFetches++;
 	return response.json();
       });
       node.closed.then(() => console.log('closed', index)); // Just for debugging.
@@ -57,15 +62,16 @@ describe("WebRTC capacity", function () {
       node.createChannel('data', {negotiated: false});
       await dataOpened;
       console.log('opened', index);
-      if (!portalIsLocal) {
-	const maxConnectionsPerNode = 3;
-	const maxNgrokConnectionsPerSecond = 120 / 60;
-	const secondsPerNode = maxConnectionsPerNode / maxNgrokConnectionsPerSecond;
-	await delay(secondsPerNode * 1.5e3); // fudge factor milliseconds/second
-      }
+      // if (!portalIsLocal) {
+      // 	const maxConnectionsPerNode = 3;
+      // 	const maxNgrokConnectionsPerSecond = 120 / 60;
+      // 	const secondsPerNode = maxConnectionsPerNode / maxNgrokConnectionsPerSecond;
+      // 	await delay(secondsPerNode * 1.5e3); // fudge factor milliseconds/second
+      // }
     }
+    await delay(connectionSlopDelay);
     console.log(new Date(), 'finished setup');
-  }, nNodes * 4 * perPortalDelay);
+  }, nNodes * perPortalDelay + portalSlopDelay + nNodes * perConnectionDelay + connectionSlopDelay + 1e3);
   for (let index = 0; index < nNodes; index++) {
     it('opened connection ' + index, function () {      
       expect(nodes[index].pc.connectionState).toBe('connected');
@@ -73,6 +79,17 @@ describe("WebRTC capacity", function () {
     it('got data ' + index, async function () {
       expect(await nodes[index].dataReceived).toBe('Welcome!');
     });
+    it('resignals on restartIce ' + index, async function () {
+      const node = nodes[index];
+      expect(node.pc.iceConnectionState).toBe('completed');
+      node.nFetches = 0;
+      node.pc.restartIce();
+      await delay(100); // timing will vary
+      expect(node.pc.iceConnectionState).not.toBe('completed');
+      await delay(2e3); // timing will vary
+      expect(node.pc.iceConnectionState).toBe('completed');
+      expect(node.nFetches).toBeGreaterThan(0); // We will have re-signalled.
+    });
   }
   afterAll(async function () {
     console.log(new Date(), 'starting teardown');

package/spec/webrtcSpec.js

@@ -6,7 +6,16 @@ describe("WebRTC", function () {
   let connections = [];
   describe("direct in-process signaling", function () {
     async function makePair({debug = false, delay = 0, index = 0} = {}) {
-      //const configuration = { iceServers: [] };
+      // Make a pair of WebRTC objects (in the same Javascript process) that transfer signals to each other by calling
+      // respond(signals) on the other of the pair. In a real application, the WebRTC instances would be in different
+      // processes (likely on different devices) and transferSignals would instead involve some sort of InterProcess
+      // Communication or network call, ultimately resulting in the same respond(signals) being called on the other
+      // end, and the resulting signals being transferred back.
+      //
+      // connections[index] will contain {A, B, bothOpen}, where A and B are the two WebRTC, and bothOpen resolves
+      // when A and B are both open (regardless of how they were triggered, which is different for each test).
+      // We also annotate the WebRTC with various flags used in the test, and arranges to set those when the channel
+      // named 'data' is opened.
       const configuration = { iceServers: WebRTC.iceServers };
       const A = new WebRTC({name: `A (impolite) ${index}`, polite: false, debug, configuration});
       const B = new WebRTC({name: `B (polite) ${index}`, polite: true, debug, configuration});
@@ -75,7 +84,11 @@ describe("WebRTC", function () {
       await WebRTC.delay(1); // TODO: This is crazy, but without out, the FIRST connection in chrome hangs!
       return connections[index] = {A, B, bothOpen: Promise.all(promises)};
     }
-    function standardBehavior(setup, {includeConflictCheck = isBrowser, includeSecondChannel = false} = {}) {
+    function standardBehavior(setup, {includeConflictCheck = isBrowser, includeSecondChannel = false, reneg = true} = {}) {
+      // Defines a set of tests, intended to be within a suite.
+      // A beforeAll is created which calls the given setup({index}) nPairs times. setup() is expected to makePair and
+      // open the data channel in some suite-specific way.
+
       // The nPairs does NOT seem to be a reliable way to determine how many webrtc peers can be active in the same Javascript.
       // I have had numbers that work for every one of the cases DESCRIBEd below, and even in combinations,      
       // but it seems to get upset when all are run together, and it seemms to depend on the state of the machine or phases of the moon.
@@ -91,6 +104,7 @@ describe("WebRTC", function () {
       //
       // webrtcCapacitySpec.js may be a better test for capacity.
       const nPairs = 10;
+
       beforeAll(async function () {
         const start = Date.now();
         console.log(new Date(), 'start setup', nPairs, 'pairs');
@@ -110,7 +124,7 @@ describe("WebRTC", function () {
           expect(B.theirs.readyState).toBe('open');
         });
         it(`receives ${index}.`, async function () {
-          const {A, B} = connections[index];    
+          const {A, B} = connections[index];
           await B.gotData;
           expect(B.receivedMessageCount).toBe(A.sentMessageCount);
           await A.gotData;	  
@@ -121,6 +135,34 @@ describe("WebRTC", function () {
           expect(A.sentMessageCount).toBe(1);
           expect(B.sentMessageCount).toBe(1);
         });
+	let waitBefore = Math.random() < 0.5;
+	it(`re-negotiates ${index} waiting to settle ${waitBefore ? 'before' : 'after'} sending.`, async function () {
+	  const {A, B} = connections[index];	    
+	  await A.gotData; // if receive test hasn't fired yet, the set setup might not yet have completed capturing the send count.
+	  await B.gotData;
+
+	  // Capture counts expected by the other tests.
+	  const {sentMessageCount:aSend, receivedMessageCount:aReceive} = A;
+	  const {sentMessageCount:bSend, receivedMessageCount:bReceive} = B;
+
+	  async function reneg(A, B) {
+	    let aIce = A.renegotiate();
+	    // We're supposed to be able to send and receive during renegotiation, so we flip a coin
+	    // as to whether the test will wait before sending or after.
+	    const timeout = 1e3; // NodeJS usually resolves with our side or sometimes the other going to completed, but not browsers.
+	    if (waitBefore) await Promise.race([aIce, B.iceConnected, WebRTC.delay(timeout)]);
+	    const gotData = new Promise(resolve => B.ours.addEventListener('message', e => resolve(e.data)));
+	    A.theirs.send('after');
+	    expect(await gotData).toBe('after');
+	    if (!waitBefore) await Promise.race([aIce, B.iceConnected, WebRTC.delay(timeout)]);
+	  }
+	  await reneg(A, B);
+	  await reneg(B, A);
+
+	  // Restore counts expected by the other tests.
+	  Object.assign(A, {sentMessageCount:aSend, receivedMessageCount:aReceive});
+	  Object.assign(B, {sentMessageCount:bSend, receivedMessageCount:bReceive});	  
+	}, 10e3);
 	if (includeSecondChannel) {
 	  it(`handles second channel ${index}.`, async function () {
 	    const {A, B} = connections[index];
@@ -155,6 +197,9 @@ describe("WebRTC", function () {
 	  let promise = A.close().then(async apc => {
             expect(apc.connectionState).toBe('closed'); // Only on the side that explicitly closed.
             expect(apc.signalingState).toBe('closed');
+
+	    await B.close(); // fixme: B will try to reconnect unless we tell it to stop.
+
 	    const bpc = await B.closed; // Waiting for B to notice.
 	    await B.close(); // Resources are not necessarilly freed when the other side closes. An explicit close() is needed.
             expect(['closed', 'disconnected', 'failed']).toContain(bpc.connectionState);
@@ -168,6 +213,12 @@ describe("WebRTC", function () {
       }, Math.max(30e3, 1e3 * nPairs));
     }
     describe("one side opens", function () {
+      // One of each pair definitively initiates the connection that the other side was waiting for. This can happen
+      // when one peer contacts another out of the blue, or when a client contacts a server or portal.
+      // We test the usual negotiated=true case (where the initiator names the bidirectional channel and the app
+      // arranges for the reciever to actively create a channel with the same app-specific name,
+      // and the negotiated=false case.
+
       describe('non-negotiated', function () {
 	beforeAll(function () {console.log('one-sided non-negotiated'); });
         standardBehavior(async function ({index}) {
@@ -199,6 +250,18 @@ describe("WebRTC", function () {
     });
 
     describe("simultaneous two-sided", function () {
+      // The two sides both attempt to initiate a connection at the same time. This can happen betwen homogeneous peers.
+      // There is a matrix of four possibilities:
+      //
+      // negotiated=true - the usual case, in which the application expects both sides to be be created with the same
+      //   app-specific bidirectional channel name...
+      // negotiatedl=false - meaning that each side is going to create it's own sending channel which will automatically
+      //   have a distinct index (even if the channel name is the same).
+      //
+      // Within these, we test with the "polite" side starting first, or starting second. On the network, we cannot
+      // coordinate which app instance will attempt to initiate connection, but we can arrange for any pair to agree
+      // on which of the two is the "polite" one (e.g., by sort order of their names or some such).
+
       describe("negotiated single full-duplex-channel", function () {
         describe("impolite first", function () {
 	  beforeAll(function () {console.log('two-sided negotiated impolite-first'); });
@@ -207,7 +270,7 @@ describe("WebRTC", function () {
             A.createChannel("data", {negotiated: true});
             B.createChannel("data", {negotiated: true});
             await bothOpen;
-          });
+          }, {reneg: true});
         });
         describe("polite first", function () {
 	  beforeAll(function () {console.log('two-sided negotiated polite-first');});
@@ -217,10 +280,10 @@ describe("WebRTC", function () {
             B.createChannel("data", {negotiated: true});
             A.createChannel("data", {negotiated: true});
             await bothOpen;
-          });
+          }, {reneg: true});
         });
       });
-      describe("non-negotiated dual half-duplex channels", function () {
+      describe("non-negotiated dual half-duplex channels", function () { // fixme: sometimes fail to renegotiate
         const delay = 200;
 	const debug = false;
         describe("impolite first", function () {

package/stun.js

@@ -0,0 +1,52 @@
+const wrtc = (typeof(process) === 'undefined') ? globalThis : (await import('#wrtc')).default;
+
+// function getIPs(stunServer = 'stun:stun.l.google.com:19302') { // Promise external/WAN/public IP addresses for this device.
+//     // This is the equivalent of whatismyip.com and the like, but using the same stun protocol that
+//     // webrtc is using. Alas, the stun protocol itself is UDP and so cannot be fetched from a browser,
+//     // so we use WebRTC itself.
+//     return new Promise((resolve, reject) => {
+//       const addresses = [];
+//       const pc = new wrtc.RTCPeerConnection({ iceServers: [ {urls: stunServer} ] });
+//       const done = () => {
+// 	console.log('done');
+// 	pc.onicecandidateerror = pc.onicegatheringstatechange = pc.onicecandidate = null;
+// 	pc.close();
+// 	resolve(addresses);
+//       };
+//       pc.createDataChannel('');
+//       pc.createOffer()
+// 	.then(offer => pc.setLocalDescription(offer))
+// 	.catch(reject);
+//       pc.onicecandidateerror = e => reject(e);
+//       pc.onicegatheringstatechange = e => (pc.iceGatheringState === 'complete') && done();
+//       pc.onicecandidate = (ice) => {
+// 	console.log(ice.candidate.type);
+// 	if (!ice || !ice.candidate) return done();
+// 	if (ice.candidate.type === 'host') return null;
+// 	return addresses.push(ice.candidate.address);
+//       };
+//     });
+// }
+
+export function getPublicIP(stunServer = "stun:stun.l.google.com:19302") {
+  return new Promise((resolve, reject) => {
+    const pc = new wrtc.RTCPeerConnection({iceServers: [{ urls: stunServer }] });
+    pc.createDataChannel("");
+    pc.onicecandidate = ({candidate}) => {
+      if (!candidate) return;
+      if (candidate.type !== "srflx") return;
+      resolve(candidate.address);
+      pc.onicecandidate = pc.onicecandidateerror = null;
+      pc.close();
+    };
+    pc.onicecandidateerror = reject;
+    pc.createOffer()
+      .then((offer) => pc.setLocalDescription(offer))
+      .catch(reject);
+  });
+}
+
+// Usage
+//await getPublicIP().then(ip => console.log("Public IP:", ip));
+
+