Drums RCWeb Implementation

This document explains how the Drums application leverages RCWeb technology to enable a real-time, collaborative drum machine experience across multiple devices.

1. Architecture Overview

The Drums app uses a symmetric peer-to-peer model similar to the Chat application. All clients join the same room and synchronize their state (the drum grid, BPM, and playback status) directly with each other.

• State Synchronization: Instead of a central server database, the "truth" of the drum sequence lives in the connected clients. When a user toggles a beat, the client broadcasts a drums.setBeatNetwork(...) call to all other peers.
• Structured Messaging: The application uses rc.sendFunctionCall to invoke remote functions. This ensures that arguments (like the drum grid object or BPM integer) are properly serialized and escaped before being executed by other clients.
• Transport Controls: Playback is synchronized using a latency-compensated "Sync Play" mechanism. When a user starts the sequence, the initiator measures the round-trip time (RTT) to other peers and broadcasts a drums.remotePlay command with a calculated wait time for each client, ensuring everyone hears the beat at exactly the same time.

2. Key RCWeb Implementation Patterns

A. Environment Setup

Variables are injected by the RCWeb server into the index.html template:

<script>
    var rc = {
        "version": "${version}",
        "room": "${roomId}",
        // ... other comms properties
    };
</script>

B. Using rc.sendFunctionCall

To synchronize actions, the app defines global functions that are invoked remotely:

// Broadcasting a beat toggle
rc.sendFunctionCall("drums", "drums.setBeatNetwork", row, col, newState);

// Synchronizing the entire grid (e.g. on preset load)
rc.sendFunctionCall("drums", "drums.setGridNetwork", newGrid);

C. Latency-Compensated Sync Play

The app performs a quick "ping-pong" handshake to measure network delay before starting playback:

1. Initiator sends drums.receivePing.
2. Recipients reply with drums.receivePong.
3. Initiator calculates the maximum delay and broadcasts drums.remotePlay with relative wait times.

Summary

The Drums example demonstrates how RCWeb can be used for more than just simple data transfer—it enables complex, time-sensitive collaborative applications by treating remote browser instances as part of a distributed execution environment.