當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Day 26: TogetherJS —— 让我们一起来编程！

發(fā)布時(shí)間：2025/3/21 javascript 58 豆豆

生活随笔收集整理的這篇文章主要介紹了 Day 26: TogetherJS —— 让我们一起来编程！小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

今天的《30天學(xué)習(xí)30種新技術(shù)》挑戰(zhàn)，我打算學(xué)習(xí)一個(gè)源自Mozilla的很酷的JavaScript庫——TogetherJS。幾個(gè)月前，我寫過一個(gè)面向Java 8的在線Java編輯器。今天我將學(xué)習(xí)如何使用TogetherJS來給這個(gè)應(yīng)用增加協(xié)作功能。

TogetherJS是什么？

TogetherJS是一個(gè)開源的HTML5 Javascript庫，提供了用戶間的即時(shí)協(xié)作功能。它同時(shí)通過WebRTC支持了多人間的文字、語音聊天功能。使用TogetherJS，多個(gè)用戶可以在同一頁面上交互，看到對方的光標(biāo)位置，一起瀏覽和編輯一個(gè)站點(diǎn)。TogetherJS支持最新版的Firefox、Chrome和Safari。

TogetherJS Demo

Demo應(yīng)用跑在OpenShift上：http://tryjava-t20.rhcloud.com/

點(diǎn)擊“Start TogetherJS”按鈕，開啟新會話。會有確認(rèn)框提示。

在點(diǎn)擊“I'm Ready”前，用戶可以修改自己的姓名和頭像。

用戶會收到一個(gè)鏈接，他可以把這個(gè)鏈接分享給其他用戶。

我新開一個(gè)瀏覽器，打開邀請鏈接。

第二個(gè)用戶加入之后，可以看到第一個(gè)用戶的所有操作。

第二個(gè)用戶編寫了一個(gè)簡單的Hello World Java 程序。第一個(gè)用戶同樣可以看到第二個(gè)用戶的操作。

第一個(gè)用戶打開聊天窗口，給第二個(gè)用戶發(fā)送了一條信息。

第二個(gè)用戶收到了信息。

第一個(gè)用戶修正了分號問題，第二個(gè)用戶馬上看到了改動(dòng)。

第一個(gè)用戶運(yùn)行了程序，然后結(jié)束了會話。

Github倉庫

今天的示例程序的代碼可以從Github取得。

依賴

我們將使用Harp作為靜態(tài)web服務(wù)器。Harp可以使用NPM安裝。

npm install -g harp

開發(fā)TogetherJS應(yīng)用

創(chuàng)建一個(gè)day26demo目錄，在其中新建一個(gè)index.html文件，內(nèi)容如下：

<!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 <ahref="mailto:shekhargulati84@gmail.com">shekhargulati84@gmail.com</a>.</p><p><a href="https://www.openshift.com/" target="_blank"><imgalt="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。

運(yùn)行Java程序

接著我們在index.html的</body>前添加相應(yīng)的代碼，使用jQuery進(jìn)行POST請求，以便執(zhí)行Java代碼。

添加協(xié)作功能

現(xiàn)在我們將使用TogetherJS添加協(xié)作功能。

在Run Code按鈕旁添加協(xié)作按鈕：

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

刷新一下瀏覽器，你會看到Start TogetherJS按鈕。點(diǎn)擊按鈕后，TogetherJS會初始化庫，顯示opt-in對話框，然后用戶就可以看到別的用戶的操作了。

TogetherJS的會話連接到你啟動(dòng)它的域名。所以如果你的部分站點(diǎn)在別的域名上，用戶們無法跨域交流。https和http的差別也會導(dǎo)致會話無法建立。

自己部署TryJava應(yīng)用

你可以將你自己的TryJava應(yīng)用部署在云端。后端和前端的代碼都是開源的。

將應(yīng)用部署到OpenShift之前，我們需要進(jìn)行一些設(shè)置：

注冊一個(gè)OpenShift賬號。注冊是完全免費(fèi)的，Red Hat給每個(gè)用戶三枚免費(fèi)的Gear,可以用Gear運(yùn)行你的應(yīng)用。在寫作此文的時(shí)候，每個(gè)用戶能免費(fèi)使用總共 1.5 GB 內(nèi)存和 3 GB 硬盤空間。

安裝 rhc客戶端工具。rhc是ruby gem，因此你的機(jī)子上需要裝有 ruby 1.8.7以上版本。只需輸入 sudo gem install rhc即可安裝 rhc 。如果你已經(jīng)安裝過了，確保是最新版。運(yùn)行sudo gem update rhc即可升級。關(guān)于配置rhc命令行工具的詳細(xì)信息，請參考： https://openshift.redhat.com/community/developers/rhc-client-tools-install

使用 rhc 的 setup 命令配置你的 OpenShift 賬號。這個(gè)命令會幫助你創(chuàng)建一個(gè)命名空間，同時(shí)將你的ssh公鑰上傳至 OpenShift 服務(wù)器。

設(shè)置之后，輸入如下命令即可將應(yīng)用部署到 OpenShift：

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

這個(gè)命令將創(chuàng)建應(yīng)用，設(shè)置公開的DNS，創(chuàng)建私有g(shù)it倉庫，最后利用你的Github倉庫中的代碼來部署應(yīng)用。應(yīng)用可以通過 http://tryjava-t20.rhcloud.com/ 訪問。

今天就到這里了。多多反饋。

原文 Day 26: TogetherJS--Let's Code Together
翻譯 SegmentFault

總結(jié)

以上是生活随笔為你收集整理的Day 26: TogetherJS —— 让我们一起来编程！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Machine Learning wee
下一篇： Stanford UFLDL教程微调多