TogetherJs, togetherjs Chinese

TogetherJs, togetherjs Chinese

TogetherJs Overview

TogetherJs is a free open-source js framework for Mozilla, which provides communication functions for websites. Adding TogetherJs to your website allows users to communicate in real time.

Link: https://togetherjs.com/

TogetherJs sample app

1. Drawing

Https://togetherjs.com/examples/drawing/

(1) Click settings to modify the name, the border color of the Avatar and the Avatar, and exit.

(2) Click "Add a friend" to view the link of the current chat room. Open this link and join the current chat room.

(3) Click "Chat" to perform real-time conversations.

(4) drawing on the canvas can be seen by others, and you can see the position and movement of your mouse.

The above row of buttons is to select the paint brush color, the following row of buttons UserColor do not know what is, the others are the paint brush bold, clear the canvas, brush fine, eraser

There are also some other examples, which are not all displayed on the home page, which are listed here:

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

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

Persona: https://togetherjs.com/examples/persona/ is related to user authentication

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

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

TogetherJs Documentation document

Https://togetherjs.com/docs/

Quick Start

Add two things to your page to use TogetherJs.

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

And

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

Or

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

You need to put the togethejs-min.js in every page of your website code, even if there is no "Start TogetherJS" button on a page. Only with this script can two people communicate with each other.

If you forget to introduce this script to a page, the TogetherJs Session will Offline when the user accesses that page until the user returns to another page containing the togetherjs-min.js.

Note that the togetherjs-min.js is not the complete code for TogetherJS, so if you don't want to use

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

You can directly enter this URL in your browser to copy the js file and put it locally. An error will be reported.

The solution is to use togetherjs-min.js instead of https://togetherjs.com/togetherjs.js

You can copy togetherjs. js to a local file and run it successfully.

Source code deployment and Hosting the Hub Server

Source code: https://github.com/mozilla/togetherjs

After downloading to the local device, go to the root directory through the command line window and enter npm install (nodejs needs to be installed)

Npm install will download the dependency package in package. json to the local device. Note that one of package. json is downloaded through git clone.

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

I don't know why I will report an error here. If an error is reported, delete this sentence, install it separately, and re-enter npm install.

Then enter the command: npm install websocket optimist in the root directory.

If the preceding websocket-server error is reported, enter npm install node-websocket-server,

Go to node_modules in the root directory and rename node-websocket-server to websocket-server.

If node_modules in the root directory has the following components, the dependency package is successfully installed.

Continue to the togetherjs root directory operation in the cmd window, enter node hub/server. js,

Will display

Enter http: // 127.0.0.1: 8080/status in the browser. If OK is displayed, the Hub Server is successfully deployed.

This Hub Server is your togetherjs Server. Add it to the head of Quick Start.

<script>TogetherJSConfig_hubBase = "https://myhub.com";</script>

Use your own hub server instead of togetherjs.

If it is difficult to add this configuration for every page, you can directly change togetherjs. js

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

Next is the client site deployment, you can install a harp, the installation is very simple, you can refer to: http://segmentfault.com/a/1190000000355181

Open another cmd window, go to the site under the togetherjs root directory, and enter the command harp server

Enter http: // 146.222.94.17: 9000/examples/drawing/in the browser/

If you can access the service, the deployment is successful.

There are some problems with the code in these examples, mainly because the script is not introduced or the introduced path is incorrect.

Copy togetherjs.js to the root directory of siteaccording to the Quick startfile I mentioned above, and then add it to the index.html page.

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

It can be displayed normally, and the same is true for other example. If there is still a problem, we suggest you use firebug to see what the error is.

Examples/Persona explanation

According to the official documentation, if you want to set your UserName, or UserAvatar (Avatar) and UserColor (Avatar border color), change the following configurations:

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

If you have updated these values but do not want to reload the page, call TogetherJS. refreshUserData ()
The official website is very extensive and I can't see anything. For details, refer to exapmles/persona.

I will explain the key part of the code in persona.

There are three buttons, one Login, one Logout, and one Collaborate.

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

The code for navigator is

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

Follow these steps to register an account by email. I think this is only for reference. You don't need to go into it. More scenarios are integration with your existing system logon.

So what is useful here is:

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

The script on this page contains a global variable USER, which records the USER information. After Successful Logon, the "logout" button is displayed as "Logged in: USER ".

Hide login and display logout. The key is this sentence.

TogetherJS.refreshUserData();

After this sentence is called, it will automatically call

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

TogetherJS. config ("getUserAvatar", function (){}
TogetherJS.config("getUserColor", function () {}
In this way, the three configurations will be used after Collaborate is clicked.

The logout code is not explained. The main function is to clear the TogetherJs session.

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

Custom logon

Looking at the persona example, we can see that there is a problem: togetherjs's config username, useravatar and usercolor are purely set the user information during the chat, which has nothing to do with the login function.

Even if you do not log on, click collaborate to open a new chat room, and then send the chat room link to other people. Others can join in.

What should I do if I have to customize the login before entering the chat room and entering the specific chat room?

Suppose there are login boxes and buttons for entering the user name and password on the page.

<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>

First, as long as togetherjs is introduced to the page, a room will be randomly allocated when the page is loaded (if the tab is not switched, the session will be retained and the room will not be changed even if the page is refreshed, so note that you need to re-open a tab during the test). If the url is followed by the params With the room number, it will immediately enter

To prevent the page from being loaded and initialize togetherjs, you need to add a configuration

<script>      TogetherJSConfig_autoStart = false;</script>

Then, you can write the login function by yourself.

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

Then update the user information.

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

Then, when colloaborate is used, determine whether togetherjs functions can be used based on user information.

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

How to control which room to enter? The official document provides a configuration
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 New tab(Old browser tabs carry session information that will confuse you ).

There are two ways to use it. One is to put it together with autoStart and decide the room to enter during initialization.

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

One is based on the Program Logic. For example, to determine which group the user belongs to and which room the user should enter, it should be configured in the click function of collaborate, TogetherJS (this );

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

Here, findRoom provides two Configuration Methods: prefix + max and string.

Prefix is the prefix. If testtest is configured, "testtest _" will be assigned with a suffix. All files prefixed with testtest will be in the same room until max is exceeded, that is, a new room with different suffixes will be opened after the staff is full.

Directly configure the string, which is the fixed room number.

The complete code for logging on to and entering a specific room is attached.

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