Want to add real-time collaboration to your Web Site? Mozilla’s provide TogetherJS tool to do this thing easily. In this article, we are going to see What is Together.js??, How it work??, How to start?? Etc. So lets we start the overview of Together.Js.

What is together.js?

TogetherJS is a service you add to an existing website to add real-time collaboration. This project is sponsored by the Mozilla Foundation. Mozilla has been developing and releasing a growing number of interesting open-source tools during the last few years, of which TogetherJS is one of the best and most recent examples. Using the Together.js tool two or more visitors on a website, they can see  every task of each other’s like mouse cursor clicks, both of each other position, accessing document files, watching each other’s browsing and each other working, edit forms together, watch videos together, and chat via audio and WebRTC.

Actually, This service is included by the website owner, and website or web applications can customize and configure aspects of TogetherJS behavior on the site.  When a user visits your site, and they’ll be able to activate the togetherjs service tool and send a link to their friend to start collaborating on the website.

Features of TogetherJs:

  • Do the Audio chat using WebRTC
  • Normal Text chat
  • See each other cursor and clicks position
  • See Videos with Plays, Pause, Sound Volume etc.
  • Continue sessions across multiple pages on a site
  • See scrolling position
  • See persons visited pages

How to Start TogetherJs Service?

If you want to start TogetherJs Service then you must be do two thing on your site. First thing JavaScripts:

       <script>

        // TogetherJS configuration would go here, but we’ll talk about that

        // later

       </script>

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

     </script>

You should put that above example wherever you want before </body>.

Then the next step is that put button on your site that lets a user start TogetherJS:

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

Another one is that  if you don’t like onclick:

       <button id=”start-togetherjs”>Start TogetherJS</button>

       <script>

       $(function () {

       $(“#start-togetherjs”).click(TogetherJS);

       });

     </script>

Thats nothing but TogetherJS() will start the tool, or stop the tool if it is already started.

Another thing is that if you don’t want to declare the “Start TogetherJS” button on the site then, you should put the togetherjs-min.js script on every page in your site. If the script is on a page then two people can collaborate on that page.

Suppose if you forget it on a page and then someone else visit to that page while in a TogetherJS session they will essentially go “offline” until they come back to another page.

Which is the best technology in TogetherJs?

WebRTC is the best technology used in TogetherJs. It is a free, open project that provides browsers with RTC-Real-Time Communications capabilities via simple APIs. It is used only for audio chat, but not otherwise used in TogetherJs.  By using WebRTC to send data directly to other browsers without any server. Unfortunately you still need a server to establish the connection, it only supports one-to-one connections, and that support is limited to only some browsers and browser versions. WebRTC supported to the browser such as Chrome, Opera, Mozilla, and FireFox etc.