Collaboration Framework
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.
This framework can be extended to a collaborative framework for specific functions, such as spread-sheets-collaborative and quillis-collaboration.
js-collaboration
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-collaborationclient:
@mescius/js-collaboration-client
js-collaboration-ot
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-otclient:
@mescius/js-collaboration-ot-client
We provides two standardized database adapter implementations.
PostgreSQL:
@mescius/js-collaboration-ot-postgresSqlite3:
@mescius/js-collaboration-ot-sqlite
js-collaboration-presence
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-presenceclient:
@mescius/js-collaboration-presence-client