jsfiddle/togetherjs
Togetherjs
Togetherjs is a real-time collaboration framework designed to synchronize application state, cursors, and navigation across multiple user sessions. It provides a synchronization tool for shared browsing and a signaling server to facilitate peer-to-peer communication.
The project integrates audio chat and media streaming via peer-to-peer technology, allowing collaborators to engage in live voice communication. It includes a presence and identity manager to map session participants to custom profiles, names, and avatars.
The framework covers a broad surface of collaborative capabilities, including user presence tracking, shared navigation following, and the generation of unique collaboration links. It manages state synchronization through the broadcasting of data to keep UI elements consistent and tracks user interactions by displaying remote mouse cursors and click events.
Features
- Real-Time Collaboration Tools - Provides a framework for real-time collaborative browsing, allowing users to navigate websites and sync cursors together.
- Application State Synchronizations - Keeps UI elements and data consistent across different user clients by broadcasting state changes via JSON messages.
- WebSocket Clients and Servers - Implements a WebSocket-based message bus to transport real-time state updates and user events between clients and the server.
- Signaling Servers - Provides a signaling server to coordinate the initial handshakes required for participants to establish peer-to-peer connections.
- State Broadcasting Systems - Broadcasts JSON messages to all session participants to keep UI elements and data consistent across different clients.
- Collaborative Identity Mapping - Links session participants to application profiles by assigning custom names, avatars, and colors.
- JSON State Synchronization - Uses JSON payloads to broadcast serialized data objects, keeping UI elements and application state consistent across all clients.
- Collaborative Interaction Sync - Shares cursors and edits in real-time so multiple users can interact on the same page together simultaneously.
- Collaborative Room Presence Tracking - Tracks and displays a real-time list of active users within a specific multiplayer collaboration session.
- Interactive Element Synchronization - Implements DOM-element mapping to synchronize cursors and edits across different user browsers in real time.
- Presence and Identity Managers - Implements a system for tracking active users and mapping session participants to custom avatars and profiles.
- Co-browsing Tools - Synchronizes the current URL and page content across different clients to enable joint real-time navigation.
- Presence Tracking - Tracks and displays real-time user activity on a page, mapping participants to specific profiles and avatars.
- Shared Browsing Synchronization - Synchronizes the current page across multiple clients so users can browse the same domain together in real time.
- Real-time Messaging - Enables multi-modal communication by combining instant text messaging and voice chat audio during collaboration.
- Peer-to-Peer Media Libraries - Establishes direct audio and data channels between browsers using WebRTC to reduce server latency.
- Voice Chat Integrations - Integrates real-time peer-to-peer audio chat directly into the web application for collaborator communication.
- P2P Voice Chat - Establishes real-time peer-to-peer voice connections for direct audio interaction between collaborators.
- WebRTC Streaming - Integrates a WebRTC-based system for real-time voice chat and media streaming between collaborators.
- DOM Synchronization - Refreshes the synchronization process to identify and update elements added to the page after the initial load.
- Remote Cursor Tracking - Displays remote mouse cursors and click events to show where other users are focusing on a page.
- Collaboration Link Generators - Provides the ability to generate unique shareable URLs for users to join a specific real-time collaboration session.
- Real-Time DOM Updates - Updates the state of a website across all connected clients simultaneously using real-time DOM updates.
- Collaboration Room Routing - Uses unique identifiers in the web address to group users into isolated real-time collaboration rooms.
