Controller (c) RCWeb Implementation

This document explains how the Controller application leverages RCWeb technology to send real-time JavaScript instructions to a Viewer.

1. Role in the Asymmetric Pattern

The Control app (c) is the "Sender" in the Asymmetric (Sender/Viewer) pattern. It provides a UI (buttons, textareas, file inputs) for humans to interact with, and converts those interactions into JavaScript strings that actuate change in the Viewer app (v).

2. Key Implementation Features

A. Sending Raw JavaScript

The controller features a raw JavaScript editor that allows sending arbitrary code directly to the viewer:

function sendJavaScriptArea() {
    rc.send(document.getElementById("js").value, "v");
}

B. Media Uploads & Streaming

The controller demonstrates two ways to share files with the viewer via the createDynamicFileUrl helper:

  1. Small Files (Base64): Files smaller than a certain threshold (e.g., 1MB) are converted to Data URLs and sent as part of the JavaScript string.
  2. Large Files (P2P Chunking): Larger files are registered in memory. A special proxy URL is generated (/x-file/...) and sent to the viewer. When the viewer's browser tries to load this URL, the server requests chunks from the controller via rc.sendFileChunk, which are uploaded via PUT requests.

C. Multi-App Orchestration

The controller can "switch" the entire room to a different dedicated RCWeb application (like Spacewar or Drums) by sending a redirect command to all non-controller clients:

function showApp(viewerApp, controlsApp) {
    var viewerAppUrl = "/" + viewerApp + "/?r=" + rc.room;
    var js = "document.location.href='" + viewerAppUrl + "';";
    // Send to all clients except other controllers
    rc.send(js, "!c");
    // Redirect local controller too
    window.location.href = "/" + controlsApp + "/?r=" + rc.room;
}

Summary

The Controller app is a powerful example of how RCWeb can turn a mobile device into a versatile remote for digital signage, games, or collaborative workspaces. By focusing on intent-based messaging (sending JavaScript) rather than state synchronization, it keeps the logic simple and the interaction immediate.