P2P Chat Engine

Architecture

The engine splits communication into two layers: signaling (coordination via Firebase Firestore) and data transfer (via WebRTC RTCDataChannel). Once the peer connection is established, Firebase is no longer involved — all messages travel directly between browsers.

A second class, DirectEngine, eliminates Firebase entirely. It produces raw SDP strings you can share by any means (copy/paste, QR, email) and establishes a direct channel with no server infrastructure.

ChatEngine

ChatEngine uses Firebase Firestore as a rendezvous server. It handles WebRTC offer/answer negotiation and ICE candidate exchange automatically. Once connected, Firebase listeners are preserved only for detecting new joiners (basic mesh support).

import { ChatEngine } from '/Projects/Chat/engine.js';

// Assumes firebase.initializeApp() already called on this page
const engine = new ChatEngine();
engine.init(firebase.firestore());

// Register callbacks before joining
engine.onPeerConnected(peerId => console.log('peer joined:', peerId));
engine.onPeerDisconnected(peerId => console.log('peer left:', peerId));
engine.onMessage((data, peerId) => console.log('message from', peerId, data));

// Host: create a room
await engine.createRoom('my-room-123');

// Guest: join the same room
await engine.joinRoom('my-room-123');

// Once onPeerConnected fires, send data
engine.send({ type: 'chat', text: 'Hello!' });

DirectEngine

DirectEngine generates SDP strings that you exchange with the remote peer through any channel — paste them in a chat, email them, display them as QR codes. No server, no sign-in, no dependency other than a modern browser.

import { DirectEngine } from '/Projects/Chat/engine.js';

// ── Caller side ─────────────────────────────────────────
const caller = new DirectEngine();
caller.onMessage(data => console.log('received:', data));
caller.onPeerConnected(() => console.log('connected!'));

const offerSDP = await caller.createOffer();
// Display offerSDP to user — they copy/share it to callee

// After callee sends back their answer SDP:
await caller.setAnswer(answerSDP);

// ── Callee side ─────────────────────────────────────────
const callee = new DirectEngine();
callee.onMessage(data => console.log('received:', data));

const answerSDP = await callee.createAnswerFor(offerSDP);
// Display answerSDP to user — they share it back to caller

API Reference

ChatEngine

DirectEngine

Usage Examples

Collaborative code editing

engine.onMessage((msg) => {
  if (msg.type === 'edit') {
    editor.applyDelta(msg.delta);
  }
});

editor.onChange(delta => {
  engine.send({ type: 'edit', delta });
});

Sending binary data (file transfer)

// Sender
const buffer = await file.arrayBuffer();
engine.send(buffer);  // ArrayBuffer sent as binary frame

// Receiver
engine.onMessage(data => {
  if (data instanceof ArrayBuffer) {
    const blob = new Blob([data]);
    saveBlob(blob);
  }
});

Data Types

The engine transparently serialises and deserialises data so you can work with native JS types.

Firestore Schema

Only used for signaling. Once connected, Firestore is idle.