设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客

TogetherJS:Mozilla推出的实时协作工具

2013-10-29 14:26| 发布者: 红黑魂| 查看: 11491| 评论: 0|来自: 伯乐在线

摘要: 什么是TogetherJS?我们来介绍一下TogetherJS,一个从Mozilla实验室出来的实时协作工具。TogetherJS是这样的一种服务,你能为一个已经存在的网站增加实时协作特性。使用这种工具,两个或者更多的网站或者web应用访问 ...

在发送前,我们应该检查下TogetherJS确实正在运行(TogetherJS.running)。我们发送的消息应该要一目了然的。

下面,我们要去监听这些消息:

1
2
3
4
5
6
TogetherJS.hub.on("draw", function (msg) {
    if (! msg.sameUrl) {
        return;
    }
    draw(msg.start, msg.end);
});

当我们注册这个监 听 器时,我们不必担心TogetherJS是否正在运行,因为只有在它在运行时才能被调用。

这样足够让我们的绘画更生动并且协作的。但我们还缺少一个:如果我开始画一个图像,然后你加入了我,你仅仅会看到我画的新的线条,你看不到我已经画过的图像。

为了要解决这个,我们会去监听togertherjs.hello消息,它在每个客户端首次访问一个新的页面时发送。当我们监听到这个消息时,我们会发送我们的画布上的图像给其他人。

1
2
3
4
5
6
7
8
9
10
TogetherJS.hub.on("togetherjs.hello", function (msg) {
    if (! msg.sameUrl) {
        return;
    }
    var image = canvas.toDataURL("image/png");
    TogetherJS.send({
        type: "init",
        image: image
    });
});

现在我们只要去监听新的init消息:

1
2
3
4
5
6
7
8
TogetherJS.hub.on("init", function (msg) {
    if (! msg.sameUrl) {
        return;
    }
    var image = new Image();
    image.src = msg.image;
    context.drawImage(image, 0, 0);
});

仅仅使用这些代码,TogetherJS让我们制作了一个生动的绘画应用。当然,我们也要去编写些代码,但这里是一些TogetherJS为我们处理的事情:

提供用户一个URL与另一个用户分享去启动会话。

建立一个WebSocket连接到中心服务器,提供客户端之间的信息往返。

让用户设置名称和头像,同时观察其他人也在当前会话中。

保持跟踪,谁在线,谁离开,还有谁空闲中。

简单但必须的特性,像可用的文本聊天

会话初始化以及跟踪是由TogetherJS处理。

有些事情我们并没在这个例子中做的:

我们使用了固定大小的画布,所以我们没去处理不同客户端和不同的分辨率。通常TogetherJS会处理不同类型的客户端,并且使用分辨率无关的定位(甚至对响应设计也有效)。一种修复的方法可能是保证一个固定的长宽比,然后用长宽的百分比去定位绘画。

我们没使用任何一个有趣的绘画工具!可能你不想同步工具—如果我正在使用红刷笔绘画,你不能同时使用绿刷笔来绘画,这样也没有理由。

但一些比如清除画布应该要同步。

我们没有保存或者加载绘画。一旦绘画应用有保存和加载,你可能得更多地思考下想同步什么。如果我已经创建并且保存了一个图片,然后返回到站点加入你的会话,你的图像会覆盖我的吗?把每个图像放在唯一的URL能更清晰的表明想去编辑哪个图像。

想了解更多?

TogetherJS架构好奇?请查阅技术简介

jsFiddle上尝试TogetherJS

通过文档上的按钮联系我们:”提供实时帮助”会请求启动一个TogetherJS会话

IRC#togetherjs上联系我们。irc.mozilla.org

Github上查找代码,如果你遇到bug或者有特性请求,请提一个问题。请别害羞,我们对许多种反馈非常感兴趣:想法,潜在用例(以及来自这些用例的挑战),和那些看起来通过文档无法回答的问题(这也同时表示我们文档上的bug)。请告诉我们有关潜在的协同应用。

Twitter上关注我们:@togetherjs

本文由 伯乐在线 - 蝈蝈 翻译自 mozilla

原文链接:http://blog.jobbole.com/49999/


酷毙

雷人
1

鲜花

鸡蛋

漂亮

刚表态过的朋友 (1 人)

  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部