togetherjs_TogetherJS与您的网站进行实时协作

不可否认， 实时协作已成为现代Web的重要组成部分。 Google云端硬盘很好地说明了实时同步协作是当今在线工作的一种必不可少的方式。 在应用相同的概念时， Mozilla Labs引入了他们自己的名为TogetherJS的工具，该工具是一个基于HTML5JavaScript库，可以轻松提供用户之间的实时协作。

TogetherJS 允许所有参与的用户查看彼此的鼠标/光标位置，滚动位置和单击 。 同步可用于编辑表单和播放/暂停视频。 为了交流，用户还可以使用文本和音频聊天。

TogetherJS背后

最初，TogetherJS最初是作为用户实时协作的服务，名为TowTruck 。 它是由Mozilla Labs在2013年4月发布的。但是随着产品的发展超出其原始概念，他们决定更改名称 。

TogetherJS依靠WebSockets技术在不同用户浏览器之间进行交互通信。 有一个中心服务器用于其核心实现 ，它将把收到的消息回显给所有参与者。 在这里，用户可以看到其他人的光标以及滚动位置和单击。 默认的中心服务器由Mozilla托管，但是如果需要，也可以托管自己的 。

对于音频聊天功能， WebRTC很有帮助 。 如果您想进一步了解其背后的技术，请转到技术概述页面。

用法

为了向您展示如何使用TogetherJS，我将使用其示例应用程序 。 为了向不同的用户展示此内容，我将同时在两种不同的浏览器（Chrome和Firefox）上对此进行展示。 让我们开始吧！

首次启动TogetherJS时，系统会提示您一个向导向导 。 在开始之前，该向导将帮助您使用所有可用功能。 如果愿意，您随时可以随时跳过它。

在向导向导中，设置您的名称，上传头像并更改个人资料的颜色。 这是可选的，因为稍后您也可以在TogetherJS面板中进行此操作。

在右侧，您应该看到TogetherJS面板 。 在此面板中，您可以更新个人资料，获取协作链接以及使用文本或音频聊天。 要邀请朋友，请轻松单击“添加朋友”菜单（如下所示），复制链接，然后将其发送给您的朋友。

加入您的朋友的头像会显示在面板底部。 在这里，您或您的朋友键入，单击，移动或滚动的所有内容都将同步到您的视图。

如下所示，每当您的朋友单击或移动鼠标时，它就会在您的页面上显示，并带有光标动画，其旁边带有他们的名字。

当您的朋友滚动自己的页面时，他们的光标将朝下，如以下屏幕截图所示（但仅适用于Chrome）。

要与您的朋友交流，您可以使用聊天功能：基于文本的聊天或基于音频的聊天。 但是请注意，音频聊天功能仍处于试验阶段 。

安装

要安装TogetherJS，您只需要在HTML中添加几行代码即可。 首先，在您的body的结束标记前添加以下代码段：

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

如果愿意，您还可以下载源并将其托管在服务器中。

而已！ 现在，您的网站上已有TogetherJS，在浏览器完成重新加载页面后，它将处于活动状态。 无论哪种方式，这仅在用户单击按钮后才起作用。 只需将代码添加到以下任意位置：

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

有关更高级的设置和其他配置，请访问文档页面 。

结论

TogetherJS对于需要其网页或Web项目具有协作功能以将其在线协作者保持在同一页面上的用户很有用。 TogetherJS允许此功能在任何站点上以及跨多个浏览器使用的事实，是我们可以利用的强大功能。 在JSFiddle和Pixelreka上有很好的实现它的示例，您可以查看一下它的潜力。

翻译自: https://www.hongkiat.com/blog/togetherjs-real-time-collaboration/