45 lines
1.5 KiB
Markdown
45 lines
1.5 KiB
Markdown
# Chat — Minimal P2P chat
|
||
|
||
## What this example does
|
||
|
||
Minimal P2P chat: join a topic, see peer count, and send and receive text messages. Uses only raw connection writes and no Protomux or Data API.
|
||
|
||
## Prerequisites
|
||
|
||
Install the [BridgeSwarm extension and native host](../../README.md#easy-install-recommended) before opening this example.
|
||
|
||
## How to run
|
||
|
||
**Recommended:** Extension Settings → enable **Examples server**, then open the demo URL below.
|
||
|
||
Dev alternative from the repo root:
|
||
|
||
```bash
|
||
npm run examples
|
||
```
|
||
|
||
Then open **http://127.0.0.1:4173/chat/** (use two tabs for P2P).
|
||
|
||
Do **not** open `index.html` via `file://` — browsers treat each local file as a unique origin and the demo will fail.
|
||
|
||
## Usage
|
||
|
||
1. Click **Join** (default topic is `bridge-swarm-demo`).
|
||
2. Open the same page in another tab or device and join the same topic.
|
||
3. Type a message and click **Send**; it appears in the other tab’s log.
|
||
4. Click **Leave** when done.
|
||
|
||
## Files in this directory
|
||
|
||
- **index.html** — Page structure and elements (topic input, join/leave/send buttons, log area).
|
||
- **style.css** — Layout and theme (dark background, inputs, buttons, log).
|
||
- **app.js** — BridgeSwarm setup, join/leave/send logic, connection handling and message log.
|
||
|
||
## APIs and concepts
|
||
|
||
- `BridgeSwarm.ready()` — Wait for the injected API.
|
||
- `new BridgeSwarm({ appName })` — Create a swarm.
|
||
- `swarm.join(topic)` / `swarm.leave(topic)` — Topic discovery.
|
||
- `swarm.on('connection', …)` — Peer connections.
|
||
- `conn.write(data)` / `conn.on('data', …)` — Raw messages.
|