TogetherJS

于 2014 年 5 月 27 日

想为您的 Web 应用程序添加实时协作功能吗？Mozilla 的 TogetherJS 值得一看。

20 多年前，蒂姆·伯纳斯-李发明了万维网，他希望物理学家能够通过互联网轻松地相互协作。从那时起，Web 已经发展和演变成一种新的媒介，可以处理从报纸到金融到超市的一切事物。

然而，尽管我们可以惊叹于如今我们在 Web 上可以做的许多事情，但最初推动这一切的协作理念仍然有点像梦想。当然，我们有像 GitHub 这样的站点，它们为 Git 版本控制系统提供了一个 Web 界面。当然，我们也有很多写作系统，例如 WordPress，它允许多人创建（和发布）文档。还有 Facebook，有时也可以被视为协作。

但是，如果您真的仔细想想，我们仍然没有实现最初认为可能通过 Web 实现的那种无缝协作。当然，我可以处理一些事情，交给其他人，然后在他们完成后再次处理，但在线协作工具仍然相对罕见。

也许最复杂和最广泛的基于 Web 的实时协作示例是 Google Docs（现在我认为称为 Google Drive）。的确，Google 的应用程序使您可以将文档存储在云中，正如人们现在喜欢说的那样。而且，只要您可以访问 Web 浏览器，就可以从任何地方读取和写入文档，这当然很方便。但是对我而言，Google Docs 的真正力量在于协作。许多不同的人可以同时处理同一文档，他们甚至可以同时进行。当我不得不与其他人合作在几年前的一个项目中制定预算时，我发现这种协作非常宝贵。我们都可以从自己的计算机上实时编辑同一电子表格，这非常有用。

也有许多 Google 文字处理器的开源替代品。Etherpad 在其作者被 Google 收购几年后作为开源项目发布。您可以下载并在自己的服务器上安装 Etherpad，也可以利用现有的在线 Etherpad 服务器之一。另一个有趣的应用程序是 Ace，这是一个基于浏览器的编程编辑器，具有令人印象深刻的协作能力。

现在，我永远不会声称所有协作都需要实时进行。在开源世界中，有许多人使用电子邮件和 Git 进行异步沟通和协作的例子——通常非常有效，而且没有实时协作似乎提供的花哨功能。

但是，对于我们许多人来说，没有实时组件的协作总是缺少一些东西。如果我不仅能够与某人谈论网站，而且还能够与他们一起实时查看（和编辑其内容），那就太好了。是的，有一些屏幕共享系统，例如 VNC、Join.me 和 ScreenHero，但它们要求您在计算机上安装一些东西并激活它。

这就是为什么我对 Mozilla 基金会赞助的一个名为 TogetherJS 的项目产生了兴趣。顾名思义，TogetherJS 是一个基于 JavaScript 的实时协作系统。在我看来，最令人印象深刻的是 TogetherJS 开箱即用提供的功能，几乎无需配置。它允许您通过向每个页面添加一些简单的元素，使您的网站更具协作性。

因此，在本文中，我想研究 TogetherJS——它的作用、如何将其添加到您自己的站点以及如何甚至将您的应用程序连接到它，从而创建您自己的自定义协作体验。

什么是 TogetherJS？

TogetherJS 是 Mozilla 基金会（以 Firefox 浏览器和 Thunderbird 电子邮件客户端而闻名）赞助的一个项目。在过去的几年中，Mozilla 一直在开发和发布越来越多的有趣的开源工具，TogetherJS 就是最新的例子之一。（例如，最近几个月，Mozilla 还发布了 Persona，它试图让您使用单一身份登录多个站点，而无需将其与营利性公司联系起来。）TogetherJS 由“Mozilla Labs”发布，从名称和描述来看，这表明这是 Mozilla 尝试新想法和技术的地方。

