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/

madlibs:https://togetherjs.com/examples/madlibs/

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

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

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

https://togetherjs.com/togetherjs-min.js
的方式引入,直接在浏览器中输入这个网址想把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>
使用的就是你自己的hub server,而不是togetherjs的

如果嫌每个页面都加这个配置很麻烦,可以直接改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>
就可以正常显示了,其它的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.persona.org/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>



郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。