# Collaboration Framework

## Content

**Collaboration Framework** is a JavaScript framework enabling real-time multi-user collaboration through bidirectional communication and core synchronization features. It includes the following modules:

* `js-collaboration`: The core communication framework, providing real-time data synchronization and message broadcasting.
* `js-collaboration-ot`: Operational Transformation (OT) add-on module, supporting multi-user collaborative editing and conflict resolution.
* `js-collaboration-presence`: User presence add-on module, supporting real-time user status sharing.

## Use Cases

* Multi-user collaborative document editing (rich text, spreadsheet, code)
* Real-time chat synchronization
* Collaborative whiteboards and design tools
* Applications demanding real-time multi-user interaction

## Architecture

As illustrated in the diagram below, the collaboration framework utilizes a standard **client-server** architecture.​​ This design adheres to real-time collaborative system patterns, coordinating component operations through a message-passing mechanism.​
![architecture1](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/architecture1.f096bb.png)
This framework can be extended to a collaborative framework for specific functions, such as `spread-sheets-collaborative` and `quillis-collaboration`.
![architecture2](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/architecture2.b53467.png)

### js-collaboration

[js-collaboration](/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration) provides real-time data synchronization via WebSocket, enabling bidirectional communication between the client and the server.
**Core Features**

* **Bidirectional Communication**: Supports bidirectional message transmission between the client and the server.
* **Room Management:** Enables multi-user collaboration through isolated rooms.
* **Message Broadcasting**: Enables broadcasting messages within the same room for real-time notifications.
* **Automatic Reconnection**: Provides heartbeat detection and automatic reconnection functionality in case of disconnection.
* **Middleware and Hooks**: Supports the insertion of custom logic into the connection and message processing workflows.

**Npm Packages**
`js-collaboration` has been encapsulated as standard npm packages, supporting decoupled deployment across client-server environments.​​

* server: `@mescius/js-collaboration`
* client: `@mescius/js-collaboration-client`

### js-collaboration-ot

[js-collaboration-ot](/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration-ot) is based on **Operational Transformation (OT)** technology, enabling multiple users to edit the same model simultaneously.
**Core Features**

* **Custom OT Types:** Allows developers to define custom operation types to meet diverse business requirements.
* **Data Persistence:** Provides adapter interfaces for integration with database storage.
* **Fragment Mechanism:** Enhances synchronization performance for large documents.
* **Conflict Resolution:** Ensures data consistency through OT algorithms.
* **Middleware and Hooks:** Supports the insertion of logic such as validation and logging into the collaboration workflow.

**Npm Packages**
`js-collaboration-ot` has been encapsulated as standard npm packages, supporting decoupled deployment across client-server environments.​​

* server: `@mescius/js-collaboration-ot`
* client: `@mescius/js-collaboration-ot-client`

We provides two standardized database adapter implementations.​

* PostgreSQL: `@mescius/js-collaboration-ot-postgres`
* Sqlite3: `@mescius/js-collaboration-ot-sqlite`

### js-collaboration-presence

[js-collaboration-presence](/spreadjs/docs/spreadjs-collaboration-server/collaboration-framework/js-collaboration-presence) enables the sharing of user states in real-time collaboration environments, such as cursor positions, selected regions, and more.
**Core Features**

* **Real-Time User State Sharing:** Supports synchronization of information such as cursor positions and selected regions.
* **Event Listening:** Allows listening for events such as user joining, leaving, and other state updates.

**Use Cases**

* In multi-user document editing, display cursor positions in real time.
* In spreadsheet collaboration, show cells selected by other users.
* In code editors, highlight the editing regions of collaborators.

**Npm Packages**
`js-collaboration-presence` has been encapsulated as standard npm packages, supporting decoupled deployment across client-server environments.​​

* server: `@mescius/js-collaboration-presence`
* client: `@mescius/js-collaboration-presence-client`