RCWeb Files Pro App

The RCWeb Files Pro App (app/files-pro) is the enhanced, professional-grade version of the standard Files application within the RCWeb ecosystem. It builds upon the Symmetric Pattern to provide real-time, peer-to-peer file sharing while introducing powerful monitoring, analytics, and media preview capabilities.

Icon

Screenshot

What it does

• Instant Peer-to-Peer Sharing: Drag and drop large files to instantly share them natively with all participants in the virtual room, without needing to upload full files to a central repository.
• Advanced Network Monitoring: Features real-time graphical charts that meticulously visualize network upload data rates and peer-to-peer ping latency.
• Upload History Tracking: Keeps a detailed local ledger of which peers requested file segments, aggregating transferred chunk counts, data volumes, and average transmission speeds.
• Integrated Media Previews: Integrates seamlessly with UIkit Lightbox panels, empowering users to immediately preview shared images or stream and seek within shared videos directly inside the browser.
• Dynamic Presence Logging: Maintains a visual legend tracking all connected peers by customizable display names, color-coding them to match their corresponding latency lines on the charts.

How it works

The Pro version augments the foundational comms.js transport logic with sophisticated polling, rate sampling, and rendering subsystems within script.js.

• Enhanced Identity & Polling: The app utilizes broadcastPing() and receiveHelloReply() on a dedicated POLL_INTERVAL_MS loop to discover and map connectedPeers. It assigns a distinct UI color to each discovered client and graphs their round-trip latency (latencyLines[clientId]) using the external SmoothieChart library.
• Chunk Tracking Engine: When a remote user attempts to download a file or stream a video, they trigger rc.sendFileChunk(fileId, start, url). This initiates sendChunk(), which issues an HTTP PUT request and precisely records the metrics into an uploadHistory ledger. Completed requests update the global bytesUploaded counter to fuel the sampleUploadRate() line chart drawing cycle.
• Advanced Media Architecture: The file table intelligently evaluates the contentType property of shared files. The rendering engine creates specialized interaction links (<a class="file-link media-link">). Clicking these fires previewMedia(...), which mounts a dynamic UIkit.lightboxPanel feeding the chunk-proxy URL to native video tags supporting instant playback and seeking.
• State Synchronization & Cleanup: To prevent memory leaks and stale data, the app maintains an automated cleanupPeers() interval block. It gracefully evicts dormant connections that fail to respond within the CLIENT_TIMEOUT_MS window, guaranteeing that visual legends and analytical graphs accurately reflect only the live room participants.

Launch RCWeb App