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

编者注：我们发现了有趣的系列文章《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文件，内容如下：

    


  

    
      Toggle navigation
      
      
      
    
    TryJava
  


  

    

      
Home
    
   


    

        
TryJava8 -- Free , Online Java 8 Code Editor
        
Write your Java 8 code online anywhere , anytime...

      

    


        

            

                
Run your Java 8 Code
                

                    

                        

                            
                        
                    
                    

                        

                            Run Code
                        
                    
                

            


            


                

                    
Program Output
                    

                

            

        

        


        

            
© Shekhar Gulati 2013

            

                Made with love by Shekhar Gulati. Contact him at [email protected].
            
            

                
            

        

    

    

    

我们使用了Twitter Bootstrap 3、jQuery和CodeMirror。

运行Java程序

接着我们在index.html的前添加相应的代码，使用jQuery进行POST请求，以便执行Java代码。

添加协作功能

现在我们将使用TogetherJS添加协作功能。

在Run Code按钮旁添加协作按钮：

Start TogetherJS

刷新一下浏览器，你会看到Start TogetherJS按钮。点击按钮后，TogetherJS会初始化库，显示opt-in对话框，然后用户就可以看到别的用户的操作了。

TogetherJS的会话连接到你启动它的域名。所以如果你的部分站点在别的域名上，用户们无法跨域交流。https和http的差别也会导致会话无法建立。

自己部署TryJava应用

你可以将你自己的TryJava应用部署在云端。后端和前端的代码都是开源的。

将应用部署到OpenShift之前，我们需要进行一些设置：

1. 注册一个OpenShift账号。注册是完全免费的，Red Hat给每个用户三枚免费的Gear,可以用Gear运行你的应用。在写作此文的时候，每个用户能免费使用总共 1.5 GB 内存和 3 GB 硬盘空间。

2. 安装 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

3. 使用 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/ 访问。

今天就到这里了。多多反馈。

---

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