在技术层面上，TogetherJS 是一个客户端-服务器系统。客户端是一个 JavaScript 库——或者更准确地说，是一组 JavaScript 库——加载到 Web 页面上，然后与服务器进行通信。事物发送到的服务器，在 TogetherJS 术语中称为“hub”（中心），在 node.js 下运行，node.js 是过去几年中非常流行的基于 JavaScript 的服务器系统。hub 充当一个简单的交换机操作员，运行 WebSockets，这是一种为实时通信设计的低开销协议。因此，如果有十个人使用 TogetherJS，分成五对协作者，他们都可以使用同一个 hub，但 hub 将确保仅将消息传递给适当的协作者。

在 Web 站点上安装 TogetherJS 非常容易。您首先需要将 TogetherJS 库加载到您的页面中。这可以通过将以下行添加到您的 Web 应用程序中来完成


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

当然，您也可以将 JavaScript 文件托管在您自己的服务器上，无论是出于保密或内部原因，还是您正在修改它，或者您只是不想让它在 Mozilla 发布新版本时每次都升级。

该 JavaScript 文件本身实际上并没有做太多事情。相反，它会检查您是否要下载代码的最小化版本。基于此，它决定是下载单个文件中的所有代码还是单独的文件中的代码。无论您如何下载 TogetherJS，以上行都确保 JavaScript 组件已准备好工作。

但是当然，仅安装 JavaScript 是不够的。需要有人激活然后使用它，这意味着在您的网站上安装一个按钮来执行此操作。再一次，由于 TogetherJS 的构建方式，它非常简单直接。您可以安装以下内容


<button id="start-togetherjs" type="button"
        onclick="TogetherJS(this); 
    ↪return false">Start TogetherJS</button>

换句话说，您创建一个按钮，单击该按钮时，将调用 TogetherJS 函数。当用户单击该按钮时，他们将被添加到 TogetherJS 中。现在，这实际上非常无聊；如果您自己运行 TogetherJS，它似乎不会做太多事情。单击 TogetherJS 按钮后，并在您单击首次介绍后，您将立即获得一个链接，标记为“邀请朋友”。就我个人而言，在我的服务器的 8000 端口上运行此操作，我得到 http://lerner.co.il:8000/togetherjs.html#&togetherjs=oTtEp6wmoF。

如您所见，TogetherJS 特殊邀请 URL 将您拥有的页面的 URL 与唯一标识您的会话的令牌结合在一起。这允许多组人员在同一页面上进行协作，每组人员都存在于自己隔离的环境中。

例如，togetherjs.html（清单 1）是我放在服务器上的一个文件。我在两个单独的浏览器中打开了该页面，一个通过直接 URL 打开，第二个通过使用上面显示的完整 URL 打开，并带有特定的确认令牌。一旦两个浏览器都指向该站点，并且一旦两个用户都确认了他们对协作和使用 TogetherJS 的兴趣，我发现任何一个用户都可以修改“textarea”标记的内容，并且无论谁在键入，更改都会立即反映在另一个人的计算机上。此外，鼠标的每次点击都会以图形方式显示。并且，如果一个用户转到站点上的其他页面（假设 TogetherJS 库也在其他页面上），TogetherJS 将询问另一个用户是否要跟随。

清单 1. togetherjs.html


<!DOCTYPE html>
<html>
  <head>
    <h3>Collaborate!</h3>
  </head>
  <body>
    <h1>Collaborate!</h1>
    <textarea>Hello out there!</textarea>
    <script src="https://togetherjs.com/togetherjs-min.js">
    ↪</script>
    <div id="togetherjs-div">
      <button id="start-togetherjs" type="button"
              onclick="TogetherJS(this); return false"
              data-end-togetherjs-html="End TogetherJS">Start
               ↪TogetherJS</button>
    </div>
  </body>
</html>

配置和自定义

TogetherJS 在安装后立即运行良好，这很棒也很神奇。但是，您也可以通过多种方式配置 TogetherJS，使其反映您的需求。由于 TogetherJS 的加载方式，建议您在加载 TogetherJS 之前进行这些配置设置。例如


<script>
    var TogetherJSConfig_siteName = "Reuven's page";
</script>
<script src="https://togetherjs.com/togetherjs-min.js">

所有配置变量都以 TogetherJSConfig_ 开头，并且名称具有相当的描述性。完整列表位于 TogetherJS 站点 https://togetherjs.com/docs/#configuring-togetherjs 上，但您也可以浏览 together.js 代码，其中包含描述配置变量作用的注释。

