什么是 Meteor？Meteor 是一種新的 JavaScript 框架，用于自動化和簡化實時運行的 Web 應(yīng)用程序的開發(fā)。它使用一個名為分布式數(shù)據(jù)協(xié)議 (Distributed Data Protocol, DDP) 的協(xié)議來處理實時通信，使用 WebSockets 的新瀏覽器以及使用 Asynchronous JavaScript + XML (Ajax) 長輪詢的舊瀏覽器來支持這種協(xié)議。在這兩種情況下，瀏覽器到服務(wù)器的通信是透明的。 DDP 協(xié)議旨在處理 JavaScript Serialized Object Notation (JSON) 文檔集合，使 JSON 文檔容易創(chuàng)建、更新、刪除、查詢和訪問。因為 DDP 是一種開源協(xié)議，所以您可將它連接到任何客戶端或數(shù)據(jù)存儲。它為 MongoDB 提供了開箱即使用支持。 事實上，Meteor 提供了兩個 MongoDB 數(shù)據(jù)庫：一個客戶端緩存數(shù)據(jù)庫和服務(wù)器上的一個 MongoDB 數(shù)據(jù)庫。當(dāng)一個用戶更改一些數(shù)據(jù)時（例如通過單擊 Save），在瀏覽器中運行的 JavaScript 代碼會更新本地 MongoDB 中的相應(yīng)的數(shù)據(jù)庫項，然后向服務(wù)器發(fā)出一個 DDP 請求。該代碼立即像操作已獲得成功那樣繼續(xù)運行，因為它不需要等待服務(wù)器回復(fù)。與此同時，服務(wù)器在后臺更新。如果服務(wù)器操作失敗或返回一個意外結(jié)果，那么客戶端 JavaScript 代碼會依據(jù)從服務(wù)器新返回的數(shù)據(jù)立即進行調(diào)整。這種調(diào)整稱為延遲補償，向用戶提供了更高的認知速度。 顯然，甚至連 Meteor 的模板系統(tǒng)也是為簡化實時通信而設(shè)計的。在大多數(shù) Web 框架中，您可以輕松地混合使用超文本標記語言 (HTML) 和代碼，或者與 HTML 等效的標記，比如 HTML 抽象標記語言 (Haml)。這使您能夠輕松地將來自數(shù)據(jù)庫的動態(tài)值插入發(fā)送給用戶的頁面中。在這之后，您應(yīng)該負責(zé)準備提供一個系統(tǒng)來觀察對數(shù)據(jù)的更改，然后更新您的標記。但是，Meteor 中的模板系統(tǒng)用于記錄訪問了模板中的哪些數(shù)據(jù)，并自動回調(diào)，以便在底層數(shù)據(jù)更改時調(diào)用此 HTML，使實時模板變得更加簡單快捷。 回頁首 示例：鏈接流行度競賽Meteor 的模板功能可使眾多實時應(yīng)用程序更容易編寫。例如，假設(shè)您希望創(chuàng)建一個的站點，用戶可在其中輸入鏈接（即統(tǒng)一資源定位符，URL），并投票肯定和否決它們，而且贏得流行度競賽的 URL 會顯示在一個列表頂部。通過使用 Meteor，您可以輕松地實時編寫這樣一個應(yīng)用程序，以便用戶可在其他用戶投票時看見他們的 65 張選票。 回頁首 安裝 Meteor要安裝 Meteor，可以將 清單 1 中所示的代碼鍵入到一個 Linux? 或 Mac OS? X 終端中。Meteor 不支持 Microsoft? Windows?。 清單 1. 安裝 Meteorcurl https://install. > install_meteor.sh
chmod u+x install_meteor.sh
./install_meteor.sh 現(xiàn)在您可創(chuàng)建一個新項目。 回頁首 創(chuàng)建一個新項目meteor 命令可自動化包含新項目創(chuàng)建過程中 Meteor 需要操作的一切內(nèi)容的。鍵入 清單 2 中所示的命令，以便創(chuàng)建一個名為 realtime_links 的項目。
清單 2. 創(chuàng)建您的 Meteor 項目meteor realtime_links
cd realtime_links Meteor 創(chuàng)建了一個目錄，其中包含一個 HTML 文件、一個 JavaScript 文件和一個級聯(lián)樣式表 (CSS) 文件。最后一個文件是一個標準 CSS 文件，但前兩個值得討論一下。您可以從 下載 一節(jié)下載 realtime_links.html 和 realtime_links.js 文件的完整版本。 回頁首 realtime_links.html 文件清單 3 顯示了 realtime_links.html 文件的標頭和正文片段。 清單 3. realtime_links.html 標頭和正文片段<head>
<title>Realtime Links Demo</title>
</head>
<body>
{{> header }}
{{> link_list }}
{{> add_new_link }}
</body>可以看到，HTML 模板的開頭非常簡單。無需擔(dān)憂如何包含 BODY 標記、DOCTYPE 修飾符甚至 JavaScript 和 CSS 文件。Meteor 會為您處理所有這些操作。有關(guān) Meteor 的 JavaScript 和 CSS 包的更多信息，請參閱 參考資料，獲取 Meteor 網(wǎng)站的鏈接。 {{> 語法表示 “呈現(xiàn)此模板”。可以看到，realtime_links.html 呈現(xiàn)了 3 個模板：
清單 4 顯示了 header 模板。 清單 4. realtime_links.html header 模板<template name="header">
<h1>The Link Collection</h1>
<p>We currently have {{collection_size}} links.</p>
</template>header 模板呈現(xiàn)了一個 h1 標記以及對集合大小的簡短描述。collection_size 方法是在 JavaScript 文件 realtime_links.js 中定義的（這將在 下一節(jié) 中詳細討論）。Meteor 自動觀察某個模板插入了哪些數(shù)據(jù)片段。所以，在更新集合大小時，header 模板會自動更新。
請注意，這里使用的 {{ ... } 語法類似于 Ruby on Rails 中的 <%= ... %> 或 PHP 中的 <?= ... ?>。它可插入任意代碼，所以能夠以這種方式插入任何有用的動態(tài)表達式。 清單 5 顯示了 link_list 模板。 清單 5. realtime_links.html link_list 模板<template name=
"link_list">
<ul>
{{#each links }}
<li> {{> link_detail }} </li>
{{/each }}
</ul>
</template>如您所見，清單 5 中的代碼是一個鏈接列表。realtime_links.js JavaScript 文件中的 links 方法提供了此列表。系統(tǒng)會向每個鏈接呈現(xiàn)link_detail 模板。請注意，無需傳遞任何參數(shù)，因為 Handlebars 的 #each 循環(huán)會將每次迭代的當(dāng)前上下文設(shè)置為當(dāng)前對象。換句話說，會將 link_detail 模板的本地方法正確解釋為每個鏈接對象的方法。 清單 6 顯示了 link_detail 模板，它控制了為每個鏈接顯示的數(shù)據(jù)。 清單 6. realtime_links.html link_detail 模板<template name="link_detail">
<div id="link-{{id}}">
<h1>{{url}}</h1>
<p><strong>Stats:</strong> up: {{thumbs_up}} down: {{thumbs_down}}
net score: {{score}}</p>
<input type="button" value="Thumbs Up"
class="thumbs_up" url="{{url}}" />
<input type="button" value="Thumbs Down"
class="thumbs_down" url="{{url}}" />
</div>
</template>h1 元素簡單地顯示當(dāng)前鏈接的 URL。然后會提供一個間斷的統(tǒng)計清單，其中包含一個鏈接被支持的次數(shù)、被否決的次數(shù)和它的凈分數(shù)（也就是兩個值的差）。最后，有兩個按鈕：一個用于投贊成或支持票，另一個用于投反對或否決票。JavaScript 文件定義這些按鈕的行為，但是在深入介紹此主題前，還有一個模板需要了解。
清單 7 顯示了 add_new_link 模板。 清單 7.
realtime_links.html add_new_link 模板<template name="add_new_link">
<div id="new_link_form">
URL: <input id="url">
<input type="button" value="Click" id="add_url" />
</div>
</template>該模板只是一個文本輸入字段和一個按鈕，它們共同形成了向您列表中添加新 URL 的界面。 回頁首 realtime_links.js 文件realtime_links.js 中的 JavaScript 代碼控制來自您程序的數(shù)據(jù)訪問和事件回調(diào)，無論是在客戶端還是在服務(wù)器上。if (Meteor.is_client) 語句用于標記客戶端部分，if (Meteor.is_server) 語句用于標記服務(wù)器部分。Meteor 提供了一種保護敏感代碼的方式，阻止惡意客戶端看到源代碼。參見 參考資料 中的 Meteor 文檔鏈接，了解有關(guān)的更多細節(jié)。
清單 8 顯示了標頭和鏈接列表幫助器函數(shù)。 清單 8. 標頭和鏈接列表幫助器函數(shù)Template.header.collection_size = function () {
return Links.find({}).count();
};
Template.link_list.links = function () {
return Links.find({}, {sort : {score: -1} });
};header 模板使用清單中的第一個幫助函數(shù)，該函數(shù)返回 links 集合的大小。link_list 模板使用第二個幫助器函數(shù)，它返回從最高分到最低分排序的所有鏈接。
清單 9 擁有對 link_detail 模板的兩個事件回調(diào)。 清單 9. link_detail 事件回調(diào) Template.link_detail.events =
{
'click input.thumbs_up' : function () {
Meteor.call('vote', this.url, 'thumbs_up');
},
'click input.thumbs_down' : function
() {Meteor.call('vote', this.url, 'thumbs_down');}
};每個事件回調(diào)處理一個支持或反對單擊事件。在每種情況下，它們使用客戶端上的 Meteor.call 在服務(wù)器上執(zhí)行一次函數(shù)調(diào)用?？梢钥吹綇目蛻舳藢Ψ?wù)器執(zhí)行調(diào)用很簡單。例如，序列化會自動處理。 清單 10 顯示了對用戶可添加新鏈接的表單的事件回調(diào)。 清單 10. 對添加新鏈接表單的事件回調(diào) Template.add_new_link.events = {
'click input#add_url' :
dfunction () {
var new_url = $('#url').val();
var url_row = Links.findOne( {url:new_url} );
if(!url_row){
Links.insert( { url : new_url,
score: 0,
thumbs_up: 0,
thumbs_down: 0 });
}
Meteor.call('vote', url, 'thumbs_up');
}
};首先，該表單會嘗試找到一個具有所請求 URL 的現(xiàn)有鏈接對象。如果它找到這樣一個對象，那么它會將該請求統(tǒng)計為對這個現(xiàn)有鏈接對象的一次投票。如果未找到，那么它會創(chuàng)建一個新鏈接對象，并對這個新對象執(zhí)行一次 thumbs_up 投票。 這部分代碼演示了 Meteor 作為一種一流技術(shù)的優(yōu)點和不足，它還不適合用于生產(chǎn)。如您所見，客戶端可在 links 集合上調(diào)用 insert。盡管這對開發(fā)人員很有用，但從安全角度講，這是一個問題。幸運的是，開發(fā)人員正在積極研究該代碼的一個 auth 分支，這個分支可以實現(xiàn)強大的身份驗證功能，同時仍然保持 Meteor 富有吸引力的很多強大功能和靈活性。 此外，需要認識到 Meteor 目前沒有實現(xiàn)所有 MongoDB 功能。例如，Meteor 不支持 MongoDB upsert，該操作插入新數(shù)據(jù)或修改舊數(shù)據(jù)。如果 Meteor 支持 upsert，那么您可以編寫 清單 11 中所示的函數(shù)。 清單 11. 一個使用 upsert 的假想的添加新鏈接表單事件回調(diào) Template.add_new_link.events = {
'click input#add_url' : function () {
var new_url = $('#url').val();
Links.update( { url : new_url},
{ $set: {url : new_url},
$inc: { votes : 1 } } , true );
}
};如您所見，使用 upsert 的代碼更短。它運行得可能更快，因為它僅需要與服務(wù)器執(zhí)行一次往返傳輸。如果順利的話，Meteor 很快就會實現(xiàn)對 upsert 和其他新功能的支持。 清單 12 中的代碼在服務(wù)器上運行。它是一個可由客戶端代碼調(diào)用的方法。此方法（vote）允許客戶端對一個流行的 URL 投 thumbs_up 或 thumbs_down 票。它使用 Mongo 的 $inc 運算符遞增適當(dāng)?shù)耐镀庇嫈?shù)器。它還在必要時遞增或遞減總數(shù)。Meteor.startup 方法僅支持代碼在服務(wù)器啟動時運行。Meteor.methods 函數(shù)然后定義可在客戶端上調(diào)用 Meteor.call 的函數(shù)，如前面的 清單 9 中所述。 清單 12. 服務(wù)器端的 vote 方法代碼if (Meteor.is_server) {
Meteor.startup(function () {
Meteor.methods({
vote: function (url, field){
new_obj = { $inc: { } };
if(field =='thumbs_up'){
new_obj['$inc']['thumbs_up'] = 1;
new_obj['$inc']['score'] = 1;
}else{
new_obj['$inc']['thumbs_down'] = 1;
new_obj['$inc']['score'] = -1;
}
Links.update( { url : url}, new_obj );
}
});
});
}與 清單 10 一樣，您可在客戶端上運行 清單 12 中的代碼。但是，出于演示目的，將會在服務(wù)器上運行該代碼。隨著 Meteor 的安全模型得到改進，可能會將敏感的代碼開發(fā)為服務(wù)器端函數(shù)，如下面清單所示。 回頁首 查看您的應(yīng)用程序的實際效果現(xiàn)在可啟動您的 Meteor 應(yīng)用程序（如 清單 13 中所示）并查看它的實際效果。 清單 13. 啟動您的系統(tǒng)在啟動后，Meteor 會在端口 3000 上運行。打開一個 Web 瀏覽器并訪問 http://localhost:3000/。 如果在 Add a URL 下輸入一個 URL 并單擊 Add，則看到一個 URL 和評分 one。然后您可以單擊 Thumbs Up 或 Thumbs Down 按鈕對該 URL 進行投票。這會實時進行，而不會刷新頁面。如果打開一個新 Web 瀏覽器，可在另一個窗口中執(zhí)行相同操作，這時第一個窗口會立即更改。 當(dāng)添加多個 URL 時，可以看到一個具有最高評分的 URL（分數(shù)被定義為支持票數(shù)減去反對票數(shù)）顯示在最頂部。在投支持或反對票時，URL 會隨著其評分更改而在列表中向上或向下移動。這是實時進行的，在輸入投票時，多個瀏覽器上的多個用戶都會收到相同的數(shù)據(jù)。 回頁首 結(jié)束語Meteor 是一個極具優(yōu)勢的 Web 框架，它包含了許多有趣的概念。它對實時數(shù)據(jù)的支持既富有吸引力又至關(guān)重要，特別是在考慮到其他技術(shù)實時支持充其量是一種事后行為時。隨著實時交互變得對未來的 Web 更加重要，Meteor 輕松快速地實時處理復(fù)雜數(shù)據(jù)集的能力也將變得更加重要。
回頁首 下載
|
