构建meteor应用程序_使用Meteor的即时Web应用程序

最新推荐文章于 2024-08-12 08:47:39 发布

cuyi7076

最新推荐文章于 2024-08-12 08:47:39 发布

阅读量419

点赞数

文章标签： python java javascript 大数据 web ViewUI

原文链接：https://www.ibm.com/developerworks/web/library/wa-meteor-webapps/index.html

版权

构建meteor应用程序

流星，一个用于Web应用程序开发的平台，正在获得广泛的国际采用。 Meteor不仅是JavaScript编码框架，还提供了一种创新的方式来构建可伸缩，丰富的交互式Web应用程序。流星承诺通过简化编码模型并减少开发人员必须编写的代码量来加快开发周期。使用Meteor，经验丰富的Web应用程序架构师和开发人员可以在几周甚至几天内从概念到完整部署。

有关安装和开始使用Meteor平台进行开发的分步指南，请遵循Meteor网站上的“ 快速入门”文档。在本教程中，我将通过两个详细的应用程序示例深入介绍Meteor开发，并概述Meteor的Web应用程序开发方法。有了这些知识，您就可以自行决定是否可以使用Meteor快速创建Web应用程序。

展望未来

流星使用的方法在某种意义上是革命性的，但它也有一些进化方面。它与计算历史上最伟大的成就之一-电子表格软件沿着相同的IT路径继续发展。图1显示了一个典型的电子表格示例：带有饼图的Sales by Region电子表格。

图1.按地区销售电子表格

一个典型的电子表格的屏幕截图，该电子表格显示了按地区划分的销售额以及总销售额的饼图

试用常见的电子表格

您可以尝试图1中的电子表格，该电子表格是本文示例代码下载的一部分。更改任何销售数字，您将看到饼图自动更新。

如果您在“按地区销售”电子表格中修改了任何区域销售数字，则饼图会立即重绘以反映切片的新相对比例。

这种电子表格功能不再是新颖的，而是可以想象它的影响可以追溯到1983年Lotus 1-2-3推出该功能时。早期的PC用户从来没有做任何编程就可以做如此多的工作。电子表格软件仍然是推动全球PC销售的杀手级应用程序之一。

快进的三十年

本教程的第一个Web应用程序示例-图2中所示的Sales Portal应用程序-演示了大约在2015年流星电子表格的隐喻如何随着Meteor演变而来。

图2. Sales Portal Web应用程序

“按地区划分的流星销售额”应用程序的屏幕截图，显示按地区划分的销售额和总销售额的饼图

销售门户网站显示最新的区域销售数字和相应的饼图。全球销售总监可以使用该应用程序监视销售，每个区域销售团队可以在进行销售时更新其销售数据。

如果已安装Meteor，则可以下载 Sales Portal应用程序并进行动手操作。转到下载的sales_nologin子目录，然后键入meteor 。将浏览器实例指向http：// localhost：3000 /以显示区域销售数字和饼图。（如果您无法安装Meteor，则可以运行IBM Bluemix托管版本。）单击任何销售数据进行更改。确认更改后，饼图将立即更新。如果您将多个浏览器实例指向Sales Portal，则所有实例都会更新以显示最新的销售数据，并且您可以从任何一个浏览器实例中修改这些数据。

图3显示了美国中央团队选择和更新其销售数据。

图3.更新美国中部销售

在Meteor Sales Portal Web应用程序中选择和更新美国中部地区销售数据的用户的屏幕截图

图4显示了更新的美国中部销售数据和最新的饼图。任何在更新时同时访问Sales Portal的用户都会立即看到更改。

图4.更新饼图比例以反映新的美国中部销售数字

除了手动更新，您还可以想象一个后端，在该后端中，销售数据由在更新之前自动收集和合并的子聚合组成。 Sales Portal应用程序的视觉呈现与古老的电子表格的视觉呈现相同，但是Sales Portal现在还具有：

通过无处不在的浏览器进行全球Internet访问
多个用户同时访问
可选的自动后端数据聚合和合并

使用标准企业技术（例如，基于Java™的工具链）来设计，编码和部署这样的系统将需要大量的精力。如您将在随后的代码演练中看到的，Meteor极大地减少了这种工作。

积极思考

“这种方法大大减少了您需要编写，调试和测试的基础结构代码的数量。 ”

电子表格的主要功能是其React性。在“按地区销售”示例中，当更新地区销售数据时，将即时重新计算依赖于该数据的所有其他值。如果从属组件提供图形输出（例如饼图），则将使用更新的切片大小立即重绘该图表。您无需编写用于管理依赖关系的代码（可能很复杂），也不需要编写用于更新组件（如饼图）的代码。您要做的就是声明React性元素（销售数据）及其相关性（在这种情况下为饼图）。电子表格会处理所有这一切。

