TogetherJS 基于网页在线聊天实时协作 - 文章教程

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

发布于 2018-01-31 字数 3903 浏览 2747 评论 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 里面完成的。

相关资料

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

cs163v

文章 0 评论 0

Mr Rock

文章 0 评论 0