Real-Time Collaboration On Your Website With TogetherJS

It can’t be denied that real-time collaboration has become an important part of the modern web. Google Drive is a great example of how simultaneous, real-time collaboration is an essential way to do work online these days. In applying the same concept, Mozilla Labs introduced their own tool called TogetherJS, a HTML5 based JavaScript library to easily provide real-time collaboration between users.

TogetherJS allows all users involved to see each other’s mouse/cursor position, scroll position and clicks. Synchronization is available for editing forms and playing/pausing videos. For communication purposes, users can also chat using text and audio.

Recommended Reading: Guide To Online Collaborations: Useful Tips, Tools & Apps

Behind TogetherJS

Initially, TogetherJS started as a service for users to collaborate in real time named TowTruck. It was released by Mozilla Labs back in April 2013. But as the product grew beyond its original concept, they decided to change the name.

TogetherJS depends on WebSockets technology for its interactive communication between the different user browsers. There is a hub server for its core implementation which will echo the received messages to all the participants. This is where users can see other’s cursors and scroll positions and clicks. The default hub server is hosted by Mozilla, but if you want, you can also host your own.

For the audio chat features, WebRTC is the thing that helps. If you want to know more about the technology behind it , head over to the technology overview page.

Usage

To show you how to use TogetherJS, I will be using its sample apps. And to show this for diferent users, I will demonstrate this on two different browsers (Chrome and Firefox) simultaneously. Let’s get started!

The first time you start TogetherJS, you will be prompted with a guide wizard. This wizard assists you with all of available features before you get started. You can always skip it at anytime, if you prefer to.

In the guide wizard, set up your name, upload an avatar and change the color of your profile. This is optional, as you can also do this later in the TogetherJS panel.

On the right side, you should see the TogetherJS panel. In this panel, you can update your profile, get the link for your collaboration and chat with text or audio. To invite a friend, easily click on the “Add a friend” menu (as shown below), copy the link then send it to your friend.

Friends who join you will have their avatars show up at the bottom of the panel. From here, anything that you or your friends type, click, move or scroll will be synced to your view.

As you can see below, whenever your friends click or move their mouse, it will be shown on your page with a cursor animation that has their name beside it.

When your friends scroll their own page, their cursor will face downwards, like in the following screenshot (only on Chrome though).

To communicate with your friend, you can use the chat features: either text-based or audio-based chat. But please note that the audio chat feature is still in its experimental phase.

Installation

To install TogetherJS, you just need to add a couple lines of code to your HTML. First, include the following snippet before the closing tag of your body:

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

You can also download the source and host it in your server if you like.

That’s it! Now you have TogetherJS on your site and it will be active after the browser finishes reloading the page. Either way, this only works after users click on the button. Just add the code below wherever you want:

<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>

For more advanced setup and other configurations, please visit the documentation page.

Conclusion

TogetherJS is useful for those who need collaborative features for their web page or web project to keep their online collaborators on the same page. The fact that TogetherJS allows this feature to be available on any site, and across multiple browsers, is a powerful feature that we can take advantage of. There are good examples of its implementation at JSFiddle and Pixelreka that you can check out to see its potential.