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

发布于 2018-01-31 23:55:06 字数 3034 浏览 2985 评论 0

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

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 里面完成的。

相关资料

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。