编者注：我们发现了风趣的系列文章《30天进修30种新技术》，正在翻译，一天一篇更新，年末礼包。下面是第 26 天的内容。
本日的《30天进修30种新技术》应战，我盘算进修一个源自Mozilla的很酷的JavaScript库——TogetherJS。几个月前，我写过一个面向Java 8的在线Java编辑器。本日我将进修怎样运用TogetherJS来给这个运用增添合作功用。
TogetherJS是什么？
TogetherJS是一个开源的HTML5 Javascript库，供应了用户间的立即合作功用。它同时经由过程WebRTC支撑了多人世的笔墨、语音谈天功用。运用TogetherJS，多个用户能够在统一页面上交互，看到对方的光标位置，一同阅读和编辑一个站点。TogetherJS支撑最新版的Firefox、Chrome和Safari。
TogetherJS Demo
Demo运用跑在OpenShift上：http://tryjava-t20.rhcloud.com/
点击“Start TogetherJS”按钮，开启新会话。会有确认框提醒。
在点击“I’m Ready”前，用户能够修改本身的姓名和头像。
用户会收到一个链接，他能够把这个链接分享给其他用户。
我新开一个阅读器，翻开约请链接。
第二个用户到场以后，能够看到第一个用户的一切操纵。
第二个用户编写了一个简朴的Hello World Java 顺序。第一个用户一样能够看到第二个用户的操纵。
第一个用户翻开谈天窗口，给第二个用户发送了一条信息。
第二个用户收到了信息。
第一个用户修改了分号题目，第二个用户立时看到了修改。
第一个用户运转了顺序，然后完毕了会话。
Github堆栈
本日的示例顺序的代码能够从Github获得。
依靠
我们将运用Harp作为静态web服务器。Harp能够运用NPM装置。
npm install -g harp
开辟TogetherJS运用
竖立一个day26demo目次，在其中新建一个index.html文件，内容以下：
<!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>© 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:shekhargulati84@gmail.com">shekhargulati84@gmail.com</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>
我们运用了Twitter Bootstrap 3、jQuery和CodeMirror。
运转Java顺序
接着我们在index.html的</body>前增加响应的代码，运用jQuery举行POST要求，以便实行Java代码。
<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>
增加合作功用
如今我们将运用TogetherJS增加合作功用。
<script src="//togetherjs.com/togetherjs-min.js"></script>
在Run Code按钮旁增加合作按钮：
<button class="btn btn-info" onclick="TogetherJS(this); return false;">Start TogetherJS</button>
革新一下阅读器，你会看到Start TogetherJS按钮。点击按钮后，TogetherJS会初始化库，显现opt-in对话框，然后用户就能够看到别的用户的操纵了。
TogetherJS的会话衔接到你启动它的域名。所以假如你的部份站点在别的域名上，用户们没法跨域交换。https和http的差异也会致使会话没法竖立。
本身布置TryJava运用
你能够将你本身的TryJava运用布置在云端。后端和前端的代码都是开源的。
将运用布置到OpenShift之前，我们须要举行一些设置：
注册一个OpenShift账号。注册是完全免费的，Red Hat给每一个用户三枚免费的Gear,能够用Gear运转你的运用。在写作此文的时刻，每一个用户能免费运用统共 1.5 GB 内存和 3 GB 硬盘空间。
装置 rhc客户端东西。
rhc是ruby gem，因而你的机子上须要装有 ruby 1.8.7以上版本。 只需输入sudo gem install rhc即可装置 rhc 。假如你已装置过了，确保是最新版。运转sudo gem update rhc即可晋级。关于设置rhc敕令行东西的详细信息，请参考： https://openshift.redhat.com/community/developers/rhc-client-tools-install运用 rhc 的 setup 敕令设置你的 OpenShift 账号。这个敕令会协助你竖立一个定名空间，同时将你的ssh公钥上传至 OpenShift 服务器。
设置以后，输入以下敕令即可将运用布置到 OpenShift：
rhc create-app tryjava diy mogodb-2 --from-code=https://github.com/shekhargulati/tryjava.git
这个敕令将竖立运用，设置公然的DNS，竖立私有git堆栈，末了应用你的Github堆栈中的代码来布置运用。运用能够经由过程 http://tryjava-t20.rhcloud.com/ 接见。
本日就到这里了。多多反应。
