🗨️ SHOGUN-IFRAMECHAT

A modern, serverless, peer-to-peer chat application designed to be embedded anywhere. Powered by GunDB, it requires no backend and ensures your data stays decentralized.

🚀 Key Features

• P2P Synchronization: Direct browser-to-browser communication via GunDB.
• Serverless: No installation, no database to maintain.
• Modern UI: Dark theme, glassmorphism, and responsive design.
• Embeddable: Specifically built to live inside iframes.
• Developer API: Bidirectional communication between the chat and your host page.
• Smart Features: Message deduplication, clickable links, and user flairs.

🛠️ Getting Started

Simply open index.html in your browser. All settings (name, flair, room) are saved locally for ease of use.

📦 Iframe Integration

To embed the chat into your existing web application, the easiest way is to use the NPM package via CDN (like unpkg):

<iframe
  src="https://unpkg.com/[email protected]/index.html?embed=true&room=lobby"
  style="width: 400px; height: 600px; border: 1px solid #333;"
></iframe>

You can also host the index.html and main.js files yourself if you prefer.

URL Parameters

• embed=true: Activates "Embed Mode", hiding the sidebar and header to fit perfectly into your UI.
• room=[roomID]: Automatically joins the specified GunDB room on load.
• peers=[peerList]: A comma-separated list or JSON array of custom GunDB relay peers to connect to. Example: ?peers=http://localhost:8765/gun or ?peers=["http://peer1","http://peer2"].

🔌 Developer API (postMessage)

IFRAME.CHAT provides a robust postMessage API for parent-child communication.

⬆️ Parent-to-Iframe (Control)

Send messages to the iframe to programmatically control the chat.

const chatFrame = document.querySelector("iframe").contentWindow;

// Change user identity
chatFrame.postMessage(
  {
    type: "set-user",
    name: "Neo",
    flair: "ROOT",
  },
  "*",
);

// Change chat room
chatFrame.postMessage(
  {
    type: "set-room",
    room: "security-ops",
  },
  "*",
);

// Send a message as the current user
chatFrame.postMessage(
  {
    type: "send-message",
    text: "Hello from the parent page!",
  },
  "*",
);

⬇️ Iframe-to-Parent (Events)

Listen for events in your parent page to react to chat activity.

window.addEventListener("message", (event) => {
  const data = event.data;

  switch (data.type) {
    case "chat-ready":
      console.log("Chat is initialized and ready!");
      break;
    case "chat-message":
      console.log(`New message from ${data.sender}: ${data.text}`);
      break;
    case "chat-poke":
      alert(`${data.from} is poking you!`);
      break;
  }
});

🎨 Theming & Styles

The chat uses a clean, tech-focused dark theme. When in embed=true mode, it automatically strips away non-essential UI elements (like the room selector and settings panel) to provide a focused chat experience.

📜 Technical Stack

• GunDB: The core P2P graph database.
• Vanilla JS: No heavy frameworks, lightning fast.
• CSS3: Modern variables and animations.

Built with ❤️ for the decentralized web.