Add identifier to all chatroom messages so we can ignore ourselves

src/connection/XMPP.js

 import { client, xml } from "@xmpp/client"
 import uuid from "uuid"
 
+const GROUP_MESSAGE_ID = "I smell JOJO!" // Ur. Ugly.
 const XMPP_STATUS_ROOM_CREATED = "201" // 201 Created
 
 export default class XMPPConnection extends EventTarget {
@@ -29,6 +30,7 @@ export default class XMPPConnection extends EventTarget {
       {
         type: "groupchat",
         to: channelIdent,
+        id: GROUP_MESSAGE_ID,
       },
       xml("body", {}, message),
     )
@@ -40,7 +42,7 @@ export default class XMPPConnection extends EventTarget {
     const channelIdent = `${this.channel}@conference.xmpp.lets-draw.live`
     const presence = xml(
       "iq",
-      { id: "create1", to: channelIdent, type: "set" },
+      { id: GROUP_MESSAGE_ID, to: channelIdent, type: "set" },
       xml(
         "query",
         { xmlns: "http://jabber.org/protocol/muc#owner" },
@@ -72,6 +74,13 @@ export default class XMPPConnection extends EventTarget {
     })
 
     xmpp.on("stanza", (stanza) => {
+      const stanzaId = stanza.getAttr("id")
+      if (stanzaId && stanzaId === GROUP_MESSAGE_ID) {
+        // Messages sent to the room as echoed back
+        // Ignore our own messages to prevent loops
+        return
+      }
+
       if (stanza.is("message")) {
         this.dispatchEvent(
           new CustomEvent("stanza", {