!!! TogetherJs

看见就非常 2015-04-24

展开全文

TogetherJS是Mozilla实验室发布的一款实时协作工具库，可以在一个现有的网站中添加实时协作功能。可以使两个或两个以上的游客在一个网站或网络应用上，看到对方的鼠标/光标位置，点击，跟踪对方的浏览; 可以一起编辑表单，一起观看影片，并通过音频和WebRTC聊天。

TogetherJS包括的一些功能：

见其他人的鼠标和点击
滚动位置
观看一个人访问的页面
文字聊天
使用WebRTC音频聊天
表单域同步（文本字段，复选框等）
播放/暂停/视频同步轨道
跨多个页面的网站上继续会话

TogetherJs简介

TogetherJs是Mozilla一个免费的开源的js框架，给网站提供交流功能。在你的网站加上TogetherJs，用户可以实时交流。

官网链接： https:///

TogetherJs的sample app

1. Drawing

https:///examples/drawing/

（1）点设置，可以修改名字，头像和头像边框颜色，以及退出。

（2）点”Add a friend” ，可以看到当前聊天室的链接，打开这个链接就可以加入到当前聊天室。

（3）点 “Chat”，可以进行实时对话

（4）在画板中画画其他人都可以看得到，并且可以看到你鼠标的位置和移动过程

上面一排按钮是选择画笔颜色，下面一排按钮UserColor不知道是什么，其余分别是画笔加粗，清除画板，画笔减细，橡皮擦

还有一些其它的examples,在首页看到的并不全，这里列一下：

friendlycode: https:///examples/friendlycode/

madlibs: https:///examples/madlibs/

persona: https:///examples/persona/ 跟用户认证有关

todo: https:///examples/todo/

youtube: https:///examples/youtube/

TogetherJs Documentation 文档

https:///docs/

Quick Start 快速开始

在你的页面加上两个东西就可以使用TogetherJs了

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

和

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

或者

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

你需要在你的网站代码每个page里都放togethejs-min.js，即使某个页面上并没有"Start TogetherJS"按钮。只有加上这个script，两个人才可以进行交流。

如果某个页面你忘了引入这个script, 那么当用户访问那个页面的时候TogetherJs Session会Offline，直到用户再次返回到其它包含了togetherjs-min.js的页面。

注意togetherjs-min.js不是TogetherJS的完整代码，所以如果你不想用

https:///togetherjs-min.js

的方式引入，直接在浏览器中输入这个网址想把js拷下来放到本地，会报错的。

解决方法是不用togetherjs-min.js，而使用 https:///togetherjs.js

把togetherjs.js拷到本地，是可以成功运行的

源码部署以及Hosting the Hub Server

源码下载地址： https://github.com/mozilla/togetherjs

下载到本地后，通过command line窗口进入根目录，输入npm install （需要安装nodejs)

npm install会把package.json里的依赖包下载到本地，要注意package.json中有一个是通过git clone的方式下载下来的

" websocket-server " : " miksago/node-websocket-server#master " ,

不知道为什么我这里会报错，如果报错，把这一句删掉，后面单独安装，再重新输入npm install

然后继续在根目录输入command命令： npm install websocket optimist

如果前面websocket-server报错，继续输入 npm install node-websocket-server，

然后进入根目录下的node_modules,将node-websocket-server重命名为websocket-server

如果根目录下的node_modules有如下组件，则表示安装依赖包成功

继续在cmd窗口中对togetherjs根目录操作，输入node hub/server.js，

会显示

在浏览器中输入http://127.0.0.1:8080/status，如果显示OK，则表示Hub Server部署成功

这个Hub Server，就是你的togetherjs的服务器，在Quick Start那部分的head里加上

<script>
TogetherJSConfig_hubBase = "https://";
</script>

使用的就是你自己的hub server，而不是togetherjs的

如果嫌每个页面都加这个配置很麻烦，可以直接改togetherjs.js

//var defaultHubBase = "https://hub.";
    var defaultHubBase="http://127.0.0.1:8080";

