45 lines
1.7 KiB
Markdown
45 lines
1.7 KiB
Markdown
# Whiteboard — Collaborative P2P whiteboard
|
|
|
|
## What this example does
|
|
|
|
Collaborative P2P whiteboard: join a topic, draw on a canvas, and strokes and “Clear board” sync to all peers in real time via JSON messages over raw connections.
|
|
|
|
## 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
|
|
```
|
|
|
|
Open **http://127.0.0.1:4173/whiteboard/** (two tabs for P2P). Do not use `file://`.
|
|
|
|
## Usage
|
|
|
|
1. Click **Join** (default topic is `bridge-swarm-whiteboard`).
|
|
2. Open the same page in another tab or device and join the same topic.
|
|
3. Draw on the canvas; strokes sync to all peers. Use **Clear board** to broadcast a clear to everyone.
|
|
4. Click **Leave** when done.
|
|
|
|
## Files in this directory
|
|
|
|
- **index.html** — Page structure (topic input, join/leave/clear, canvas).
|
|
- **style.css** — Layout and theme (canvas wrap, buttons, status).
|
|
- **app.js** — BridgeSwarm setup, canvas drawing, stroke/draft/clear message protocol and broadcast.
|
|
|
|
## APIs and concepts
|
|
|
|
- Same swarm/connection pattern as chat: `BridgeSwarm.ready()`, `new BridgeSwarm()`, `swarm.join()`, `swarm.on('connection')`, `conn.on('data')`, `conn.write()`.
|
|
- Raw JSON messages: `conn.write(JSON.stringify(msg))` and `conn.on('data')` with `JSON.parse`. Message types: `strokeStart`, `strokeDraft`, `stroke`, `clear`.
|
|
- Canvas 2D for drawing strokes (local and from peers); draft strokes for live preview.
|
|
|
|
## See also
|
|
|
|
- [API reference](../../docs/API-REFERENCE.md) — Page API and host request types.
|