1. 技术文章
  2. TogetherJS - 网站实时协作JavaScript库

TogetherJS - 网站实时协作JavaScript库

由 浪尽此生 提交于 2019-11-29 08:58:04

快速开始

通过在页面上包含两件事来快速入门。首先是JavaScript：

<script>
  // TogetherJS configuration would go here, but we'll talk about that
  // later
</script>
<script src="https://togetherjs.com/togetherjs-min.js"></script>

你可以把它放在任何地方; 就在之前</body>。

下一步是在您的网站上放置一个按钮，让用户启动TogetherJS：

<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>

或者如果你不喜欢onclick：

<button id="start-togetherjs">Start TogetherJS</button>
<script>
$(function () {
  $("#start-togetherjs").click(TogetherJS);
});
</script>

调用TogetherJS()将启动该工具，或者如果工具已经启动则停止该工具。

togetherjs-min.js即使您没有包含“Start TogetherJS”按钮，也应该将脚本放在站点的每个页面上。只要脚本在页面上，那么两个人就可以在该页面上进行协作。如果您在页面上忘记了它，那么如果有人在TogetherJS会话中访问该页面，他们将基本上“离线”，直到他们回到另一个页面，包括togetherjs-min.js

请注意，这togetherjs-min.js 不是 TogetherJS的整个代码，它只是一个相当小的文件，可以根据需要加载其余的TogetherJS。您可以将<script>任意位置放在页面上 - 通常在</body>被认为是放置脚本的最佳位置之前。

如果您想深入研究代码，可能需要跳到配置TogetherJS。

技术概述

在本节中，我们将描述TogetherJS的一般工作方式，而不涉及任何代码。如果您已准备好使用TogetherJS并想知道如何操作，请跳到下一部分; 如果您想了解它是如何工作的，或者它是否可以帮助您解决特定用例，那么本节适合您。

TogetherJS的核心是集线器：这是一个会话中的每个人都连接到的服务器，它使用Web套接字向所有参与者发送消息。除了在参与者之间传递消息之外，此服务器不会重写消息或执行任何操作。

WebRTC可用于音频聊天，但不以其他方式使用。我们经常被问到这个问题，因为WebRTC提供的数据通道允许浏览器在没有服务器的情况下直接将数据发送到其他浏览器。不幸的是，你仍然需要一个服务器来建立连接（用于连接浏览器的连接字符串非常笨重），它只支持一对一连接，并且该支持仅限于某些浏览器和浏览器版本。建立连接也明显慢于Web套接字。但也许有一天。

TogetherJS所做的一切都是基于浏览器之间传递的这些消息。它并不要求每个人都在同一个页面上，只需要会话中的每个人都知道要连接到哪个中心URL（URL本质上是会话名称）。人们可以在不同的站点上，但会话URL存储在sessionStorage中，这是一个域的本地（因为我们使用sessionStorage而不是localStorage，它是一个选项卡的本地）。我们没有实现任何技术来跨多个站点共享会话，但唯一的障碍是会话信息的本地存储。

功能构建在此消息传递系统之上。例如，当您移动鼠标时，cursor-update会发送一条消息，给出新的鼠标位置。与您看到消息不在同一页面但忽略它的其他客户端。

大多数功能都直接与DOM配合使用，因此不需要对代码或集成工作进行任何特殊检测。我们尽可能地将消息内容锚定到可能的最具体元素。当使用响应式网页设计时，同一URL上的不同客户端可能会看到不同的内容，但在某种程度上，他们会看到相同的元素，例如鼠标位置将是“正确的”。例如，在移动设备上，您可能会在页面上的不同位置放置一个按钮，但由于光标消息显示“鼠标位于名为#submit”的按钮上方，因此鼠标将位于等效位置。因此，TogetherJS也与分辨率无关。

我们支持表单状态的同步，并且还支持文本字段的操作转换。同样，这全部分层在消息系统之上。