例如，如果您决定要运行自己的 hub（即，一个基于 WebSockets 的消息传递服务器），则必须告诉 TogetherJS 在不同的位置查找，使用 TogetherJSConfig_hubBase。

其他有用的配置变量是

TogetherJSConfig_useMinimizedCode：下载 TogetherJS 其余部分的最小化 JavaScript 文件。
TogetherJSConfig_inviteFromRoom：允许您在站点范围内考虑协作。
TogetherJSConfig_youtube：设置后，这意味着如果一个人观看 YouTube 视频，所有人都会观看，并且他们将同步。

但是，TogetherJS 提供的不仅仅是配置和使用它的能力。您还可以扩展它。TogetherJS 用于自身的相同消息传递系统也可供开发人员使用。因此，您可以在当前在此系统上进行协作的所有人员之间发送任意消息，用于任意事件。

为了发送任意 JSON 消息，所有相关方都需要就消息“类型”达成一致——即，您将用于标识消息的字符串。所有各方还需要注册他们对接收此类型消息的兴趣，并定义一个在发送消息时将触发的回调函数。尽管在应用程序的 HTML 或 JavaScript 中执行此操作是有意义的，但也可以在您喜欢的浏览器的 JavaScript 控制台中执行此操作。

首先，您通过告诉 TogetherJS，每当它从 hub 接收到某种类型的消息时（使用 TogetherJS.hub.on 方法），它应该触发特定的回调来注册您对对象的兴趣


TogetherJS.hub.on("reuvenTest",
        function (msg) {
            console.log("message received: " + msg)
 }
);

现在，确实，由于您的消息是一个对象，因此它将在 Web 控制台中打印为“[Object object]”，这确实很糟糕。如果您愿意，可以选择对象中的各个字段，但请确保您知道将要接收哪些字段。

要发送消息，只需调用 TogetherJS.send 以及将发送到此通道上的所有其他 TogetherJS 订阅者的 JSON 对象。没有办法将消息发送到特定计算机；通过这种方式，范例类似于您去年可能在 Pusher 和 PubNub 上看到的实时 Web 更新。

要发送消息，请使用以下内容


TogetherJS.send({type: "reuvenTest", foo: 
 ↪'foofoo', bar: 'barbar'});

我应该注意，这两种方法都向调用者返回 undefined。通常，这不是问题，但是如果您在控制台中工作，则可能不会期望得到这样的响应。

当然，此通信通道的力量在于决定您要通信的内容以及通信传入时应该发生什么。当消息到达时，您是否要更改接收者屏幕上显示某些内容的方式？您是否要为用户显示消息？

结论

TogetherJS 相对较新，我仍处于在需要实时协作的应用程序中使用它的早期阶段。也就是说，TogetherJS 本身就是一个有趣的应用程序，它被设计为一个将继续增长和扩展的平台。借助 TogetherJS，我们朝着将 Web 用于新的和不同的协作形式又迈进了一步。

资源

TogetherJS 的主页是 http://togetherjs.com，但 GitHub 页面是 https://github.com/mozilla/togetherjs。您可以将 TogetherJS 与任何现代浏览器一起使用，这基本上意味着它不支持 Internet Explorer。我能够在 Firefox、Chrome 和 Safari (在 OS X 上) 上正常运行它，没有任何问题。注意：TogetherJS 明确声明它对 Internet Explorer 的支持不是很好，包括最新版本，这意味着如果您在混合环境中使用它，它可能不是一个好的选择。

Reuven M. Lerner 是一位长期从事 Web 开发的开发人员，提供 Python、Git、PostgreSQL 和数据科学方面的培训和咨询服务。他撰写了两本编程电子书（Practice Makes Python 和 Practice Makes Regexp），并发布了面向程序员的免费每周新闻通讯，网址为 http://lerner.co.il/newsletter。Reuven 的 Twitter 账号是 @reuvenmlerner，与妻子和三个孩子住在以色列的莫迪因。

加载 Disqus 评论

操作指南

Web 开发

TogetherJS

近期文章