chore: add filter counter (#87)

examples/dogfooding/index.html

@@ -31,6 +31,9 @@ <h3>Waku Dogfooding App</h3>
         <br />
         <label for="numSent">Messages Sent:</label>
         <span id="numSent">0</span>
+        <br />
+        <label for="numReceived">Messages Received:</label>
+        <span id="numReceived">0</span>
       </div>
     </div>
     <div id="container">
@@ -45,4 +48,4 @@ <h3>Received</h3>
     </div>
     <script src="./index.js"></script>
   </body>
-</html>
+</html>

examples/dogfooding/src/index.ts

@@ -29,6 +29,7 @@ const ProtoSequencedMessage = new Type("SequencedMessage")
 
 const sequenceCompletedEvent = new CustomEvent("sequenceCompleted");
 const messageSentEvent = new CustomEvent("messageSent");
+const messageReceivedEvent = new CustomEvent("messageReceived");
 
 const wakuNode = async (): Promise<LightNode> => {
   return await createLightNode({
@@ -165,6 +166,8 @@ export async function app(telemetryClient: TelemetryClient) {
       messageElement.textContent = `Message: ${sequencedMessage.hash} ${sequencedMessage.index} of ${sequencedMessage.total}`;
       messagesReceived.appendChild(messageElement);
       messagesReceived.appendChild(document.createElement("br"));
+
+      document.dispatchEvent(messageReceivedEvent);
     };
 
     await node.filter.subscribe(decoder, subscriptionCallback);
@@ -199,6 +202,15 @@ export async function app(telemetryClient: TelemetryClient) {
     sentMessagesCounter.textContent = sentMessagesCount.toString();
   });
 
+  let receivedMessagesCount = 0;
+  const receivedMessagesCounter = document.getElementById(
+    "numReceived"
+  ) as HTMLSpanElement;
+  document.addEventListener("messageReceived", () => {
+    receivedMessagesCount++;
+    receivedMessagesCounter.textContent = receivedMessagesCount.toString();
+  });
+
   function startSequence() {
     const numMessages = Math.floor(Math.random() * 16) + 5;
     const messagePeriod = Math.floor(Math.random() * 2001) + 5000;
@@ -207,4 +219,4 @@ export async function app(telemetryClient: TelemetryClient) {
 
   document.addEventListener(sequenceCompletedEvent.type, () => startSequence());
   startSequence();
-})();
+})();