不同的产品，如EtherPad的，在谷歌驱动器的实时API，我们没有在我们的系统中的任何持久性。当两个人在同一页面上时，他们的文本字段是同步的，但我们所做的就是将他们的浏览器状态更改为同步。我们希望通过您的应用程序仍能实现所有持久性。您通常应该像往常一样编写应用程序，并且TogetherJS会在此基础上添加功能。 TogetherJS不会更改您的安全模型，持久性模型或身份验证模型。如果一个用户点击“提交”，那么他们就是保存页面的用户，可能使用典型的POST请求，就好像他们没有使用TogetherJS一样。

TogetherJS依赖于返回同一页面的相同URL。当两个用户位于同一个URL时，我们不会强制该页面相同。例如，一个人可能没有查看页面的权限：在这种情况下，该人仍将获得权限被拒绝的页面，并且将无法跟随第一个人。通常我们会尝试优雅地失败，因此不一致只会降低体验，而不会完全破坏体验。在两个人使用TogetherJS的理想情况下，您可能允许他们看到编辑屏幕，但只对那些可以实际保存这些编辑的人员设置权限限制。

TogetherJS依赖于应用程序来同步其状态。如果您的Web应用程序具有大量动态客户端内容，则这两个用户将不会自动看到相同的内容。TogetherJS与屏幕共享不同：每个人都在自己的普通浏览器环境中运行您的Web应用程序。我们提供的工具可以帮助您同步您的州。

您可以托管自己的集线器，这是TogetherJS唯一的动态服务器端部分。但是您不需要托管自己的服务器，我们托管的服务器完全是通用的，并且能够为多个站点提供服务。虽然如果您的网站产生大量流量，我们可能会想谈谈。

大多数实际代码都在客户端，它是开源的，易于冻结。您可以轻松制作自己的客户端静态副本，因此请确保代码不会从您下面更改，并使您自己在网站上对产品的测试无效。几乎所有客户端更新都不涉及服务器，因此很容易实现版本管理和稳定性。因为TogetherJS不保存任何内容，所以很容易包含在任何开发环境中，只要每个使用它的人都可以访问该站点，就可以在内部网或私有站点上运行它。我们的服务器

配置TogetherJS

如上所述，有几个配置参数。要查看设置及其默认值的确切名单，看看TogetherJS._defaultConfiguration在together.js

有几种配置TogetherJS的方法。我们更喜欢的是在togetherjs(-min).js包含之前设置一个全局变量。每个变量都被命名TogetherJSConfig_*。这使得添加或删除变量变得相当容易。但请注意，一旦togetherjs(-min).js)加载，可能无法遵守这些变量。所以：

<script>
var TogetherJSConfig_something = "foo";
// more config...
</script>
<script src="https://togetherjs.com/togetherjs-min.js"></script>

在加载TogetherJS 之后设置变量的另一种方法是TogetherJS.config("variable", value)。在TogetherJS启动后，某些变量无法更新，但如果是这种情况，那么您应该收到错误。

配置

TogetherJSConfig_siteName：这是您网站的名称。它默认为页面标题，但通常更简洁的标题是合适的。这在一些帮助文本中使用。

