Editor’s note: We found an interesting series of articlesLearn 30 New Technologies in 30 Days, is being translated, an update a day, year-end gift package. Here’s day 26.

For today’s Learn 30 New Technologies in 30 Days challenge, I’m going to learn about TogetherJS, a cool JavaScript library from Mozilla. A few months ago, I wrote about an online Java editor for Java 8. Today I’ll learn how to use TogetherJS to add collaboration to the application.

What is TogetherJS?

TogetherJS is an open source HTML5 JavaScript library that provides instant collaboration between users. It also supports multi-person text and voice chat through WebRTC. Using TogetherJS, multiple users can interact on the same page, see each other’s cursor positions, and view and edit a site together. TogetherJS supports the latest versions of Firefox, Chrome and Safari.

TogetherJS Demo

The Demo app runs on OpenShift: http://tryjava-t20.rhcloud.com/

Click the Start TogetherJS button to Start a new session. There will be a confirmation box.

Users can change their name and profile picture before clicking “I’m Ready.”

The user receives a link, which he can share with other users.

I open a new browser and open the invitation link.

After the second user joins, you can see all the actions of the first user.

The second user writes a simple Hello World Java program. The first user can also see the actions of the second user.

The first user opens the chat window and sends a message to the second user.

The second user receives the message.

The first user fixed the semicolon problem, and the second user saw the change immediately.

The first user runs the program and then ends the session.

Making the warehouse

The code for today’s example program is available on GitHub.

Rely on

We will use HARP as the static Web server. HARP can be installed using NPM.

npm install -g harp

Develop TogetherJS applications

Create a day26demo directory and create a new index.html file with the following contents:

<! doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, Initial -scale=1.0"> <meta name="description" content="Run Java 8 in Cloud"> <meta name="author" content="Shekhar Gulati"> <title>TryJava8 | Run Java 8 in Cloud | Powered by OpenShift</title> <link rel="stylesheet" Href = "/ / cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/codemirror.css" > < script SRC = "/ / cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/codemirror.min.js" > < / script > < script SRC = "/ / cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/addon/edit/matchbrackets.js" > < / script > < script Type = "text/javascript" SRC = "/ / cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/clike/clike.js" > < / script > < style > .CodeMirror { border: 2px inset #dee; } body{ padding-top: 80px; } < / style > < link rel = "stylesheet" href = "/ / netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" > < / head > < body >  <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">TryJava</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="/">Home</a></li> </ul> </div> </nav> <div class="jumbotron container"> <h1>TryJava8 -- Free , Online Java 8 Code Editor</h1> <p>Write your Java 8 code online anywhere , anytime... </p> </div> <div class="container"> <div class="row"> <div class="col-md-7"> <h2>Run your Java 8 Code</h2> <form id="codeForm"> <div class="control-group"> <div class="controls"> <textarea id="code" name="code" placeholder="Write your Java8 Code"></textarea> </div> </div> <div class="control-group"> <div class="controls"> <button type="submit" class="btn btn-success">Run Code</button> </div> </div> </form> </div> <div id="outputBox" class="col-md-4 col-md-offset-1"> <div id="resultRow" class="row"> <h2>Program Output</h2> <div id="result" class="col-md-4"></div> </div> </div> </div> <hr> <footer id="footer"> <p>&copy; Shekhar Gulati 2013</p> <p> Made with love by <a href="https://twitter.com/shekhargulati/" target="_blank">Shekhar Gulati</a>. Contact him at <a href="mailto:[email protected]">[email protected]</a>. </p> <p> <a href="https://www.openshift.com/" target="_blank"><img alt="Powered by OpenShift" src="https://www.openshift.com/sites/default/files/images/powered-transparent-black.png"></a> </p> </footer> </div> < script SRC = "/ / ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" > < / script > < script > var editor = CodeMirror.fromTextArea(document.getElementById("code"), { lineNumbers : true, matchBrackets : true, mode : "text/x-java" }); </script> </body> </html>

We used Twitter Bootstrap 3, jQuery, and CodeError.

Running a Java Program

Next we add code to the of index.html and use jQuery to make a POST request to execute the Java code.

<script type="text/javascript"> $("#codeForm").submit( function(event) { event.preventDefault(); $("#status").empty(); $("#result").empty(); var code = $('textarea').val(); if (! code) { alert("Please write some code"); return; } var data = {code : code}; ` var url = "http://tryjava-t20.rhcloud.com/api/snippets"; $.ajax( url, { data : JSON.stringify(data), crossDomain : true, contentType : 'application/json', type : 'POST', async : true, success : function(result) { $("#resultRow").show(); if (result.compilerOutput ! = 0) { $("#result").append("<p class='text-error'>"+ result.result + "</p>"); } else if (result.verdict === "FAILURE") { $("#result").append("<p class='text-error'>"+ result.result+ "</p>"); } else { $("#result").append("<p class='text-success'>"+ result.result+ "</p>"); } }, error : function() { alert("Something wrong happened on the server"); }}); }); </script>

Adding Collaboration

Now we’ll use TogetherJS to add collaboration capabilities.

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

Add a Collaboration button next to the Run Code button:

<button class="btn btn-info" onclick="TogetherJS(this); return false;" >Start TogetherJS</button>

Refresh the browser and you’ll see the Start TogetherJS button. After clicking a button, TogetherJS initializes the library, displays the opt-in dialog box, and allows users to see what other users do.

TogetherJS’s session connects to the domain from which you started it. So if part of your site is on a different domain, users won’t be able to communicate across domains. The difference between HTTPS and HTTP also causes the session to fail to establish.

Deploy the TryJava application yourself

You can deploy your own TryJava application in the cloud. The back-end and front-end code is open source.

Before deploying our application to OpenShift, we need to set up a few things:

  1. Sign up for an OpenShift account. Registration is completely free, and Red Hat gives each user three free Gear sets that you can use to run your app. At the time of this writing, each user gets a total of 1.5 GB of RAM and 3 GB of hard disk space for free.

  2. Install the RHC client tool. RHC is a Ruby gem, so you need Ruby 1.8.7 or higher on your machine. Simply type sudo gem install RHC to install RHC. If you’ve already installed it, make sure it’s the latest version. Run sudo gem update RHC to upgrade. Detailed information on configuring RHC command-line tool, please refer to: https://openshift.redhat.com/community/developers/rhc-client-tools-install

  3. Use RHC’s setup command to configure your OpenShift account. This command will help you create a namespace and upload your SSH public key to the OpenShift server.

After setting this up, you can deploy the application to OpenShift by typing the following command:

rhc create-app tryjava diy mogodb-2 --from-code=https://github.com/shekhargulati/tryjava.git

This command will create the application, set up the public DNS, create a private Git repository, and deploy the application using the code in your GitHub repository. Applications can be accessed at http://tryjava-t20.rhcloud.com/.

That’s all for today. Give feedback.

Day 26: TogetherJS–Let’s Code Together for SegmentFault