使用 Meteor 輕松開發實時網站
快速實現幾乎實時地響應用戶交互的數據驅動應用程序
由於 Web 無處不在，即便是很小的數據交付延遲都有可能刺激到用戶。他們希望數據即時更新。不幸的是，Web 技術無法實現這種實時訪問。盡管數據訪問正快速標准化為一些對象關系映射 (Object-Relational Mapping, ORM) 模型，但實時通信沒有任何類似的解決方案。本文將討論 Meteor，這是一個旨在解決此問題的激動人心的新 JavaScript 框架。
Meteor 是一種新的 JavaScript 框架，用於自動化和簡化實時運行的 Web 應用程序的開發。它使用一個名為分布式數據協議 (Distributed Data Protocol, DDP) 的協議來處理實時通信，使用 WebSockets 的新浏覽器以及使用 Asynchronous JavaScript + XML (Ajax) 長輪詢的舊浏覽器來支持這種協議。在這兩種情況下，浏覽器到服務器的通信是透明的。
DDP 協議旨在處理 JavaScript Serialized Object Notation (JSON) 文檔集合，使 JSON 文檔容易創建、更新、刪除、查詢和訪問。因為 DDP 是一種開源協議，所以您可將它連接到任何客戶端或數據存儲。它為 MongoDB 提供了開箱即使用支持。
事實上，Meteor 提供了兩個 MongoDB 數據庫：一個客戶端緩存數據庫和服務器上的一個 MongoDB 數據庫。當一個用戶更改一些數據時（例如通過單擊 Save），在浏覽器中運行的 JavaScript 代碼會更新本地 MongoDB 中的相應的數據庫項，然後向服務器發出一個 DDP 請求。該代碼立即像操作已獲得成功那樣繼續運行，因為它不需要等待服務器回復。與此同時，服務器在後台更新。如果服務器操作失敗或返回一個意外結果，那麼客戶端 JavaScript 代碼會依據從服務器新返回的數據立即進行調整。這種調整稱為延遲補償，向用戶提供了更高的認知速度。
顯然，甚至連 Meteor 的模板系統也是為簡化實時通信而設計的。在大多數 Web 框架中，您可以輕松地混合使用超文本標記語言 (HTML) 和代碼，或者與 HTML 等效的標記，比如 HTML 抽象標記語言 (Haml)。這使您能夠輕松地將來自數據庫的動態值插入發送給用戶的頁面中。在這之後，您應該負責准備提供一個系統來觀察對數據的更改，然後更新您的標記。但是，Meteor 中的模板系統用於記錄訪問了模板中的哪些數據，並自動回調，以便在底層數據更改時調用此 HTML，使實時模板變得更加簡單快捷。
本文示例源碼下載：
------------------------------------------分割線------------------------------------------
免費下載地址在 http://linux.linuxidc.com/
用戶名與密碼都是www.linuxidc.com
具體下載目錄在 /2014年資料/9月/26日/使用 Meteor 輕松開發實時網站
下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm
------------------------------------------分割線------------------------------------------
Meteor 的模板功能可使眾多實時應用程序更容易編寫。例如，假設您希望創建一個的站點，用戶可在其中輸入鏈接（即統一資源定位符，URL），並投票肯定和否決它們，而且贏得流行度競賽的 URL 會顯示在一個列表頂部。通過使用 Meteor，您可以輕松地實時編寫這樣一個應用程序，以便用戶可在其他用戶投票時看見他們的 65 張選票。
要安裝 Meteor，可以將 清單 1 中所示的代碼鍵入到一個 Linux® 或 Mac OS® X 終端中。Meteor 不支持 Microsoft® Windows®。
curl https://install.meteor.com > install_meteor.sh chmod u+x install_meteor.sh ./install_meteor.sh
現在您可創建一個新項目。
meteor 命令可自動化包含新項目創建過程中 Meteor 需要操作的一切內容的。鍵入 清單 2 中所示的命令，以便創建一個名為 realtime_links 的項目。
meteor realtime_links cd realtime_links
Meteor 創建了一個目錄，其中包含一個 HTML 文件、一個 JavaScript 文件和一個級聯樣式表 (CSS) 文件。最後一個文件是一個標准 CSS 文件，但前兩個值得討論一下。您可以從 下載 一節下載 realtime_links.html 和 realtime_links.js 文件的完整版本。
清單 3 顯示了 realtime_links.html 文件的標頭和正文片段。
<head>
<title>Realtime Links Demo</title>
</head>
<body>
{{> header }}
{{> link_list }}
{{> add_new_link }}
</body>
可以看到，HTML 模板的開頭非常簡單。無需擔憂如何包含 BODY 標記、DOCTYPE 修飾符甚至 JavaScript 和 CSS 文件。Meteor 會為您處理所有這些操作。有關 Meteor 的 JavaScript 和 CSS 包的更多信息，請參閱 參考資料，獲取 Meteor 網站的鏈接。
{{> 語法表示 “呈現此模板”。可以看到，realtime_links.html 呈現了 3 個模板：
header 是一個簡單頭部，顯示了數據庫中的鏈接數量。link_list 顯示了鏈接的列表和它們的相關投票。add_new_link 是添加新鏈接的表單。清單 4 顯示了 header 模板。
header 模板<template name="header">
<h1>The Link Collection</h1>
<p>We currently have {{collection_size}} links.</p>
</template>
header 模板呈現了一個 h1 標記以及對集合大小的簡短描述。collection_size 方法是在 JavaScript 文件 realtime_links.js 中定義的（這將在 下一節 中詳細討論）。Meteor 自動觀察某個模板插入了哪些數據片段。所以，在更新集合大小時，header 模板會自動更新。
請注意，這裡使用的 {{ ... } 語法類似於 Ruby on Rails 中的 <%= ... %> 或 PHP 中的 <?= ... ?>。它可插入任意代碼，所以能夠以這種方式插入任何有用的動態表達式。
清單 5 顯示了 link_list 模板。
link_list 模板<template name=
"link_list">
<ul>
{{#each links }}
<li> {{> link_detail }} </li>
{{/each }}
</ul>
</template>
如您所見，清單 5 中的代碼是一個鏈接列表。realtime_links.js JavaScript 文件中的 links 方法提供了此列表。系統會向每個鏈接呈現link_detail 模板。請注意，無需傳遞任何參數，因為 Handlebars 的 #each 循環會將每次迭代的當前上下文設置為當前對象。換句話說，會將 link_detail 模板的本地方法正確解釋為每個鏈接對象的方法。
清單 6 顯示了 link_detail 模板，它控制了為每個鏈接顯示的數據。
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 元素簡單地顯示當前鏈接的 URL。然後會提供一個間斷的統計清單，其中包含一個鏈接被支持的次數、被否決的次數和它的淨分數（也就是兩個值的差）。最後，有兩個按鈕：一個用於投贊成或支持票，另一個用於投反對或否決票。JavaScript 文件定義這些按鈕的行為，但是在深入介紹此主題前，還有一個模板需要了解。
清單 7 顯示了 add_new_link 模板。
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 的界面。
更多詳情見請繼續閱讀下一頁的精彩內容： http://www.linuxidc.com/Linux/2014-09/107243p2.htm