接下来是客户端网站的部署，可以装一个harp，安装很简单，可以参考： http://segmentfault.com/a/1190000000355181

然后另开一个cmd窗口，进入togetherjs根目录下的site, 输入命令 harp server

在浏览器中输入 http://146.222.94.17:9000/examples/drawing/

如果可以访问就部署成功了

这些examples里的代码有些问题，主要是script没有引入或者引入路径不对

按照我上面讲的Quick Start里复制togetherjs.js的方法把togetherjs.js放到site的根目录下，然后在index.html页面加上

<script src="/togetherjs.js"></script>
    <script src="/js/jquery-1.10.2.min.js"></script>

就可以正常显示了，其它的example也是一样的，如果还是有问题建议用firebug看下是什么错误

Examples/Persona解释

官方文档说，如果你想设置自己的UserName,或者UserAvatar（头像）和UserColor（头像边框的颜色）,更改以下几个配置

TogetherJSConfig_getUserName = function () {return 'User Name';};
TogetherJSConfig_getUserAvatar = function () {return avatarUrl;};
TogetherJSConfig_getUserColor = function () {return '#ff00ff';};

如果更新了这些value，但是又不想页面reload，那么请调用 TogetherJS.refreshUserData()

官网上讲的很泛，看不出来什么，想具体了解可以参考 exapmles/persona

persona里关键部分的代码我解释一下

首先有三个button，一个Login, 一个Logout和一个Collaborate

点了login后，会调用

navigator.id.request();

