什么是TogetherJS？我们来介绍一下TogetherJS，一个从Mozilla实验室出来的实时协作工具。 TogetherJS是这样的一种服务，你能为一个已经存在的网站增加实时协作特性。使用这种工具，两个或者更多的网站或者web应用访问者能够看到别人鼠标位置，单击，追踪他人的浏览记录，一起编辑表单，观看视频，还能够通过声音以及WebRTC聊天。 TogetherJS包括这样一些特性： - 查看他人的鼠标和点击情况。
- 查看滚动位置。
- 观察某人浏览过的页面。
- 文本聊天。
- 通过WebRTC语音聊天。
- 表单域同步(文本域，复选框等等)。
- 同步播放/暂停/追踪视频。
- 同一网站跨多个页面延续会话。
如何集成许多TogetherJS的特性无需更改你的网站。TogetherJS浏览DOM，并决定许多应该做什么–检测表单域，一些诸如CodeMirror和Ace的编辑器，以及在你的页面注入工具条。 要想尝试TogetherJS，仅仅要做的是把这个添加到你的页面里： 然后创建一个按钮，让你的用户开始TogetherJS： 1 2 3 4 5 |
|
如果你想看一些Together做了什么，jsFiddle已经启用了TogetherJS： 
只需要单击下Collaboration，就会启动TogetherJS了。你也可以自如地使用TogetherJS，下面我们会讲到。 扩展你的应用TogetherJS可以通过浏览DOM来解决一些事情，但不能同步你的JavaScript应用。比如，在你的应用中有一些条目是通过JavaScript来更新的，那么它们就不会相互间自动同步。有时人们期望能自动更新，但即使做了跨页面间的DOM同步，我们也不可能会做到同步底层的JavaScript对象。不像有些产品，如Firebase或者谷歌Drive实时API，TogetherJS没有赋予你实时的持久性。网站持久性这样的功能是由你决定，我们仅仅只是在浏览器中同步会话而已。 我们使用了一个简单的绘画应用来举例。我们已经发布了完整的例子作为模板，你可以派生以及亲自体验。 一个非常小的绘画应用 我们开始一个非常简单的绘画程序，我们有一个简单的画布： 1 2 3 |
style="height: 400px; width: 400px; border: 1px solid #000">
|
然后是一些设置： 1 2 3 4 5 6 7 8 9 | var canvas = document.querySelector('#sketch');
var context = canvas.getContext('2d');
context.lineWidth = 2;
context.lineJoin = 'round';
context.lineCap = 'round';
context.strokeStyle = '#000';
|
我们使用画布的mousedown和mouseup事件去为mousemove事件注册move()处理程序。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | var lastMouse = {
x: 0,
y: 0
};
canvas.addEventListener('mousedown', function (e) {
lastMouse = {
x: e.pageX - this.offsetLeft,
y: e.pageY - this.offsetTop
};
canvas.addEventListener('mousemove', move, false);
}, false);
canvas.addEventListener('mouseup', function () {
canvas.removeEventListener('mousemove', move, false);
}, false);
|
然后move()函数就会计算出需要绘画的线条： 1 2 3 4 5 6 7 8 | function move(e) {
var mouse = {
x: e.pageX - this.offsetLeft,
y: e.pageY - this.offsetTop
};
draw(lastMouse, mouse);
lastMouse = mouse;
}
|
最后是绘画线条的函数： 1 2 3 4 5 6 7 | function draw(start, end) {
context.beginPath();
context.moveTo(start.x, start.y);
context.lineTo(end.x, end.y);
context.closePath();
context.stroke();
}
|
一个简单的绘画应用，这些代码就足够了。现在如果你在你的应用中启用了TogetherJS，你会看到别人页面在移动，并且能看到他们的鼠标，但你看不到绘画。让我们来解决下！ 添加TogetherJS TogetherJS拥有一个交换中心，能在同一会话中相互间回复消息。这并不翻译消息，只是来回往返，包括消息来自可能在另一页面。TogetherJS也能让应用发送自己的消息，如这样发送消息(每个消息必须有一个类型)： 1 2 3 4 | TogetherJS.send({
type: "message-type",
...any other attributes you want to send...
})
|
然后这样去监听： 1 2 3 4 5 6 7 | TogetherJS.hub.on("message-type", function (msg) {
if (! msg.sameUrl) {
return;
}
});
|
消息类型是基于命名空间，以致你的应用消息不会意外覆盖TogetherJS自己的消息。 为了要同步绘画中我们想观看的任意一条正在画的线，并且把这些发送给其它人： 1 2 3 4 5 6 7 8 9 10 11 | function move(e) {
var mouse = {
x: e.pageX - this.offsetLeft,
y: e.pageY - this.offsetTop
};
draw(lastMouse, mouse);
if (TogetherJS.running) {
TogetherJS.send({type: "draw", start: lastMouse end: mouse});
}
lastMouse = mouse;
}
|
| 