现在想象一下今天使用Web应用程序做同样的事情，并且您对Meteor如何简化基于Web的系统创建有了很好的了解。

流星React默认值

流星有某些默认情况下是React性的数据源。最常用的包括：

流星集合-通常是MongoDB查询的结果
明确绑定到流星Session单例的变量
Meteor.user ， Meteor.userId和Meteor.logginIn ，它们跟踪当前用户和登录状态
Meteor.status ，它跟踪服务器连接状态

设计Meteor应用程序时，您需要确定React性元素，例如区域销售数据收集。然后，使用标准HTML，CSS，客户端JavaScript库和组件（例如JQuery，JQuery UI或JQuery Mobile）和模板技术（例如，空格键）来布局表示层（概念与JavaServer Pages类似，但通常可以运行）在客户端）。流星跟踪React性元素的所有依赖性，然后重新渲染视觉元素并重新计算依赖性以反映最新的更新值。

这种方法大大减少了您需要编写，调试和测试的基础结构代码的数量。您不需要编写自定义后端Web服务来同步更新请求，也不需要编写用于更新数据库或数据存储的代码，也不需要编写将更改通知推送到其他连接的客户端的代码，也不需要编写用于获取更新的代码。值从后端发出通知。

深入研究Sales Portal代码

清单1显示了sales.js文件，其中包含Sales Portal应用程序背后的所有服务器和客户端逻辑。这是我需要为该应用程序编写的唯一JavaScript代码。（您可以在代码下载的sales_nologin目录中找到sales.js。）

清单1. Sales Portal的客户端和服务器端逻辑：sales.js

SalesData = new Meteor.Collection("regional_sales");
if (Meteor.isClient) {

    Template.salesdata.helpers({ 
        dataset : function () {
                    return SalesData.find({}, {sort: {row : 1}});
                  }
    });

    Template.datapoint.helpers({ 
        selected :  function () {
                        return Session.equals("selected_datapoint", this._id)
                           ? "selected" : '';
                    }
    });

    Template.title.helpers({
        thisyear:  new Date().getFullYear()
    });

Template.datapoint.events({
        'click': function (event, template) {
          Session.set("selected_datapoint", this._id);
        }
    });

    Template.piechart.helpers({
     'plotchart' : function() {
       plotit(this, SalesData.find({}));
     }
    });

    function plotit(inst,cur)  {

     if (cur.count() === 0)  // do not render pie if no data
           return;
         var data = [];
         cur.forEach( function(sale) {
           data.push( [sale.region, sale.total]);
         });
      window.$.jqplot('chart', [data], 
        { 
          seriesDefaults: {
            // Make this a pie chart.
            renderer: $.jqplot.PieRenderer, 
            rendererOptions: {
              // Put data labels on the pie slices.
              // By default, labels show the percentage of the slice.
              showDataLabels: true
            }
          }, 
          legend: { show:true, location: 'e' }
        }
      );   

    }

    Template.datapoint.onRendered(function()
    {
       this.$('.editable').editable( {
         autotext: 'never',
         type: 'text',
         width: 10,
         mode: 'inline',
         success:    
          if (newvalue != "") {
            var testint = Number(newvalue);
            if (Math.floor(testint) == newvalue) {
           SalesData.update(Session.get("selected_datapoint"), {$set: {total: parseInt(newvalue)}});
          } else {
           return ({newValue: $(this).text()}); 
          }
        } else {
          return ({newValue: $(this).text()});
        },
      display: function() {
       // dummy display function so 'text' is not set, Blaze will set it
      }
      });
});
} // if isClient

if (Meteor.isServer) {
  Meteor.startup(function () {
   if  ((process.env['CLEARDATA']) || (SalesData.find().count() == 0)) {
      var roworder = 0; 
      SalesData.remove({});
      SalesData.insert({region:"US East", total: 2032333, row: roworder++});
      SalesData.insert({region:"US Central", total: 150332, row: roworder++});
      SalesData.insert({region:"US West", total: 1202412, row: roworder++});
      SalesData.insert({region:"Asia Pacific", total: 701223, row: roworder});
  }  
                  
  });

}

Meteor.isClient和Meteor.isServer变量周围的条件是Meteor核心提供的运行时上下文指示符，可在代码中的任何位置使用。在这种情况下，它们允许在同一sales.js文件中组合客户端代码和服务器端代码。条件之外的任何代码都可以在客户端和服务器上运行。

或者，您可以通过将服务于客户端的代码放在名为client的子目录中，并将服务器端代码放在名为server的子目录中，来分隔客户端和服务器源代码。在这种情况下，您可以将提供给客户端的所有资产（例如图像）放在名为public的子目录中。如果要将某些资源限制为仅用于服务器访问（而不是将其提供给客户端），请将它们放在名为private的子目录中。（本教程稍后将使用的照片共享应用程序将使用该目录结构。）