TogetherJSConfig_toolName：这是您提供此工具的名称。如果你使用它，那么“TogetherJS”将不在UI中。所以你可能想要使用`TogetherJSConfig_toolName =“Collaboration”。

TogetherJSConfig_hubBase：这就是枢纽所在的地方。集线器是一个简单的服务器，可以在客户端之间来回传递消息。它是TogetherJS唯一真正的服务器组件（除了静态托管的脚本）。这也很无聊。如果您想使用除我们之外的集线器，您可以在此处覆盖它。主要原因是隐私; 虽然我们不看任何流量，但通过自己托管中心，您可以更加确信它是私密的。您会发现具有有效https证书的集线器非常有用，因为WebSockets严格禁止混合使用http / https。

TogetherJSConfig_dontShowClicks：这应该设置为jQuery选择器或设置为true。这将禁用可视单击显示，指示用户已单击已定义的元素。例如：“canvas”，“h1”，“p”等。设置TogetherJSConfig_dontShowClicks = true将全局禁用所有点击。

TogetherJSConfig_cloneClicks：这应该设置为jQuery选择器或设置为true。每当有人点击与此选择器匹配的元素时，该点击将在其他人的浏览器上重复（作为实际点击）。这对于单击通常不执行任何操作但显示或隐藏或切换页面视图的情况非常有用。请注意，切换的任何控件肯定不会在这里工作！如果您有标签按钮，可以显示您可能使用的不同内容TogetherJSConfig_cloneClicks = ".tab"。设置TogetherJSConfig_cloneClicks = true将全局克隆点击次数。

TogetherJSConfig_enableShortcut：如果你想在一个应用程序上尝试TogetherJS，但是不想提出一个“Start TogetherJS”按钮，你可以使用TogetherJSConfig_enableShortcut = true然后一个事件处理程序将会在你点击alt-T时启动TogetherJS alt-T（连续两次！）。当有人打开邀请链接时，TogetherJS仍会自动启动。

TogetherJSConfig_useMinimizedCode：通常，如果您使用，togetherjs.js您将获得未经编码和未组合的代码，每个模块都会延迟加载。如果您使用，togetherjs-min.js您将获得组合代码。但是，如果要更加动态地覆盖它，可以使用此设置。

TogetherJSConfig_findRoom：要查看此操作，请查看示例。此设置将人员分配到房间。如果您使用单个字符串，这将是房间的名称; 例如：TogetherJSConfig_findRoom = "my_site_com_users"。您还可以将人员分配到一系列最大占用空间（我们的示例所做的）：TogetherJSConfig_findRoom = {prefix: "my_site_com_users", max: 5} 注意：如果您更改此设置，请在新选项卡中进行测试（旧的浏览器选项卡会带有会让您感到困惑的会话信息）。

TogetherJSConfig_autoStart：如果为true，则自动启动TogetherJS。注意当会话继续时，TogetherJS已经自动启动，因此如果您只是一直打电话，TogetherJS()那么您可能会导致TogetherJS停止。请注意，您必须将其设置为TogetherJSConfig_autoStart = true，而不是使用TogetherJS.config("autoStart", true)（必须在TogetherJS加载时设置）。任何自动启动会话的人都不会被视为会话创建者。

TogetherJSConfig_suppressJoinConfirmation：当某人被邀请参加某个会话时，系统会询问他们是否想要与其他人一起浏览。将此设置为，true并且不会要求他们确认加入。结合使用时很有用findRoom。

TogetherJSConfig_suppressInvite：当一个人开始一个会话时，通常会弹出一个带有邀请链接的窗口，这样他们就可以将它发送给某人。如果这是真的那么该窗口不会自动弹出（但它仍然可用）。

TogetherJSConfig_inviteFromRoom：这会增加配置文件菜单中的功能，以邀请在另一个房间里闲逛的人（使用TogetherJS）。这有点（但不完全是）“获取帮助”按钮在此站点上的工作方式。这仍然是一个实验性功能。

TogetherJSConfig_includeHashInUrl：当为true（默认为false）时，TogetherJS将整个URL（包括哈希）视为页面的标识符; 也就是说，如果你有一个人在http://example.com/#view1，另一个人在，http://example.com/#view2那么这两个人被认为是完全不同的URL。您希望在单页应用程序中使用此功能，在这些应用程序中，位于相同的基本URL并不意味着两个人正在查看相同的内容。

TogetherJSConfig_disableWebRTC：禁用/删除按钮以通过WebRTC进行音频聊天。

TogetherJSConfig_youtube：如果为true，那么YouTube视频将会同步（即，当一个人播放或暂停视频时，它将为所有人播放）。这也将加载YouTube iframe API。

TogetherJSConfig_ignoreMessages：包含控制台日志记录时将忽略的所有消息的列表。默认为列表[“cursor-update”，“keydown”，“scroll-update”]。如果设置为true，将忽略所有消息。

TogetherJSConfig_ignoreForms：包含将被忽略的所有表单的列表，默认为[“：password”]。如果设置为true，将忽略所有表单。

您可以配置其他挂钩，这些挂钩在Extending TogetherJS中进行了描述。

启动TogetherJS Button

您添加到站点以启动TogetherJS的按钮通常如下所示：

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

  1. 如果您在id整个站点中按下相同的按钮，TogetherJS将知道开始/结束TogetherJS按钮是什么。这不是必需的，但TogetherJS使用它来将控件放大和缩小按钮。

  2. onclick="TogetherJS(this); return false"- 这将启动TogetherJS，并通过传递thisTogetherJS知道它从哪个按钮开始。这可以让它从按钮中动画出来。它也可以正常工作document.getElementById("start-togetherjs").addEventListener("click", TogetherJS, false)

  3. data-end-togetherjs-html是TogetherJS在启动后插入按钮内容的内容。您可以使用它来切换Start to End或您使用的任何语言。作为特殊情况，“Start TogetherJS”更改为“End TogetherJS”。

  4. togetherjs-started当TogetherJS处于活动状态时，该类将添加到按钮中。您可能希望使用此选项将背景颜色设置为红色，以显示它更改为结束会话。

会议范围

TogetherJS会话连接到您启动它们的域（特别是原点）。因此，如果您网站的某个部分位于其他域中，则人们将无法在这些域中进行对话。即使是另一个在http上的https上的页面也会导致会话丢失。我们可能会在某个时候开展这项工作，但如果这是一个问题，请给我们反馈。

关于Audio Chat和WebRTC

实时音频聊天基于WebRTC。这是一种非常新的技术，内置于一些新的浏览器中。

要启用WebRTC，您和您的协作者都需要一个新的浏览器。目前，Firefox Nightly受到支持，我们相信Chrome的最新版本应该可行。

在2013年的某个时候，应该在新的（非实验性）版本的Firefox，Chrome以及Firefox和Chrome for Android中提供对此的支持。

要查看我们通过音频聊天了解的未解决问题的摘要，请参阅此页面。

请注意，某些网络之间的音频聊天不起作用。这些网络需要一个TURN服务器，遗憾的是我们没有分配（并且TURN的完全支持还没有在某些浏览器中登陆）。不幸的是，当网络无法进行聊天时，聊天将无法正常工作 - 我们不会收到错误，也无法告诉您聊天无效的原因。有关进度，请参阅＃327。

扩展TogetherJS

虽然配置涵盖了自定义TogetherJS的一些功能，但您可能还需要将TogetherJS与应用程序集成，或者在客户端之间同步应用程序数据。

配置事件

与其他配置一样，您可以配置我们在togetherjs(-min).js加载之前描述的事件处理程序和挂钩。事件处理程序只是一个不同的微笑。你通常会添加甚至处理程序TogetherJS.on("ready", function () {...})。要做配置：

TogetherJSConfig_on = {
  ready: function () {}
};

或者如果你想逐个设置，你可以这样做：

TogetherJSConfig_on_ready = function () {};

此外，您可能希望添加事件侦听器TogetherJS.hub; 这些都是这样的：

TogetherJS_hub_on = {
  "my-event": function (msg) {
  }
};

沟通渠道

如果您有要在两个客户端之间同步的组件，则需要使用TogetherJS通信通道。这是一个广播频道 - 您发送的任何消息都会发送给会话中的其他人（也可能是任何人），并且包括位于不同页面的人。

所有消息都是具有type属性的JSON对象。自定义应用程序消息将放入其自己的命名空间 因此，假设您希望以同步方式在所有客户端上隐藏或显示元素，并且当元素可见性更改时，在应用内部触发事件，MyApp.emit("visibilityChange", element, isVisible)：

TogetherJSConfig_on_ready = function () {
  MyApp.on("visibilityChange", fireTogetherJSVisibility);
};
TogetherJSConfig_on_close = function () {
  MyApp.off("visibilityChange", fireTogetherJSVisibility);
};

现在，当TogetherJS被激活时，我们会打电话fireTogetherJSVisibility(el, isVisible)。现在我们必须编写该函数：

function fireTogetherJSVisibility(element, isVisible) {
  TogetherJS.send({type: "visibilityChange", isVisible: isVisible, element: element});
}

嗯，这不太对，我们必须发送一个JSON对象，我们无法发送element。相反，我们需要为元素提供标识符。TogetherJS有一个有用的功能，这将要求我们导入elementFinder模块：

function fireTogetherJSVisibility(element, isVisible) {
  var elementFinder = TogetherJS.require("elementFinder");
  var location = elementFinder.elementLocation(element);
  TogetherJS.send({type: "visibilityChange", isVisible: isVisible, element: location});
}

然后我们也必须听取消息。我们可以立即设置此侦听器（不使用ready / close TogetherJS事件），因为当TogetherJS未启用时，事件将不会触发：

TogetherJS.hub.on("visibilityChange", function (msg) {
  var elementFinder = TogetherJS.require("elementFinder");
  // If the element can't be found this will throw an exception:
  var element = elementFinder.findElement(msg.element);
  MyApp.changeVisibility(element, msg.isVisible);
});

这有两个主要问题：当你调用MyApp.changeVisibility它时可能会触发一个visibilityChange事件，这将导致另一个fireTogetherJSVisibility调用。结果可能是也可能不是循环的，但绝对没有效率。另一个问题是，您可以从位于不同URL的对等方获取消息。我们将使用一个简单的全局变量来处理第一种情况，并msg.sameUrl修复第二种情况：

var visibilityChangeFromRemote = false;

function fireTogetherJSVisibility(element, isVisible) {
  if (visibilityChangeFromRemote) {
    return;
  }
  var elementFinder = TogetherJS.require("elementFinder");
  var location = elementFinder.elementLocation(element);
  TogetherJS.send({type: "visibilityChange", isVisible: isVisible, element: location});
}

TogetherJS.hub.on("visibilityChange", function (msg) {
  if (! msg.sameUrl) {
    return;
  }
  var elementFinder = TogetherJS.require("elementFinder");
  // If the element can't be found this will throw an exception:
  var element = elementFinder.findElement(msg.element);
  visibilityChangeFromRemote = true;
  try {
    MyApp.changeVisibility(element, msg.isVisible);
  } finally {
    visibilityChangeFromRemote = false;
  }
});

现在我们已经接近了，除了最后一个问题：当用户在同一页面上时，这些事件会同步所有内容，但可能会有一个后来者，其页面将不会与其他所有内容同步。togetherjs.hello当一个人出现在新页面上时，将触发一个事件，我们可以使用该事件发送我们所有的状态。要做到这一点，我们可以想象MyApp对象有一个函数MyApp.allToggleElements()，它返回一个我们期望同步的元素列表。

TogetherJS.hub.on("togetherjs.hello", function (msg) {
  if (! msg.sameUrl) {
    return;
  }
  MyApp.allToggleElements.forEach(function (el) {
    var isVisible = $(el).is(":visible");
    fireTogetherJSVisibility(el, isVisible);
  });
});

您会注意到多个客户端可能会执行此重置。这对我们来说是一个悬而未决的问题，将来我们将为这种初始化提供更高级别的API。

从jQuery实现这些可见性功能

假设你的应用程序没有所有这些方法，你只是使用普通的'jQuery。以下是各自实现它们的方法; 你只需要开始使用$(el).syncShow()并$(el).syncHide()进行显示和隐藏：

$.fn.syncShow = function () {
  this.show();
  this.trigger("visibilityChange");
};

$.fn.syncHide = function () {
  this.hide();
  this.trigger("visibilityChange");
};

$(document).on("visibilityChange", function () {
  MyApp.emit("visibilityChange", this, $(this).is(":visible"));
});

MyApp.changeVisibility = function (el, isVisible) {
  if (isVisible && ! el.is(":visible")) {
    el.syncShow();
  } else if ((! isVisible) && el.is(":visible")) {
    el.syncHide();
  }
};

设置身份信息

你的应用程序有很好的机会有自己的身份，你知道用户的名字，也许还有一个头像。（如果你没有头像，但确实有电子邮件，你可能想用它来制作一个Gravatar。）

为此，您可以使用某些功能配置TogetherJS：

TogetherJSConfig_getUserName = function () {return 'User Name';};

这将返回用户的名称（或缺口）。如果无法确定名称，则返回null。

TogetherJSConfig_getUserAvatar = function () {return avatarUrl;};

这会返回用户头像的URL。它应该是40px平方。如果你不确定，再次返回null。

TogetherJSConfig_getUserColor = function () {return '#ff00ff';};

这将返回用户表示它们的首选颜色。这应该是CSS颜色。

名称可能会让您感到困惑：您提供的功能是TogetherJS将调用以获取用户的名称，头像和颜色。它不会返回用户通过TogetherJS设置的名称（即可能TogetherJS.require("peers").Self.name）。

如果在页面中更新了这些值中的任何一个（如果您的登录过程不会导致页面重新加载），则调用TogetherJS.refreshUserData()并再次调用相应的getUser*回调。

有关改进此支持的错误，请参阅＃504。

TogetherJS.reinitialize（）

您可以运行此命令以尝试重新初始化TogetherJS在页面加载时初始化的任何内容。特别是如果有新的代码编辑器或视频元素应该同步，但是可以动态添加到页面中，则可以使用它。例如：

$("#content").append('<video src="foo.mov">');
TogetherJS.reinitialize();

TogetherJS活动

该TogetherJS对象是一个事件。它使用的风格TogetherJS.on("event", handler)。可用事件：

  • TogetherJS.on("ready", function () {})：当TogetherJS完全启动时发出。
  • TogetherJS.on("close", function () {})：当TogetherJS关闭时发出。页面只是关闭或在其他地方导航时不会发出此信息。它仅在TogetherJS被特别停止时关闭。

推迟初始化

TogetherJS会尽快自动启动，尤其是在继续会话时。有时这是有问题的，就像一个应用程序在页面加载后引导其所有UI。要推迟此初始化，请定义如下函数TogetherJSConfig_callToStart：

TogetherJSConfig_callToStart = function (callback) {
  MyApp.onload = callback;
};

在此示例中，当MyApp.onload()调用时，TogetherJS将开始初始化自身。请注意，TogetherJS.reinitialize()如果在页面加载后进行大量设置，则调用可能足以满足应用程序的需要。

请帖

有时候，您可能希望在应用内部处理邀请，而不是让用户邀请某人加入TogetherJS。所以通常当这个人开始使用TogetherJS时，你想要找到一些他们想要合作的人，并将TogetherJS链接发送给他们。要获得TogetherJS链接：

TogetherJSConfig_on_ready = function () {
  sendTogetherJSURLToServer(TogetherJS.shareUrl());
};

如果你TogetherJS.shareUrl()在TogetherJS初始化之前调用它将返回null。

进入内脏

你仍然可以在TogetherJS上，即使你不能依靠内部不要在你下面改变。（如果您这样做，建议您部署自己的客户端副本。）

大多数TogetherJS功能都是作为单独的模块实现的，因此应该可以引入自己的模块来执行许多相同的操作。最重要的是session模块，发送和接收消息。

要获取会话模块（或任何模块），您可以在TogetherJS启动后运行它：

var session = TogetherJS.require("session");

这假设模块已经加载......但是一旦TogetherJS启动，这个假设就是正确的。

获取客户端的静态副本

您可能还需要可以自己托管的客户端的静态副本。运行grunt build以创建TogetherJS库的静态副本build/（用于--dest控制输出位置，并--exclude-tests避免在您的版本中包含测试）。

集线器很少变化，所以如果您只是稳定性，那么制作客户端的静态副本将为您完成。强烈建议您使用此选项进行生产！

浏览器支持

TogetherJS适用于相对较新的浏览器。特别是当我们试验我们正在做的事情时，支持旧浏览器会带来更多挑战而不是优势。

我们为TogetherJS确定的最低限度是WebSocket支持。也就是说，我们通常只测试最新版本的Firefox和Chrome，因此更有可能针对旧版浏览器的错误（但请提交这些浏览器的错误 - 我们并不刻意不支持它们）。我们的下一组目标浏览器将是移动浏览器。

支持的浏览器

我们建议使用最新版本的Firefox或Chrome。

如果您希望获得WebRTC支持并使用Firefox，则截至2013年4月，这需要Firefox Nightly（此支持将在未来几个月内转向测试版和发布版）。

我们还没有在移动设备上进行太多测试（还有！），并且不能在那里推荐任何东西。

IE浏览器

使用IE 10，可以支持Internet Explorer（版本9以及之前不支持WebSockets）。但是我们不会在Internet Explorer上定期测试，我们知道我们有活动问题，但并没有尝试修复它们。欢迎提取支持Internet Explorer的请求，但是现在我们不打算解决没有提取请求的Internet Explorer的错误报告。如果Internet Explorer支持对您很重要，我们欢迎您提供反馈。没有任何决定是一成不变的，但我们不想误导你当前的优先事项和意图。

我们需要你的帮助！如果您渴望提供帮助，那么如果您在这里处理其中一个Internet Explorer错误，那就太棒了！

托管Hub服务器

我们有一台服务器，https://hub.togetherjs.com欢迎您使用它与TogetherJS进行点对点通信。但是你可能想拥有自己的东西。服务器相当小而且简单，所以它应该是合理的。请注意，我们并没有真正“完成”关于自托管的故事，因此详细信息可能会发生变化。服务器本身非常稳定。

服务器位于hub/server.js，并且是一个简单的Node.js应用程序。你可以运行它node hub/server.js- 用于node hub/server.js --help查看可用选项。您需要npm install websocket optimist安装websocket库和选项库。

如果要在https站点上使用TogetherJS，则必须在https上托管集线器。我们没有server.js为Node 设置直接执行SSL，因此我们建议使用代理。stunnel是您想要的代理类型的一个示例 - 并非所有代理都支持websockets。

如果要更改服务器绑定的端口或接口，只需运行node hub/server.js -h，它将显示命令行选项以及环境变量。

安装集线器后，需要配置TogetherJS以使用集线器，如：

TogetherJSConfig_hubBase = "https://myhub.com";

如果您对服务器上的确切代码版本感到好奇，那么它应该始终是master上的server.js，您可以通过提取进行仔细检查/server-source。

插件

Firefox中有一个addon /插件。

这并不是任何人使用TogetherJS的“正常”方式，但它是一个开发工具，可以在没有集成togetherjs-min.js自身的网站上尝试TogetherJS 。当您激活插件时（通过附加工具栏中的链接），它只会添加togetherjs-min.js到该选项卡中的每个页面（直到您关闭选项卡或将其关闭）。此外，如果您打开一个链接#&togetherjs=...（共享链接中使用的代码），它将自动为选项卡打开TogetherJS。

安装

一种简单的安装方法就是在Firefox中单击此链接，然后安装插件。您可以通过插件管理器打开或关闭插件。无需重启。

建造

您可以使用Addon-SDK构建插件。安装SDK后，进入addon/目录并运行cfx xpi以创建XPI（打包的插件文件）或cfx run启动安装了插件的Firefox（用于开发）。

将中心服务器部署到Heroku

你需要一个Heroku账户。如果您没有，那么他们的Node.js入门指南是一个很好的起点。

即将发生的事情：我们克隆了回购并在其中创建了一个新的Heroku应用程序。我们需要设置HOST环境变量以使应用程序绑定到0.0.0.0而不是127.0.0.1。它会自动获取PORT变量。我们还需要为应用程序启用WebSockets。然后，推送代码，我们应该好好去！

git clone git@github.com:mozilla/togetherjs.git
cd togetherjs
heroku create
heroku config:add HOST=0.0.0.0
heroku labs:enable websockets
git push heroku master

运行后记下应用程序名称heroku create您可以通过访问http://your-app-name-here.herokuapp.com/status来检查所有内容是否正在运行

获得帮助

IRC /在线聊天

我们在#togetherjs频道上提供irc.mozilla.org。日志在irclog.gr上

如果您不使用IRC，您可以使用kiwiirc快速加入来自网络的聊天。

官网地址：https://togetherjs.com/

demo效果：

标签
TogetherJS
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!