WebRTC CRDT Collaborative Editor

A real-time collaborative text editor using WebRTC for peer-to-peer communication and Conflict-free Replicated Data Types (CRDTs) for consistency.

Features

• Real-time collaborative editing with CRDTs
• WebRTC for direct peer-to-peer connections
• Signaling server for WebRTC connection establishment
• User presence indicators
• Vector clock synchronization
• Document title and content synchronization

Technical Overview

This application demonstrates how to build a distributed, collaborative text editor using:

• Go: Backend signaling server
• WebRTC: For direct peer-to-peer data exchange
• CRDTs: For conflict resolution in distributed editing
• WebSockets: For initial signaling and peer discovery
• Nginx: For serving the frontend static content

Requirements

• Go 1.18+ (for running without Docker)
• Modern web browser with WebRTC support
• Docker and Docker Compose (optional, for containerized deployment)

Running with Docker

The easiest way to run this application is with Docker:

# Build and start the application
docker-compose up -d

# Stop the application
docker-compose down

Once running, access the application at http://localhost

Architecture

The application is split into two services when running with Docker:

1. webrtc-crdt-server: Go-based WebRTC signaling server (port 8080)
2. nginx-frontend: Nginx server hosting the HTML/JS/CSS frontend (port 80)

Nginx is configured to proxy WebSocket connections to the Go server.

Manual Setup

1. Install dependencies

go mod download

2. Run the server

go run main.go

3. Access the application

Open your browser and go to http://localhost:8080

Usage

1. Enter a room name and click "Connect"
2. Share the room name with others you want to collaborate with
3. Start editing the document - changes will be synchronized in real-time
4. User cursors and selections will be shown with different colors

How It Works

1. Signaling Server: Written in Go, handles WebRTC connection establishment
2. WebRTC: Enables direct peer-to-peer connections
3. CRDT Implementation: Ensures consistency across all connected peers
4. Presence System: Tracks user cursors and selections

Project Structure

• main.go: Go signaling server implementation
• index.html: Frontend application with HTML, CSS, and JavaScript
• Dockerfile: For building the Go signaling server
• docker-compose.yml: Orchestrates both the Go server and Nginx frontend
• nginx.conf: Nginx configuration for serving the frontend and proxying WebSocket connections

Development Notes

• The client-side CRDT implementation is integrated into the index.html file
• The signaling server handles only the initial WebRTC connection setup
• Once connected, peers communicate directly without server involvement
• Nginx proxies WebSocket connections to the Go signaling server

License

MIT