Real-Time Collaborative Editor

A simple real-time collaborative text editor built with Rust and WebSockets. Multiple users can edit the same document simultaneously and see each other's changes in real-time.

Features

• Real-time collaboration: Multiple users can edit the same document simultaneously
• WebSocket communication: Fast, bidirectional communication between clients and server
• Cursor position synchronization: See where other users are typing
• Simple web interface: Clean, minimal HTML interface for easy testing

Technologies Used

• Backend: Rust with Warp web framework
• WebSockets: For real-time bidirectional communication
• Frontend: Vanilla HTML/JavaScript
• Async Runtime: Tokio for handling concurrent connections

Prerequisites

• Rust (latest stable version)
• Cargo (comes with Rust)

Installation

1. Clone the repository:

   git clone <repository-url>
   cd real-time-editor

2. Build the project:

   cargo build

Usage

1. Start the server:

   cargo run

2. Open your web browser and navigate to:

   http://127.0.0.1:3030
   

3. Open multiple browser tabs or share the URL with others to test real-time collaboration

Architecture

Backend (src/main.rs)

The server uses the Warp web framework to handle:

• WebSocket connections at /ws endpoint
• Static file serving for the HTML interface
• Broadcast channel to distribute edits to all connected clients

Each client connection:

1. Subscribes to a broadcast channel to receive edits from other users
2. Sends its own edits to the broadcast channel
3. Uses Tokio tasks to handle concurrent send/receive operations

Frontend (static/index.html)

Simple HTML page with:

• A textarea for text editing
• WebSocket client that connects to the server
• Event listeners for input changes
• Real-time update handling from other users

Data Structure

Edits are represented as JSON objects:

{
  "content": "The full text content",
  "cursor_position": 42
}

Project Structure

real-time-editor/
├── src/
│   └── main.rs          # Main server application
├── static/
│   └── index.html       # Web interface
├── Cargo.toml           # Rust dependencies and metadata
├── Cargo.lock           # Lock file for reproducible builds
└── README.md            # This file

Dependencies

• warp: Web application framework for serving HTTP and WebSocket
• tokio: Async runtime for handling concurrent operations
• futures: Async/await utilities
• serde: Serialization/deserialization framework
• serde_json: JSON support for serde

Development

Running in Development Mode

cargo run

Building for Release

cargo build --release

The release binary will be available at target/release/real-time-editor.

Testing

Open multiple browser tabs to http://127.0.0.1:3030 and start typing in different tabs to see real-time synchronization in action.

Limitations & Future Improvements

• No persistence: Edits are not saved to disk
• No user identification: All users are anonymous
• Simple conflict resolution: Last edit wins
• No authentication: Anyone can connect and edit

Potential enhancements:

• Add user authentication and identification
• Implement proper operational transformation for conflict resolution
• Add document persistence (database or file system)
• Support for multiple documents/rooms
• Rich text editing capabilities
• User presence indicators

License

[Add your license here]

Contributing

[Add contribution guidelines here]