demo.js

/* eslint-env browser */

let pc = new RTCPeerConnection({
    iceServers: [
        {
            urls: "stun:stun.l.google.com:19302"
        }
    ]
});
let log = msg => {
    document.getElementById("logs").innerHTML += msg + "<br>";
};

///////////////////////////////
// reproduction modification //
///////////////////////////////

const rand15 = _ => Math.random().toString(16);

let small = rand15() + rand15();

let large = "";
for (const _ of Array(4000)) {
    large += rand15();
}

// small is <= 30 characters
// large is <= 60000 characters

// Send a small message at 10Hz with a timeout
let ttlSent = 0;
let ttl = pc.createDataChannel("ttl", {
    id: 0,
    negotiated: true,
    ordered: false,
    maxPacketLifeTime: 300
});
setInterval(() => {
    if (ttl.readyState === "open") {
        ttl.send(small);
        ttlSent += 1;
    }
}, 100);

// Send a small message every 2 seconds reliably
let reliableSent = 0;
let reliableRecv = 0;
let reliable = pc.createDataChannel("rel", {
    id: 1,
    negotiated: true,
    ordered: true
});
setInterval(() => {
    if (reliable.readyState === "open") {
        reliable.send(small);
        reliableSent += 1;
    }
}, 2000);
reliable.onmessage = _ => (reliableRecv += 1);

// Receive large messages at 50Hz (from Golang)
let tryOnceRecv = 0;
let tryOnce = pc.createDataChannel("try", {
    id: 2,
    negotiated: true,
    ordered: false,
    maxRetransmits: 0
});
tryOnce.onmessage = _ => (tryOnceRecv += 1);

setInterval(_ => {
    console.log("ttlSent", ttlSent);
    console.log("reliableSent", reliableSent);
    console.log("reliableRecv", reliableRecv);
    console.log("tryOnceRecv", tryOnceRecv);
}, 1000);

ttl.onclose = _ => {
    console.log("ttl closed.");
};
reliable.onclose = _ => {
    console.log("reliable closed.");
};
tryOnce.onclose = _ => {
    console.log("try once closed.");
};

/////////////////////////////////////
/////////////////////////////////////
/////////////////////////////////////

pc.oniceconnectionstatechange = e => log(pc.iceConnectionState);
pc.onicecandidate = event => {
    if (event.candidate === null) {
        document.getElementById("localSessionDescription").value = btoa(
            JSON.stringify(pc.localDescription)
        );
    }
};

pc.onnegotiationneeded = e =>
    pc
        .createOffer()
        .then(d => pc.setLocalDescription(d))
        .catch(log);

window.sendMessage = () => {
    let message = document.getElementById("message").value;
    if (message === "") {
        return alert("Message must not be empty");
    }

    tryOnce.send(message);
};

window.startSession = () => {
    let sd = document.getElementById("remoteSessionDescription").value;
    if (sd === "") {
        return alert("Session Description must not be empty");
    }

    try {
        pc.setRemoteDescription(
            new RTCSessionDescription(JSON.parse(atob(sd)))
        );
    } catch (e) {
        alert(e);
    }
};