navigator.id.watch({
    onlogin: function (assertion) {
      assertion = assertion.replace(/-/g, "+");
      assertion = assertion.replace(/_/g, "/");
      var parts = assertion.split(/\./g);
      var data = JSON.parse(atob(parts[1]));
      USER = data.principal.email;
      $("#logout").text("Logged in: " + USER);
      $("#login").hide();
      $("#logout").show();
      TogetherJS.refreshUserData();
    }
}）；

关于navigator的代码是跟

<script src="https://login./include.js"></script>

有关，是根据邮箱注册一个账号的。我觉得这个仅作为参考吧，不用深究，更多场景是跟自己已有的系统登录集成

所以这里面比较有用的是

$("#logout").text("Logged in: " + USER);
      $("#login").hide();
      $("#logout").show();
      TogetherJS.refreshUserData();

在这个页面的script里有一个全局变量USER，记录了用户信息，当登录成功后讲logout按钮显示为Logged in: USER

同时隐藏login，显示logout。关键是这句

TogetherJS.refreshUserData();

调用了这一句后，会自动call

TogetherJS.config("getUserName", function () {}

TogetherJS.config("getUserAvatar", function () {}

TogetherJS.config("getUserColor", function () {}

这样再点了Collaborate以后就会使用这三个配置信息了

logout的代码就不解释了，主要作用是清理TogetherJs的session

onlogout: function () {
  USER = null;
  $("#login").show();
  $("#logout").hide();
  if (TogetherJS.require) {
    TogetherJS.require("session").close();
  }
    }

定制登录

观察persona的例子，我们可以看到有一个问题，togetherjs的config username, useravatar和usercolor，纯粹只是设置聊天时的用户信息，跟登录功能没什么关系

即使没有登录，点collaborate也是可以新开启一个聊天室的，然后把这个聊天室链接发给其他人，其他人都可以加入进来

那如果要定制登录以后才可以进入聊天室，并且进入特定聊天室，该怎么做呢

假设页面有输入用户名密码的登陆框和几个按钮

<div>
  <p>User Name:</p>
  <input type="text" id="username"/>
  <p>Password:</p>
  <input type="password" id="password"/>
  <br/>
  <button id="login">Login</button>
  <button id="logout" style="display: none">logout</button>
  <button id="collaborate">Collaborate</button>
    </div>

首先只要在页面中引入了togetherjs，加载页面的时候就会随机分配一个room（如果没有切换tab,由于会保留session，即使刷新也不会更改room,所以注意测试的时候要重新打开一个tab)，如果url后面有房间号的params，则会立刻进入

要阻止页面一加载就初始化togetherjs,需要增加一个配置

<script>
      TogetherJSConfig_autoStart = false;
</script>

然后login的function就可以自己写了

$("#login").click(function () {
    if($("#username").val() == "test" || $("#password").val() == "test") {
      USER=$("#username").val();
      $("#logout").text("Logged in: " + USER);
      $("#login").hide();
      $("#logout").show();
      TogetherJS.refreshUserData();
    }
  });

然后更新用户信息

TogetherJS.config("getUserName", function () {
  return USER;
});

然后colloaborate的时候根据用户信息判断一下能不能使用togetherjs的function

$("#collaborate").click(function () {
    if(USER!=null){
      TogetherJS.config("findRoom", {prefix: "testtest", max: 2});
      TogetherJS(this);
      return false;
    }
  });

怎样控制该进入哪个房间呢，官方文档上有个配置

TogetherJSConfig_findRoom : To see this in action, check out the examples. This setting assigns people to a room. If you use a single string, this will be the name of the room; for instance: TogetherJSConfig_findRoom = "my_site_com_users" . You can also assign people to a series of rooms with maximum occupancy (what our examples do): TogetherJSConfig_findRoom = {prefix: "my_site_com_users", max: 5} Note: if you change this setting, test in a new tab (old browser tabs carry session information that will confuse you).

有两种使用方式，一个是跟autoStart放在一起，初始化的时候决定该进入哪个房间

<script>
      TogetherJSConfig_autoStart = false;
      TogetherJSConfig_findRoom = {prefix: "testroom", max: 5};
      //TogetherJS.config("findRoom", "findRoom");
    </script>

一个是根据程序逻辑，例如判断用户属于哪个组因此该进哪个房间，就要在collaborate的click函数里，TogetherJS(this);之前配置

$("#collaborate").click(function () {
    if(USER!=null){
      TogetherJS.config("findRoom", {prefix: "testtest", max: 2});
      //TogetherJS.config("findRoom", "findRoom");
      TogetherJS(this);
      return false;
    }
  });

这里findRoom我给了两种配置方法，一个是prefix + max, 一个直接是一个字符串

prefix是前缀，假设配置了testtest, 会给你分配"testtest_“加一段后缀，所有前缀为testtest的都会是同一个房间，直到超过max后，也就是满员后会再新开一个不同后缀的房间

而直接配置字符串，就是固定房间号的了

再附上这个登录和进入特定房间的完整代码

<div class="container">
  <section class="body-content row" id="main-section" data-speed="4" data-type="background">

<h1>Identity/Persona Example</h1>

    <div>
      <p>User Name:</p>
      <input type="text" id="username"/>
      <p>Password:</p>
      <input type="password" id="password"/>
      <br/>
      <button id="login">Login</button>
      <button id="logout" style="display: none">logout</button>
      <button id="collaborate">Collaborate</button>
    </div>

    <script src="/togetherjs.js"></script>
    <script src="/js/jquery-1.10.2.min.js"></script>
    <script>
      TogetherJSConfig_autoStart = false;
    </script>

<script id="main-code">
var USER;
$(function () {
  $("#login").click(function () {
    if($("#username").val() == "test" || $("#password").val() == "test") {
      USER=$("#username").val();
      $("#logout").text("Logged in: " + USER);
      $("#login").hide();
      $("#logout").show();
      TogetherJS.refreshUserData();
    }
  });
  $("#logout").click(function () {
    USER = null;
    $("#login").show();
    $("#logout").hide();
    if (TogetherJS.require) {
      TogetherJS.require("session").close();
    }
  });
  $("#collaborate").click(function () {
    if(USER!=null){
      TogetherJS.config("findRoom", {prefix: "testtest", max: 2});
      TogetherJS(this);
      return false;
    }
  });
});

TogetherJS.config("getUserName", function () {
  return USER;
});

    </script>

  </section>

</div>