Browsing together with TogetherJS

Mozilla recently released TogetherJS, a JavaScript library that allows users to engage in a kind of real-time "collaborative browsing" session—in which two or more people on separate web browsers can see each other's cursor position and movements, as well as simultaneously interact with the page itself. Perhaps the most obvious uses for the feature are concurrent editing or review of a page; each participant could see what the others are doing and (to some degree) looking at. But the tool can also be tied in to other features (such as WebRTC chat), which opens up still more possibilities.

TogetherJS was announced on the Mozilla Hacks blog on October 16. The announcement highlights the fact that enabling TogetherJS on a page requires little-to-no modification of the page's existing contents. Getting started with the basic features involves adding a reference to the TogetherJS script:

    <script src="https://togetherjs.com/togetherjs.js"></script>

and including a button (or, presumably, some other control) that starts the collaborative session:

    <button id="collaborate" type="button">Collaborate</button>
    <script>
    document.getElementById("collaborate")
      .addEventListener("click", TogetherJS, false);
    </script>

At this most basic level, starting up TogetherJS in the browser initiates a WebSocket connection to the TogetherJS.com hub server, which relays activity messages back and forth between all of the connected clients, and launches a floating toolbar to the right side of the page. Anyone who is familiar with Etherpad or its descendants will recognize the basic principle: the users connected to the session appear as generic, color-coded avatars with usernames assigned automatically. Each user can modify his or her own username and avatar image by clicking on the gear icon.

But while Etherpad-style collaboration shows only the text cursor of each connected user, TogetherJS shows the mouse cursor as well—color-coded to match each user, and rendered as a cartoon hand (reminiscent of "Mickey mitts" as they are known to animation fans). Mouse movement is shown in real time—or as close to it as the connection allows. Mouse clicks are also shown, as a flashing circle underneath the clicker's cursor after each mouseup() event. Moreover, TogetherJS tracks changes in the state of most interactive DOM elements: buttons, checkboxes, fields, text areas, and so on. The floating toolbar also holds an "Invite a friend" button that lets the user copy the URL of session and send it to another person over email, instant message, or other means.

The messages that TogetherJS relays through the server are JSON objects. In addition to the cursor-movement and text-entry messages, the utility can relay text messages between users, which amounts to an ad-hoc chat system for the page. The toolbar also allows users to start an audio-only WebRTC media channel for verbal chat, although that feature is technically independent of TogetherJS itself.

What users get out of the vanilla TogetherJS experience is, in a lot of ways, the same as a collaborative editor like Etherpad or Google Docs—except that it can work on any site, and the collaboration feature can synchronize actions taken on any DOM objects in the page, not just the editor's shared document. This makes TogetherJS a powerful tool for viewing and editing a page remotely, but there are some important distinctions between its approach and that of the Etherpad-style collaboration services.

First, TogetherJS only relays messages between two browser windows; no state is changed on the server's copy itself unless the web application is retooled to support custom TogetherJS messages. Second, TogetherJS works only for the current browser session. Persistent changes, such as to a document in a collaborative editor like Etherpad, are outside of the project's scope. Third, the hub server keeps track of pages by URL, so if the web page in question presents a different URL to each visitor, those visitors will not be able to collaborate. Finally, although TogetherJS synchronizes most DOM elements, there are some that it does not, such as the <canvas> element. Proprietary plugin content like Flash movies cannot easily be synchronized, of course, but playback of <audio> and <video> elements can.

In an October 31 blog post, developer Ian Bicking explains the decision to not support document persistence and other "high-end" features as an attempt to make TogetherJS as broadly applicable as possible. Building a more feature-rich tool for specific use cases requires experts in those use cases, he said, but it also limits how the resulting code can be used:

On the other hand, Mozilla did go out of its way to include support for several popular JavaScript utilities, such as the CodeMirror and Ace editing components. Mozilla also provides help within the TogetherJS documentation for instrumenting other web applications for more complex synchronization. All TogetherJS messages are namespaced, so adding custom application-specific message types is not complicated.

It is also not necessary to use Mozilla's public TogetherJS.com site as the hub server. The code for the server (as well as for the client-side JavaScript) is published on GitHub under the MPL 2.0.

The main TogetherJS site showcases three example sites: a to-do list, a simple drawing application, and a Mad Libs game. There are more substantive ways to field test the tool as well, including the JSFiddle online code editor, Mozilla's Thimble web page editor, and a pair of plugins for WordPress.

Much as Bicking described, the simplicity of TogetherJS may be its best feature. There are, after all, a plethora of collaborative code editors available on the web today. Few of them distinguish themselves with features that the others do not share; adding one more to the list would not be a compelling move for Mozilla. But TogetherJS might make it possible for all sorts of other sites to make use of real-time collaboration—anyone who has attempted to review a site design, for example, knows how frustrating it can be to try explaining a design problem via email (and how time-consuming it can be to assemble a collection of screenshots).

Beyond merely working on sites themselves, however, the TogetherJS team has visions of its code enabling new social interactions with web pages at their center; Bicking described it as "cobrowsing" in another post. Regardless of whether that term works its way into the lexicon, though, one thing seems clear: TogetherJS offers a lot of possibility simply by being an ad-hoc service. No user accounts are necessary, and no coordination is required between participants other than sharing a URL. That low barrier of entry is good news for users as well as site owners.