feat: de-duplicate queued messages for not-yet-open channel

docs/react.md

@@ -60,7 +60,7 @@ if (channel.isOpen()) {
 
 > Note: if you or another MUPPET client attempts to send events over a channel before a receiving client is connected, the events will be temporarily held in an in-memory queue in the sender's app (will not disappear).
 >
-> As soon as both apps have connected to the same MuppetChannel, all of these pending events will be "replayed"--sent over the channel--so the receiver can receive them.
+> As soon as both apps have connected to the same MuppetChannel, all of these pending events will be "replayed"--sent over the channel--so the receiver can receive them. Any queued messages with the same `destination` and `eventClass` will be de-duplicated--using only the latest one--to avoid jittery behavior in the receiver when it comes online.
 
 ## Hooks
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noaa-gsl/idsse-muppet",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Connect to, send, and receive data over MUPPET data channels in convenient React interfaces using the MUPPETs protocol",
   "main": "index.js",
   "scripts": {

src/MuppetChannel.js

@@ -313,7 +313,14 @@ class MuppetChannel {
       this.#dataChannel,
     );
     if (!this.isOpen()) {
-      console.warn(`[${this.#clientName}] [${this.room}] Channel not ready to receive data`);
+      console.warn(
+        `[${this.#clientName}] [${this.room}] Channel not ready to receive data. Message queued`,
+      );
+
+      // de-duplicate queue, so recipient app won't try to process successive state changes when it comes online
+      this.#queuedMessages = this.#queuedMessages.filter(
+        (it) => !(it.eventClass === data.eventClass && it.destination === it.destination),
+      );
       this.#queuedMessages.push(data); // stash this message until channel opens (hopefully)
       return false;
     }
@@ -337,7 +344,7 @@ class MuppetChannel {
    * @param {string} requestId (optional) the UUID of the original message that this message is responding to.
    * @returns {object} the message, ready to be sent over WebRTC
    */
-  #createMuppetMessage = (eventClass, event, destination, requestId = null) => ({
+  buildMuppetMessage = (eventClass, event, destination, requestId = null) => ({
     id: crypto.randomUUID(),
     destination,
     requestId: requestId || undefined,
@@ -357,11 +364,11 @@ class MuppetChannel {
    * @returns {boolean} True if message sent successfully.
    */
   sendEvent = ({ eventClass, event = {}, destination = '*', requestId = null }) => {
-    console.log(
+    console.debug(
       `[${this.#clientName}] [${this.room}] Sending MUPPET event ${eventClass} with body`,
       event,
     );
-    const data = this.#createMuppetMessage(eventClass, event, destination, requestId);
+    const data = this.buildMuppetMessage(eventClass, event, destination, requestId);
     return this.sendRawData(data);
   };
 
@@ -383,7 +390,7 @@ class MuppetChannel {
       requestReject = reject;
     });
 
-    const message = this.#createMuppetMessage(eventClass, event, destination);
+    const message = this.buildMuppetMessage(eventClass, event, destination);
     // track this message as expecting a response, saving the resolve() to be invoked by onReceiveMessage
     this.#requests[message.id] = { callback: requestResolve };