[譯] 第二十六天：TogetherJS - 協同開發

時間 2019-11-09

原文原文鏈接

前言

今天的30天挑戰，我決定從Mozilla學習一個很酷的新JavaScript庫，TogetherJS.幾個月前，我給最新版本的Java 8寫了在線Java編輯器。今天，咱們來學習怎樣用TogetherJS給TryJava 8程序添加協同功能。javascript

什麼是TogetherJS?

TogetherJS是基於JavaScript庫的開源HTML5, 容許用戶實時協做開發。它添加了像全部web程序裏的Google Drive同樣的工具。同時它也能讓兩個或多個用戶經過WebRTC文字或語音聊天。使用TogetherJS的多個用戶能夠在同一個頁面上交互，能看到對方的光標，編輯和同時瀏覽一個頁面。最新的Firefox, Chrome和Safari都支持。 css

TogetherJS Demo

爲了展現TogetherJS, 我給TryJava8添加了協同功能，OpenShift有在線程序 http://tryjava-t20.rhcloud.com/. html

要查看程序，在兩個瀏覽器打開，我用了Chrome和Safari.java

接着，點擊Start TogetherJS開始一個新的TogetherJS會議，用戶會看到一個確認窗口，是否準備好開始新會議。node

在點擊I'm Ready前，用戶能夠更換名字和頭像，我都用的真實的。而後，點I'm Ready.jquery

用戶會給出一個連接用於共享給其餘用戶。git

在第二個瀏覽器，打開邀請連接，用戶會獲得一個邀請加入會議的確認窗口。github

加入會議後，被邀用戶能看到邀請者在他屏幕上的任何操做。web

被邀用戶寫一個簡單的Hello World Java程序，邀請者也同時能看到代碼，且不須要任何操做。ajax

邀請這打開聊天窗口發送信息給用戶。

用戶能接收到信息。

一個用戶修冒號錯誤，另外一個用戶能同時獲得更新。

邀請者運行程序，結束TogetherJS會議。

Github倉庫

今天的demo放在github: day26-togetherjs-demo.

前提準備

咱們用Harp做爲靜態web服務器，Harp須要NodeJS和node.js自帶的NPM包管理器。你能夠從官網下載最新的NodeJS,下載和安裝後，咱們用NPM安裝Harp.

$ npm install -g harp

View Code

開發TogetherJS程序

在你機器上新建路徑。

$ mkdir day26demo
$ cd day26demo
$ touch index.html

View Code

以上命令會在你本地建立day26demo目錄，而後建立一個空的index.html文件。

複製如下代碼粘貼到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>&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: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>

View Code

運行Java程序

如今用jQuery添加代碼用來發送POST請求去執行Java代碼，添加如下代碼到index.html後面，</body>以前。

<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>

View Code

添加協同功能

如今用TogetherJS添加協同能力，先加TogetherJS JavaScript庫到index.html.

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

View Code

而後在Run Code按鈕後面添加一個按鈕用於激活協同功能。

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

View Code

而後從新加載瀏覽器，能夠看到Start TogetherJS按鈕，點擊按鈕，TogetherJS(this)會初始化庫，顯示一個確認窗口，而後用戶能看到其餘用戶的光標，點擊，更改表格，和頁面上任何改動。

TogetherJS會議在你開始(特指初始)他們的時候是鏈接到域裏的，因此若是你的其餘頁面在另外一個域裏，用戶不能在不一樣域交互，即便一個是http一個是https.

想配置本身的TryJava程序

能夠，你能夠在雲上部署你私有的TryJava，先後端代碼都是開源的。

在部署到OpenShift上以前，須要先作幾步：

在OpenShift上註冊。OpenShift徹底免費，紅帽給每一個用戶免費提供了3個Gears來運行程序。目前，這個資源分配合計有每人1.5GB內存，3GB磁盤空間。
在本機安裝rhc 客戶端工具，rhc是ruby gem包，因此你須要安裝1.8.7或以上版本的ruby。安裝rhc，輸入 sudo gem install rhc. 若是已經安裝了，確保是最新的，要更新rhc,輸入sudo gem update rhc. 想了解rhc command-line 工具，更多幫助參考 https://www.openshift.com/developers/rhc-client-tools-install.
用rhc setup 命令安裝OpenShift. 執行命令能夠幫你建立空間，上傳ssh 密鑰到OpenShift服務器。

安裝後，能夠運行如下命令建立OpenShift程序。

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

View Code

它會執行全部從建立程序，到設置公共DNS, 到建立git私有倉庫，最後用Github倉庫的代碼發佈應用。程序運行在 http://tryjava-t20.rhcloud.com//

這是今天的內容，繼續給反饋吧。

原文：https://www.openshift.com/blogs/day-26-togetherjs-lets-code-together

1. 打卡第六十二天
2. java第二十六天---javascript
3. 自學第二十六天
4. Android第二十六天
5. 第十六天
6. 學習python課程第二十六天
7. 18.02.23，web學習第六十二天，mybatis第二天，整合spring
8. github 【第二章】Github協同開發
9. 學習Linux的第六十二天
10. python學習第二十六天（HTML）
更多相關文章...
• Lua 協同程序(coroutine) - Lua 教程
• Eclipse 編譯項目 - Eclipse 教程
• PHP開發工具
• RxJava操作符（六）Utility

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。