识别React性数据

清单1中的selected_datapoint会话变量是React性的。（有关默认情况下是无功的元素的更多信息，请参见“ 流星无功默认值”侧边栏。）在这种情况下，该变量用于更改销售数字的行突出显示。通过动态CSS样式的更改来执行行突出显示。当用户单击一行时， selected_datapoint会话变量将更新。由于Meteor每次更改此变量时都会重新渲染依赖关系，因此高亮会相应更新。请注意， selected_datapoint仅存在于客户端。

Sales Portal应用程序的另一个数据响应源是对SalesData Meteor集合的查询。与selected_datapoint不同， SalesData在客户端和服务器上都存在；在服务器上，它是一个MongoDB集合。您可以在清单1中看到SalesData的用法。

由于查询是React式的，因此查询结果集更改时，将重新计算或重新呈现其所有依赖项。通过这种方式，可以更新所有浏览器实例中的销售数据和饼图。清单2显示了相关HTML模板代码，这些代码位于代码download的sales_nologin目录中的sales.html文件中。

清单2.客户端HTML和模板：sales.html

<template name="salesdata">
  <div class="salesdata">
    {{#if Template.subscriptionsReady}}
      {{#each dataset}}
        {{> datapoint}}
      {{/each}}
    {{/if}}
  </div>
</template>

<template name="datapoint">
  <div class="datapoint {{selected}}">
    <div id="{{_id}}_region" class="region">{{region}}</div>
    <div id="{{_id}}_total" data-inputclass="inputclass" class="sales editable">{{total}}</div>
  </div>
</template>

清单2中HTML文件是一个空格键模板。 Spacebars是Meteor自己的模板引擎。您可以在清单2中的双花括号{{ }}看到空格键表达式。（通过其Blaze渲染系统，Meteor还可以与其他JavaScript模板引擎一起使用。）

通过清单2中显示的salesdata模板代码呈现销售图的行。由于此模板取决于dataset帮助器功能（如清单1所示），因此每次所包含的React式查询发生更改时，都会重新渲染该模板。

在服务器上播种样本数据

Sales Portal的初始区域销售数据是由清单3中所示的服务器端代码（来自清单1 ）提供的。

清单3.在MongoDB中植入数据的服务器端代码

SalesData.remove({});
 SalesData.insert({region:"US East", total: 2032333, row: roworder++});
 SalesData.insert({region:"US Central", total: 150332, row: roworder++});
 SalesData.insert({region:"US West", total: 1202412, row: roworder++});
 SalesData.insert({region:"Asia Pacific", total: 701223, row: roworder});

流星的延迟补偿

流星的延迟补偿功能是大数据管理中最终一致性概念的直观再现。当您通过Minimongo仿真器在客户端上更新数据时，更改会立即反映在客户端上，包括响应式重新呈现。更改也将传播到服务器。但是，由于各种原因（包括拒绝访问），传播的更改可能不会成功。发布/订阅机制可确保客户端最终（通常很快）反映出服务器的状态。延迟补偿可实现无延迟的高响应UI，这是现代Web应用程序的标志性特征。潜在的代价是视觉数据不一致的短暂瞬间。

在Meteor服务器上，一个完整的MongoDB实例正在运行。（此完整实例可以接受来自Meteor以外的其他客户端的查询和更新。）相同JavaScript MongoDB API也可以在客户端使用，以统一客户端和服务器的编码，并允许客户端和服务器上的代码重用。客户端API由称为Minimongo的Mongo模拟器提供。 Minimongo使用延迟补偿来反映数据库更改。因为Minimongo通常处理小的客户端数据集，所以它不支持索引。

异步发布/订阅模型用于控制在MongoDB服务器和Minimongo客户端之间同步的数据。默认情况下，将发布所有服务器端Meteor集合。流星使用分布式数据协议（DDP）在客户端和服务器之间移动数据。（可以为其他数据库创建客户端仿真器和服务器端提供程序形式的DDP驱动程序； Meteor社区中正在进行的工作包括PostgreSQL驱动程序和RethinkDB驱动程序）。

集成jQuery插件

Sales Portal使用jqPlot jQuery插件呈现饼图。饼图的呈现和重新呈现是由SalesData集合中的数据更改来被动地驱动的。您之前已经看到，每次SalesData集合更改时，都会salesdata模板。清单4显示了客户端功能（来自清单1 ），该功能在由salesdata模板的rendered事件触发时重绘饼图。

清单4.使用jqPlot插件呈现饼图的jQuery代码

window.$.jqplot('chart', [data], 
     { 
       seriesDefaults: {
         // Make this a pie chart.
         renderer: $.jqplot.PieRenderer, 
         rendererOptions: {
           // Put data labels on the pie slices.
           // By default, labels show the percentage of the slice.
           showDataLabels: true
         }
       }, 
        legend: { show:true, location: 'e' }
     }
   );

Sales Portal使用x可编辑的 jQuery插件来启用销售数据的就地编辑。清单1的Template.datapoint.onRendered()handler内部将显示处理编辑的代码。

改善销售门户访问安全性

Meteor支持的默认原型模式非常适合应用程序的初始快速发展。在此阶段，您可能需要快速迭代来修改交互，UI甚至是应用程序逻辑-通常不涉及任何敏感数据。您可以与合作的开发人员共享URL，并查看用户以收集反馈。但是拥有销售门户URL的任何人都可以查看甚至更改销售数据。对于生产用例，这种开放访问模型太宽松了。

自然而然的下一步是通过打开Meteor的安全功能来锁定应用程序。下载门户的sales子目录中提供了更安全版本的Sales Portal的代码。新增的安全功能是：

流星包

流星软件包是功能模块，您可以通过meteor add命令轻松地将其添加或删除。程序包可以包含服务器和客户端代码，样式表，UI，API等。您将在本教程中看到accounts-ui ， autopublish和insecure的示例。但是，您还可以通过添加软件包来添加CoffeeScript支持，URI路由和更多功能。 Atmosphere存储库包含由Meteor社区创建的数千个软件包，您可以将其添加到应用程序中。

用户认证系统，仅允许授权用户访问门户
确保只有区域销售数据的正式所有者才能修改该数据的代码
更好的源代码组织，以确保永远不会将潜在的机密服务器端代码提供给已部署的客户端

从现在开始，我对Sales Portal应用程序的所有引用都是对sales目录中的安全版本的引用。

删除客户端修改服务器数据的功能

锁定应用程序的一个好的开始是防止任何人修改数据。在这种情况下，您需要做的就是使用以下命令删除insecure软件包：

meteor remove insecure

insecure程序包告诉服务器在读取或更改数据之前不要检查访问规则。默认情况下已安装此软件包，允许所有访问。删除后，没有客户端可以修改任何服务器数据。如果您返回到其中一个浏览器实例并尝试修改任何销售数据，您会注意到该应用程序尝试更改数据但很快恢复，这反映了对服务器访问的拒绝。（这是一个实际的延迟补偿示例。实际上，客户端中的数据会暂时更新，但是当权威服务器副本到达时，它将覆盖客户端的数据。）

删除insecure程序包之后，必须添加访问规则以明确允许（特定用户）访问特定数据。但是您还没有用户。接下来必须添加用户数据库和登录授权系统。

确保只有授权用户才能查看销售数据

在添加用户授权系统之前，请确保没有人可以看到销售数据。（授权用户以后可以查看它。）现在，即使他们不能修改数据，任何人都可以通过转到Sales Portal URL来查看数据。

删除默认的autopublish程序包，以防止任何流星收集数据从服务器推送到客户端-服务器明确发布并由客户端预订的数据除外：

meteor remove autopublish

如果您现在访问销售门户URL，则看不到区域销售数据和饼图。

通过`accounts`包添加用户登录

流星有可用的软件包，使添加用户登录和授权系统变得简单。 accounts-ui和accounts-password包涵盖了端到端的工作流程；它们包括所需的前端UI，后端数据库和客户端到服务器的API。您可以使用以下命令将所有这些功能添加到Sales Portal：

meteor add accounts-password accounts-ui

account-password软件包支持用户创建和通过email-address-plus-password登录。该实现使用安全远程密码协议，并且在客户端和服务器之间永远不会发送纯文本密码。

除了基于密码的登录之外，您还可以让用户通过Facebook，Twitter，微博，GitHub和Google进行登录-只需向您的应用程序添加一个或多个软件包即可。（社交网络OAuth登录支持对于面向消费者的应用程序很有价值，但在企业Intranet环境中的适用性可能有限。）

自定义用户登录界面

如果要进一步控制UI窗口小部件中使用的对话框的样式，可以添加无accounts-ui-unstyled的accounts-ui-unstyled软件包，而不是accounts-ui软件包。如果要完全接管UI，请查阅Meteor文档以获取有关该过程使用的API和数据流的描述。

登陆界面

accounts-ui软件包提供了一组预制CSS样式的UI小部件（并支持JavaScript代码），用于处理用户登录，新用户创建和密码丢失恢复。要添加这些小部件，请包含{{>loginButtons}}空格键模板。清单5显示了在sales / sales.html文件的一部分中添加到Sales Portal应用程序的登录名。

清单5.添加用户登录和授权系统

<body>
<div id="title">
   <div>
        {{> title }}
   </div>
   <div> 
       <div style="float: right">
       {{> loginButtons align="right"}} 
     </div>
   </div>
   </div>
  </div>

示例代码下载中的sales目录包含带有用户访问控制的完整的Sales Portal应用程序。运行此版本（或Bluemix托管的版本）以尝试登录。启动浏览器实例，并注意右上角的Sign in链接。单击它，您应该看到如图5所示的对话框。

图5. `accounts-ui`程序包的“登录”对话框（显示在Firefox中）

accounts-ui程序包使用Meteor集合和发布/订阅（也可以在您自己的代码中手动使用的相同工具）实现用户数据库。在当前版本的Sales Portal中，我在数据库中创建了两组用户凭据（电子邮件地址/密码）：joe@dwtestonly.com / abc123和sing@dwtestonly.com / abc123。打开两个浏览器实例，然后分别使用一个凭据登录。

您可以通过单击“ 登录”对话框中的“ 创建帐户”链接来创建更多用户。图6显示了“创建新用户”对话框，它是accounts-ui软件包的一部分。

图6.用于从`accounts-ui`程序包创建新用户帐户的对话框（在Chrome中显示）

将`owner`字段添加到区域销售数据

在当前版本的Sales Portal中，初始数据库内容已被修改。我使用清单6中的服务器端代码来播种数据。

清单6.服务器端数据播种代码

SalesData.remove({});
SalesData.insert({region:"US East", total: 2032333, row: roworder++});
SalesData.insert({region:"US Central", total: 150332,  row: roworder++, owner: joeid});
SalesData.insert({region:"US West", total: 1202412, row: roworder++});
SalesData.insert({region:"Asia Pacific", total: 701223, row: roworder});

清单6代码中添加了一个新的owner字段。在这种情况下， owner字段包含拥有美国中部地区数据的用户（joe@dwtestonly.com）的用户ID。此字段用于将区域销售数据更新仅限制为joe@dwtestonly.com。您可以通过查询Meteor.users集合来获取用户ID值。

细粒度选择性服务器数据发布

随着autopublish包装中取出，有必要从服务器明确的发布数据，并明确从客户端订阅。

对于销售门户网站，则服务器将发布的regional_sales使用清单7中的代码，这是销售/服务器/ sales.js文件的一部分集合。

清单7.从服务器选择性地发布数据

Meteor.publish("regional_sales", function () {
      if (this.userId) {  // only visible to logged in users
      // do not include the owner field for client access
      return SalesData.find({}, {fields: {"region": 1, "total":1 }}); 
      }
});

在清单7中，请注意this.userId的使用，以确保有效的用户登录到客户端会话。当Meteor代表用户运行服务器代码时， this.userId始终包含当前登录用户的唯一ID。如果当前浏览器实例没有登录用户，则this.userId为null，并且不会发布任何数据。此外，在清单7中，不是区域销售数据文档的所有字段（文档实质上是在MongoDB实例中具有可变字段数的记录）在发送给客户的集合中没有返回。特别是，文档的owner字段对客户端是隐藏的。这样，您可以使用查询仅将包含子集字段的集合子集仅发布给具有授权登录用户的客户端。此技术对于确保客户端浏览器无法访问某些文档中的敏感数据字段很有用。

客户端数据订阅

Sales Portal客户端代码明确订阅了服务器发布的regional_sales集合，如清单8所示。Meteor支持基于每个模板实例的订阅。使用每个模板的预订可确保仅推送模板实例呈现的数据，并在销毁模板实例时正确删除预订。

清单8.每个模板客户端订阅服务器中的集合

Template.piechart.onCreated(function() {
  this.subscribe("regional_sales");
});

Template.salesdata.onCreated(function() {
  this.subscribe("regional_sales");
});

添加访问规则以允许区域销售更新

删除insecure程序包后，将有效地拒绝所有用户更新销售数据。假设不同的地区销售数字由不同的用户拥有，则可以添加访问规则，以允许通过joe@dwtestonly.com更新美国中央数据。清单9在名为model.js的服务器端源文件中显示了此访问规则。

清单9.服务器端访问规则，允许所有者更新销售数据

SalesData.allow({
  update: function (userId, sales, fields, modifier) {
    if (userId !== sales.owner)
      return false; // not the owner

    var allowed = ["total"];
    if (_.difference(fields, allowed).length)
      return false; // tried to write to forbidden field

    return true;
  },

});

如果允许update ，则update操作的访问规则函数将返回true如果不允许更新，则将返回false 。清单9中的代码检查以确保用户是所有者，并且仅对total字段进行了修改。

流星热代码重新加载以进行迭代开发

为了节省开发和调试时间，即使在更改代码，CSS或模板时，也要使浏览器指向Meteor应用程序。流星的热代码重载功能可检测到更改并将其推送到客户端浏览器。

打开销售门户并以joe@dwtestonly.com登录。尝试修改美国西部的数据，请注意您不能。然后尝试修改美国中央数据。由于joe@dwtestonly.com是此数据的所有者，因此可以更新它。

启动另一个浏览器实例，并以sing@dwtestonly.com登录。尝试修改任何销售数据，请注意您不能。由于sing@dwtestonly.com不是任何销售数据的所有者，因此服务器将拒绝该用户的所有修改请求。

如果用户未登录，则可以使用客户端的currentUser帮助程序来避免呈现模板。将清单10中的代码添加到HTML文件中。

清单10.消除呈现空模板的尝试

<div id="container">
    <div id="salestable">
      {{#if currentUser}}
          {{> salesdata}}
      {{/if}}
    </div>
   <div>
      {{#if currentUser}}
           {{> piechart}} 
       {{/if}}
        </div>
</div>

现在，启动一个新的Sales Portal浏览器实例。请注意，没有数据可见。以sing@dwtestonly.com身份登录，请注意，现在您可以看到数据和饼图。现在尝试修改一个字段；同样，您不能修改它，因为您不是所有者。

启动另一个浏览器实例，以joe@dwtestonly.com登录，并注意数据可见。修改美国中央图，并注意饼图更新。确认sing@dwtestonly.com会话中的饼图也已更改。退出两个会话，然后注意数据现在消失了。

云中的应用程序部署

将Meteor应用程序部署到Bluemix很简单。按照我的截屏视频中的说明进行操作：

您还可以使用内置的Meteor命令将应用程序部署到Meteor的云托管服务器上。在撰写本文时，此服务是免费的。您从应用程序目录发出以下命令：

meteor deploy applicationname.meteor.com

该应用程序名称必须唯一，因为它将以http：// applicationname .meteor.com（在Internet上全球可用）提供。首次部署应用程序时，系统会提示您在meteor.com上创建一个帐户。

在撰写本文时，Meteor团队正在研究一种名为Galaxy的新产品：基于Docker容器的Kubernetes编排的可伸缩部署平台。

要将应用程序托管在自己的服务器基础结构上，您需要一台预装有Node.js和MongoDB功能的服务器。您可以使用以下命令创建应用程序的可部署捆绑包：

meteor build  directory to place deployable bundle

Node.js上的光纤

光纤可在单独的逻辑流（光纤）之间实现非抢占式多任务处理。光纤必须先明确产生执行，然后才能执行另一根光纤。因为您可以精确控制执行产生的时间，所以通常不需要保护光纤之间的共享状态。光纤的重要特征是提供的符号方便性：您可以编写看起来是顺序的代码（例如，每个逻辑流一个线程），而不是编写典型的Node.js深度嵌套的回调。

由于服务器端可部署的是Node.js应用程序，因此您可以根据自己的互操作性或扩展要求自定义部署拓扑。

Meteor服务器端代码在Node.js 光纤上运行（请参阅Node.js光纤上的侧边栏），提供了一个虚拟环境，您可以在其中进行编码，就好像一个线程正在处理每个传入请求（无共享状态）。这种方法可以简化服务器端JavaScript逻辑的编码。

Foto Share：移动照片共享服务

既然您已经了解了一些流星代码的设计和计划可以带给您什么，那么您可能已经在考虑一个或两个启动项目。下一个示例将为您创建移动设备的Meteor应用程序时提供更多思路。

流星和移动应用

从1.0版开始，Meteor就支持为Android和iOS设备创建移动应用程序。

设计具有竞争力的移动应用程序需要您超越编译可在设备上运行的代码的基本功能（Meteor的Isobuild工具提供的功能）。好的移动应用还必须：

即使未连接到互联网也可以使用
不需要用户每次访问应用程序时登录
拥有设备固有的外观
准备随时被暂停或中断，并在以后恢复
支持与实际的平台功能紧密集成，例如丰富的通知，云同步，图片库，联系人和社交网络

尽管可以使用Apache Cordova调用设备的本机API的功能通过自定义代码来满足这些要求，但这超出了当前Meteor版本（以及本教程）的范围。此处介绍的Foto Share应用程序是可在移动设备上使用的Meteor网络应用程序。

Foto Share是面向手机用户的基于概念验证的基于Web的照片共享服务。用户可以在手机上浏览自己的照片集，并通过单击“ 共享”按钮与朋友分享照片。图7显示了在Apple iPhone上运行的Foto Share。

图7. Apple iPhone上的Foto Share

就像在Sales Portal项目中一样，出于相同的安全原因， autopublish和insecure软件包已从Foto Share中删除。为了实现基于密码的登录，Foto Share添加了accounts-ui和accounts-password程序包。代码下载中的Foto Share应用程序具有与Sales Portal相同的两个用户。

要试用Foto Share，请首先从代码下载中的fotoshare目录运行该应用程序。（如果未安装Meteor，则可以运行Bluemix托管的版本。）如果您有两部手机，请将每个人的浏览器指向Foto Share。否则，请继续使用PC浏览器。一个使用sing@dwtestonly.com登录，另一个使用joe@dwtestonly.com登录（使用与Sales Portal相同的密码）。您可以通过扫过Sing的照片来浏览它们，或触摸两边的覆盖物。每张新照片都会滑入视图。您会发现Sing的所有照片都是夏威夷的场景，而Joe的则是阿兹台克人和玛雅人的遗物。

准备测试共享功能时，请在Joe的收藏集中选择一张照片，然后触摸手机上的“ 共享”按钮。在Sing的电话上，Meteor会动态更新已订阅的收藏集，现在可以在Sing的电话上查看Joe的共享图片。

Foto Share用户登录界面

能够放入可自定义的移动登录UI就像在Meteor Web应用程序中一样，将是很棒的选择，但是Meteor还没有移动友好的accounts-ui包。对于Foto Share，我使用了accounts-ui Web UI。图8显示了手机上显示的登录对话框。

图8. Foto Share登录屏幕

识别Foto Share中的React数据

从概念上讲，使React最自然的数据收集是用户照片集。这样做将使Meteor可以在用户共享他或她的照片时更新和重新呈现照片列表。这就是本概念证明中采用的方法。对于较大的系统，取决于图像的后端存储体系结构，您可能希望仅使照片的元数据具有React性，而不是使图像本身。

看一下清单11所示的服务器端数据播种代码，以了解照片的存储方式。

清单11. Foto Share服务器端数据播种和集合发布代码

Meteor.startup(function () {
      
      ...     
      
      Fotos.remove({});
      Fotos.insert({name:"pic1", img: readPic('pic1.jpg'),
       owner: sing._id, shared:false});
      Fotos.insert({name:"pic2", img: readPic('pic2.jpg'),
       owner: sing._id, shared:false});
      Fotos.insert({name:"pic3", img: readPic('pic3.jpg'),
       owner: sing._id, shared:false});
      Fotos.insert({name:"pic4", img: readPic('pic4.jpg'),
       owner: joe._id, shared:false});
      Fotos.insert({name:"pic5", img: readPic('pic5.jpg'),
       owner: joe._id, shared:false});
      Fotos.insert({name:"pic6", img: readPic('pic6.jpg'),
       owner: joe._id, shared:false});

    Meteor.publish("photos", function () {
      if (this.userId) {  // only visible to logged in users
       return Fotos.find( {$or : [{owner: this.userId}, {shared: true}]},
  {fields: {"name": 1, "img":1 , "owner": 1}}); 
      }

  });
});

服务器发布的收藏集是Fotos 。 Fotos代表照片的每个文档都有name ， img和owner字段。从相应的本地存储的JPG文件中读取img字段。再次注意，订阅客户端收到的数据仅包含该用户自己的照片，以及其所有者共享的任何其他照片。在这里，选择性字段过滤也用于从客户端接收的Foto集合中删除shared字段。 owner字段尚未被过滤掉，因为客户端可能希望显示共享图片的所有者名称。清单12显示了readPic()辅助函数。该函数使用Meteor的Assets.getBinary()帮助程序将图像读取到内存中，然后将二进制流编码为base64以存储到img字段中。当在客户端检索照片时，此格式很方便显示照片。 Assets包可用于访问专用子目录下仅对服务器可用的资源。

清单12.读取MongoDB存储的JPG图像的Helper函数

function readPic(infile)  {       
      var data = Assets.getBinary('images/' + infile);
      var buf =  new Buffer(data);
      var tp = buf.toString('base64');
      return  'data:image/jpeg;base64,' + tp;       
  }

从数据库重构图像时，模板代码利用了大多数现代浏览器中<IMG>标记中的数据URL支持。 <IMG>标记的SRC属性支持数据URL，从而可以通过base64编码的字符串动态设置图像的二进制位。清单13显示了photoitem模板。在此模板中，照片的base64编码img字段用于渲染图像。

清单13.使用数据URL设置`IMG`标签的`SRC`属性

<template name="photoitem">
  <div class="m-item">
       <img id="{{_id}}" src="{{img}}" />
  </div>
</template>

流星远程方法：自定义RPC变得简单

即使删除了insecure程序包，也没有在Foto Share中创建访问规则。没有访问规则，任何客户端都无法通过Minimongo更新数据。但是，当点击“ 共享”按钮时，照片的share字段必须已经以某种方式进行了更新。怎么样？答案是流星远程方法。

流星远程方法是一种远程过程调用（RPC）机制。您可以分两个步骤创建从客户端到服务器的RPC调用：

在服务器端定义一个JavaScript函数。
使用Meteor.call()远程调用服务器功能，可以选择传递参数和回调。

流星负责所有端点设置，删除和之间的数据编组杂务。

当您在Foto Share中点击Share按钮时，客户端将在名为shareThisPhoto的服务器上调用流星远程方法，并将照片的ID作为参数传递。在服务器端，代码首先检查调用者是否是照片的所有者，并且只有当所有者调用方法时，它才会更新照片的shared字段。清单14显示了服务器端的shareThisPhoto代码。

清单14.服务器端的Meteor远程方法来更新照片的`shared`字段

Meteor.methods({
  shareThisPhoto: function (photoId) {
var curPhoto = Fotos.findOne({_id: photoId});
    if (this.userId !== curPhoto.owner)  {
      return "Cannot share this photo.";
    } else {
      Fotos.update({_id: photoId}, {$set :{shared: true}});
      return "Photo shared!";
    }

  },
});

清单15显示了当您点击Share按钮时调用远程方法的客户端代码。

清单15.轻按“共享”按钮时调用远程方法的客户端代码

Template.photopage.events({
  'click .fs-logoff': function () {
    Meteor.logout(function() {

      location.reload();
    });
  },
  
  'click .fs-share': function() {
      var curselected = $('.m-active > img').attr('id');

      Meteor.call('shareThisPhoto', curselected, function (error, retval) {
 console.log(retval);
      });
  }
});

我选择了RPC方法来演示流星远程方法。您可以改为定义访问规则，以允许所有者更新shared字段。在这种情况下，您必须在用户点击“共享”按钮时在本地更新照片的shared字段。流星的Minimongo将更新推送到服务器，然后推送到所有其他订阅的客户端。

构建现代Web应用程序的平台

异步数据更新流

订阅的数据更改通过DDP从服务器异步推送到客户端。服务器端的大多数数据源都是同步的（例如典型的RDBMS）。过去，Meteor使用轮询和差异算法来生成异步更新流。当前版本的Meteor具有更高效的驱动程序，可以分析MongoDB操作日志以在可能的情况下生成流（称为oplog tailing ）。在不久的将来，Meteor可能会与来自本地实时数据库（例如RethinkDB的变更提要）的异步提要集成。

既然您已经研究了本文的示例应用程序，那么应该知道Meteor是为实时异步流更新Web应用程序而设计的。

这些类型的应用程序通常由高度交互的单页UI组成。用户通常不会遇到新的页面加载；取而代之的是，响应于用户交互（或数据更改），所显示页面的一部分立即更新，几乎没有或没有网络往返延迟。单页面界面绝不会限制应用程序，因为页面的某些部分可以通过多种方式进行更新。这种设计让人想起独立的桌面应用程序，例如文字处理器或电子表格。

这些类型的Web应用程序通常会在客户端浏览器上加载JavaScript应用程序代码。该代码通过动态操纵浏览器的DOM，修改CSS样式，生成新HTML元素/代码/样式以及使用其他浏览器提供的API来管理与用户的交互。与用户的所有接口均由客户端代码控制；除初始应用程序加载外，没有通过网络加载其他HTML或样式。相同的代码还可以在客户端和服务器之间来回穿梭数据，以实现应用程序功能。实际上，浏览器将加载并运行以JavaScript编写的富客户端（有时称为胖客户端）应用程序。

在服务器端，将端点设置为安全地从客户端获取和同步数据。旧版后端可以具有RPC，基于XML的Web服务，RESTful服务或其他JSON样式的RPC调用。现代后端很可能会通过专有协议从服务器异步传输数据，这些专有协议旨在有效地处理网络上的数据，对偶发断开具有弹性，支持各种电流传输以及拓扑可伸缩性。

结论

流星采访

Sing Li在与Meteor联合创始人Matt DeBergalis进行的访谈中了解有关Meteor项目的背景和产品计划的更多信息。

流星团队正在努力为每个想要创建单页，高度交互的实时Web应用程序的人提供一个公平的竞争环境。与传统的一次页面样式相比，大多数用户更喜欢这种应用程序。许多主要的基于Web的邮件和办公服务（包括Facebook的Instagram，Google Gmail，Microsoft Hotmail和Yahoo Mail）都使用此应用程序体系结构。除了大型技术公司或资金最雄厚的初创公司开发的Web应用程序实例之外，我们看不到其他这类Web应用程序实例，因为它们难以构建，需要大量的精力和资源。流星宣称的核心任务是提供一个可以轻松构建此类应用程序的基础。

流星进入现场使现在成为重新审视您已久久遗忘的所有那些早已被遗忘的应用程序想法的好时机，并查看将它们转换为面向公众的服务是否可能是一项有吸引力的冒险。如果您已经在创建或维护Web应用程序，那么Meteor可能是不断扩展的选项中功能最强大的工具。

翻译自: https://www.ibm.com/developerworks/web/library/wa-meteor-webapps/index.html