TogetherJS 基于网页在线聊天实时协作

Z时代
2024-01-10
分类：IT

TogetherJS 是一个免费、开源的 JavaScript 库，来自 Mozilla 实验室，可以实现基于 Web 的在线协作功能。把 TogetherJS 添加到您的网站中，您的用户可以在实时的互相帮助！当然还有很多其它的可以应用的场合，值得一试。

TogetherJS 是由 Mozilla 打造的一款可以给网站添加实时协作功能的 JavaScript 库，TogetherJS 免费并且开源，遵循 MPL 2.0 开源协议，并且托管在 Mozilla 服务器上。

为什么要使用 TogetherJS ？

共同创建：TogetherJS 可以让用户在网站上实现实时协作；

针对 Web 构建：TogetherJS 基于 JavaScript 开发，无需安装软件或插件即可安装使用，对现有页面非常友好，开发者也可以根据自己需求，对其进行自定义添加。

有哪些内置功能？

支持语音或视频聊天：TogetherJS 采用 Web RTC 技术，强调用户交流的重要性；

文本聊天：用户也可以通过即时消息与朋友进行沟通；

用户焦点：用户还可以看到彼此的鼠标动态；

共同浏览：用户可以在同一个域里互相跟随对方去浏览不同的页面；

TogetherJS 让用户可以实时看到对方；

支持内容实时同步。

使用方法

1、把下面这段 JavaScript 代码拷贝到源码中：

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

2、添加 HTML Button 按钮

把上面那段代码拷贝到源码后，再拷贝下面这段代码到网站中：

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

TogetherJS 本地部署

TogetherJS 分为两大部分，一个是 hu 文件夹中的服务端；另外一个是 TogetherJS 文件夹中的 Together.JS 文件，包含了所有的网页文字、语音等操作。

需要预先安装Node.js，可以百度到。

1、去 Githu 中下载 TogetherJS 最新的代码。

https://github.com/mozilla/togetherjs/tree/develop

2、解压之后，在 cmd 的窗口中进入文件夹，假设解压后文件夹是 togetherjs，则 cd togetherjs

3、输入 npm install websocket optimist，下载 websocket 的库，此处需要 Node.js 支持

4、输入node hub/server.js 启动服务，即启动 hu 文件夹中的 server.js

5、官方的体验方式是，在 HTML 中加入以下两段，则可以体验试用：

<script src="https://togetherjs.com/togetherjs-min.js"></script>
<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>

即引用一个 JS，在新建一个 Button 调用函数。如果本地部署，需要在引用 JavaScript 之前先加一段

<script>
TogetherJSConfig_hubBase = "http://localhost:8080";
//这个是你本地服务器地址
</script>

此外 Script 的引用 src 也要改成本地文件夹内的 together.js

6、然后打开浏览器的开发者工具，把 JS 里面的一些资源路径全部改好。（原来的资源路径、扩展名等都是乱的）

7、最后还是会报 assert 错误，打开 together.js 文件，把 https://togetherjs.com/togetherjs-min.js 里面的 togetherjs-min.js 下载下来，用对比工具对比一下，发现时 baseUrl 这个参数的初始值有问题。在 min.js 里面，会从他官网服务器上加载一个 togetherjsPackage.js，但是本地服务器没有，（通过开发者工具找到地址）拷贝下来放到本地服务器，并修改 baseUrl 的地址为本地服务器的。

8、此时打开网页，已经能在本地部署访问了。

9、想抽取语音、视频聊天部分出来，可以去 togetherjsPackage.js 里面找，所有的操作都在这个 JS 里面完成的。