TogetherJs

标签：mozilla   开源   nodejs   youtube   togetherjs   

TogetherJs简介

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

官网链接：https://togetherjs.com/

TogetherJs的sample app

1.      Drawing

https://togetherjs.com/examples/drawing/

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

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

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

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

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

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

friendlycode: https://togetherjs.com/examples/friendlycode/

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

todo: https://togetherjs.com/examples/todo/

youtube: https://togetherjs.com/examples/youtube/

TogetherJs Documentation 文档

https://togetherjs.com/docs/

Quick Start 快速开始

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

<script>
  // TogetherJS configuration would go here, but we'll talk about that
  // later
</script>
<script src="https://togetherjs.com/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>

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

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

https://togetherjs.com/togetherjs-min.js

解决方法是不用togetherjs-min.js，而使用 https://togetherjs.com/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://myhub.com";
</script>

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

//var defaultHubBase = "https://hub.togetherjs.com";
    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>

Examples/Persona解释

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

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

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();
    }
}）；

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

所以这里面比较有用的是

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

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

TogetherJS.refreshUserData();

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

TogetherJS.config("getUserAvatar", function () {}
TogetherJS.config("getUserColor", function () {}
这样再点了Collaborate以后就会使用这三个配置信息了

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").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;
    }
  });

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

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

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

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>

TogetherJs

标签：mozilla   开源   nodejs   youtube   togetherjs   

原文地址：http://blog.csdn.net/shimly2010/article/details/41643149