帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:总线  tab  browsers  Message  bro  浏览  message-bus  
Cross-tab message bus for browsers.

  • 源代码名称:tabex
  • 源代码网址:http://www.github.com/nodeca/tabex
  • tabex源代码文档
  • tabex源代码下载
  • Git URL:
    git://www.github.com/nodeca/tabex.git
  • Git Clone代码到本地:
    git clone http://www.github.com/nodeca/tabex
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/nodeca/tabex
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • tabex

    Build StatusNPM version

    浏览器的交叉选项卡消息总线。

    这个库需要做的事情:

    • 在浏览器选项卡和 Windows 之间发送消息。
    • 当多个标签打开( 保存服务器资源) 时共享单个 web socket连接。
    • 共享锁定( 仅在服务器事件的单个选项卡中运行实时声音通知)。

    演示工具

    支持的浏览器:

    • 所有现代和 IE9+。
    • 古代浏览器将回退到传统模式:
      • 每个标签都不了解邻居。
      • 同一窗口中的客户端将正常运行。

    已知的

    问题:

    • 在 private 模式中Safari将回退到 legacy,因为它禁止 localStorage 写入。
    • iOS上的Chrome 将回退到 legacy,因为它不会在标签之间发送 localStorage 事件。
    • 由于浏览器中的严重unfixable问题,跨域消息传递不推荐使用:
      • 默认情况下不会在Safari中工作,因为安全设置
      • 不能在IE11中工作,因为多个 Bug。

    安装

    node.js ( 与 browserify 一起使用):

    $ npm install tabex

    Bower:

    $ bower install tabex

    API

    在 99%的用例中,你的标签位于同一域中。 那么 tabex 使用非常简单:

    // Do it in every browser tab, and clients become magically connected// to common broadcast bus :)var live =window.tabex.client();live.on('channel.name', functionhandler(message) {
     // Do something});// Broadcast message to subscribed clients in all tabs, except self.live.emit('channel.name2', message);// Broadcast message to subscribed clients in all tabs, including self.live.emit('channel.name2', message, true);

    客户端

    tabex.client(options )

    创建消息传递接口的fabric。 对于单个域,你不需要任何选项,所有的选项都将自动。 对于跨域通信,你必须使用共享域加载的路由器为iframe创建html文件。

    选项:

    • - 带路由器( 共享域)的iframe源 url。 可选。
    • 名称空间 ( 字符串) - 可选,当你需要muiltiple隔离 tabex 实例并行时。
    client.on(channel, handler )

    订阅频道。可以链接的。

    • 频道 ( 字符串) - 订阅频道的名称。
    • 处理器 ( 函数) - function (data, channel) {.. . }
    client.off(channel [, handler] )

    从频道退订处理程序可以链接。 如果未指定处理程序- 取消从给定通道取消订阅所有处理程序。

    client.emit(channel, message [, toSelf] )

    将消息发送到指定通道中的所有选项卡。 默认情况下,消息将广播到除当前客户端之外的所有客户端。 包括现有客户端- 将 toSelf 设置为 true

    client.lock(id, [timeout, ] fn):
    • id锁标识符
    • 超时 - 可选,在ms中锁定生存期,默认值 5000
    • fn(unlock) - 如果获得锁,将执行处理程序
      • 解锁 - 释放获取的锁

    便笺。当localStorage用作事件传输时,获取锁采用 30ms。

    client.filterIn(fn), client.filterOut(fn )

    为传入的( 已经处理) 和传出( 发出) 消息添加变压器。 Chainable。这是一个非常强大的功能,允许 tabex 定制。 当从一端传递客户端管道时,你可以按希望变形数据。

    • ( 通道,消息,回调) 滤波器功能。
      • 频道 - 频道名称。
      • 消息 - 包装事件数据( 请参见下面)。
      • 回调( 频道,消息) - 函数返回输出数据。

    过滤消息结构:

    • id唯一消息 id,<node_id>_<msg_counter> 包含或者唯一客户端实例 id ( 随意) 和消息 ccounter ( 每个新消息的inremented )
    • node_id - id消息发射器源( 客户端或者路由器),随机字符串。
    • 数据 - 消息数据,传递给 client.emit()

    用例示例:

    • faye 不允许在频道名称中使用 .。 你可以为 .的透明替换添加过滤器。
    • 你可以拖放内部事件来实现诸如锁或者远程函数调用之类的新功能。

    路由器

    只需要跨域通信( 使用 iframe ) 就可以直接访问路由器。 对于单个域 tabex 客户端,将自动创建本地路由器。

    tabex.router(options )

    在iframe中创建路由器的fabric。 选项:

    • 基准 origin - 有效来源列表,允许与该iframe进行通信。 如果没有设置,那么将使用iframe域。
    • 名称空间 - 与 tabex.client 中的相同。

    示例。

    在你的代码中:

    var live =window.tabex.client({
     iframe:'https://shared.yourdomain.com/tabex_iframe.html'});

    在iframe中:

    window.tabex.router({
     origin: [
     'http://yourdomain.com',
     'https://yourdomain.com',
     'http://forum.yourdomain.com',
     'https://forum.yourdomain.com' ]
    });

    警告从未将 * 设置为允许的原始值。 ! ,不安全。

    高级使用

    系统事件

    通道 sys.* 保留用于内部需要和扩展。! 此外,tabex 已经生成了事件,在某些状态更改时发出:

    • sys。channels。刷新 - 当订阅的频道列表更改( 或者在特定情况下,主选项卡切换时) 时发出。 消息数据:
      • channels - 所有标签中订阅的所有频道的array
    • sys。channel add tabex.client 发出 emit通知路由器有关新订阅通道的信息。 消息数据:
      • channel - 频道名称
    • sys。channel remove tabex.client 发出 emit通知路由器所有对通道的订阅都已经删除。 消息数据:
      • channel - 频道名称
    • sys。lock。请求 - 由 tabex.client 发出以尝试获取锁。 消息数据:
      • id锁标识符
      • ms中的超时锁生存期
    • sys。lock。获取的 - 当路由器获取客户端锁定时发出 !
      • request_id - 请求消息 id
    • sys。lock。release - tabex.client 发出的释放已经被释放。 消息数据:
      • id锁标识符
    • sys出错,内部错误产生错误,调试。
    • sys。master - 用于基于localstorage的路由器的sepecific。 消息数据:
      • node_id -"本地"路由器 node的id
      • master_id - 成为主机的node的id

    英镑注意。仅在使用路由器时广播 sys.master 事件。! 你不应该在一般的应用程序逻辑中依赖它。 使用锁定来过滤广播中的单个处理程序。

    共享单个服务器连接( faye )

    示例 below 演示如何扩展 tabex 以在所有打开的选项卡之间共享单个 faye 连接。 我们将在所有标签中创建 faye 实例,但在"母版"选项卡中只激活一个。

    用户可以使用活动服务器连接关闭选项卡。 发生这种情况时,新的主控形状将被选中,新的faye实例将被激活。

    我们还在用户订阅tabex客户端时对faye频道进行"透明的"订阅。 由于用户也希望进行本地广播,所以"本地"和"远程"需要严格的分离。 我们对需要服务器subscribtions的通道使用 addind"远程。*"前缀。

    注意:如果你不需要跨域特性,则 drop相关选项和代码。

    在iframe中:

    window.tabex.router({
     origin: [ '*://*.yourdomain.com', '*://yourdomain.com' ]
    });

    在客户端:

    // This one is for your application.//var live =window.tabex({
     iframe:'https://shared.yourdomain.com/tabex_iframe.html'});// Faye will work via separate interface. Second interface instance will// reuse the same router automatically. Always use separate interface for// different bus build blocks to properly track message sources in filters.//// Note, you can attach faye in iframe, but it's more convenient to keep// iframe source simple. `tabex` is isomorphic, and faye code location does// not make sense.//var flive =window.tabex({
     iframe:'https://shared.yourdomain.com/tabex_iframe.html'});var fayeClient =null;var trackedChannels = {};// Connect to messaging server when become master and// kill connection if master changed//flive.on('!sys.master', function (data) {
     // If new master is in our tab - connectif (data.node_id===data.master_id) {
     if (!fayeClient) {
     fayeClient =newwindow.faye.Client('/faye-server');
     }
     return;
     }
     // If new master is in another tab - make sure to destroy zombie connection.if (fayeClient) {
     fayeClient.disconnect();
     fayeClient =null;
     trackedChannels = {};
     }
    });// If list of active channels changed - subscribe to new channels and// remove outdated ones.//flive.on('!sys.channels.refresh', function (data) {
     if (!fayeClient) {
     return;
     }
     // Filter channels by prefix `local.` and system channels (starts with `!sys.`)var channels =data.channels.filter(function (channel) {
     returnchannel.indexOf('local.') !==0&&channel.indexOf('!sys.') !==0;
     });
     // Unsubscribe removed channels//Object.keys(trackedChannels).forEach(function (channel) {
     if (data.channels.indexOf(channel) ===-1) {
     trackedChannels[channel].cancel();
     delete trackedChannels[channel];
     }
     });
     // Subscribe to new channels//data.channels.forEach(function (channel) {
     if (!trackedChannels.hasOwnProperty(channel)) {
     trackedChannels[channel] =fayeClient.subscribe('/'+channel.replace(/./g, '!!'), function (message) {
     flive.emit(channel, message.data);
     });
     }
     });
    });// Resend events without prefix `local.` and prefix `!sys` to server, convert channel// names to faye-compatible format: add '/' at start of channel name and replace '.' with '!!'//flive.filterIn(function (channel, message, callback) {
     if (fayeClient &&channel.indexOf('local.') !==0&&channel.indexOf('!sys.') !==0) {
     fayeClient.publish('/'+channel.replace(/./g, '!!'), message);
     return;
     }
     callback(channel, message);
    });// Convert channel name back from faye compatible format: remove '/'// at start of channel name and replace '!!' with '.'//flive.filterOut(function (channel, message, callback) {
     if (channel[0] ==='/') {
     callback(channel.slice(1).replace(/!!/g, '.'), message);
     return;
     }
     callback(channel, message);
    });

    许可证



    文章标签:bro  浏览  tab  Message  browsers  总线  message-bus  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语