使用 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