RCWeb Files App

The RCWeb Files App (app/files) is a distributed, real-time file sharing application within the RCWeb ecosystem. It demonstrates the Symmetric Pattern, enabling multiple users connected to the same virtual room to securely share and transfer files directly over a peer-to-peer style network without relying on central server storage.

Icon

Screenshot

What it does

• Instant File Sharing: Users can share files by dragging and dropping them into the browser window or using the file selection dialog.
• Distributed Shared View: As soon as a file is added locally, its metadata (name, size, proxy download link) immediately appears in the shared file list of every other participant in the room.
• Direct Peer-to-Peer Transfers: When a user decides to download a shared file, the file's data is transferred directly from the sharing user's browser in chunks. The server strictly acts as a relay buffer and does not retain the files.
• State Synchronization: If a new user joins the room, their app automatically requests the current list of shared files so they are immediately caught up with what is available.
• Easy Room Access: Generates a standard QR Code that users can scan with their mobile devices to instantly launch the app and join the current file-sharing room.

How it works

The core logic resides in script.js and leverages the RCWeb comms.js communication framework.

• UI Interaction & State: Users add files via the native file input or drag-and-drop event listeners (dragEnter, drop). These local File objects are stored in the files array memory. The promptExit() function prevents accidental closing of the tab, which would sever the file streams.
• Broadcasting File Availability: When broadcastFileList() executes, the app dynamically constructs safe proxy URLs (e.g., /x-file/room/client/fileId/fileName). It creates a JavaScript string of fs.addFileLink(...) execution commands and broadcasts it via rc.send(listJs, "files"). When evaluated on remote peers, this updates their UI with download links.
• On-Demand File Chunking: Remote download requests trigger the rc.sendFileChunk(fileId, start, url) callback on the user who originally shared the file. The app slices the requested segment from the local File blob.
• HTTP PUT Streaming: The sliced portion is immediately uploaded to the RCWeb server relay using an XMLHttpRequest (XHR) HTTP PUT operation with specific headers (Content-Type, Content-Range) in sendChunk().
• Peer Discovery Integration: The app listens to rc.onUpdateClients(clients). Whenever a new participant emerges in the connection pool, it triggers fs.requestRefresh(). The room coordinates a debounced fs.refresh() cycle, ensuring the new entrant receives the full broadcastFileList() payload from all active seeders without spamming the network.

Launch RCWeb App