使用Meteor配合Node.js編寫實時聊天應用的范例

 　　這篇文章主要介紹了使用Meteor配合Node.js編寫實時聊天應用的范例,Node.js作為異步框架,其最突出的使用便是用來編寫實時應用程序，需要的朋友可以參考下

　　我經常見到被拿來與Derby.js做比較的框架是Meteor.js. 與Derby相似的是,它也能在多個客戶端下實時更新views, 盡管做法上可能跟Derby有點不同. Derby可以較容易的使用多種數據庫, 而Meteor則只親近於MongoDB. 事實上, 通過如Mongoose客戶端接入數據庫的API與你在服務端所期望的已經非常接近了.

　　雖然現在meteor是個有一些缺點和爭議的框架, 但Meteor看起來是非常有趣的選擇用來建立有實時需求的應用. 個人還是喜歡Derby基於傳統回調的編程形式更吸引我, 但在Derby的強大背後,卻缺乏健壯的文檔和一個大的開發者社區, 這無疑是個很大的打擊. 或許這會隨著時間推移而有所改變吧, 但比起Meteor來說還是會慢很多, 因為後者最近獲得了1100萬美元的資金. 這筆財政資金確保了Meteor的存在以及得到持續的支持. 對於那些需要財政與發展穩定的框架的開發者而言, 這筆資金只會讓Meteor更加優勝. 今天,讓我們一起來看看如何新建一個真實的但又簡單的Meteor應用. 本質上說, 這是基於Tom的 Vimeo screencast的一個新手指引. 與Tom的 Vimeo screencast最大的不同是處理事件的方式. 比起復制粘貼一個Meteor示例的代碼, 我會一步一步的通過自己的方式來處理使用Enter鍵來提交一則訊息. 讓我們開始吧.

　　創建一個 Meteor應用

　　Derby和Meteor 他們共有的一個大加分是他們各自的命令行工具. 與Derby使用Node的內置的 npm 工具所不同的是, Meteor使用的是它自己的.

　　在終端(Mac OS X 和 Linux),執行如下的命令. (在這之前請確保你已經安裝了Node)

　　?

　　1$curl https://install.meteor.com | /bin/sh

　　Metror會自己搞定,並安裝命令行工具.

　　要新建一個項目, 先轉到你的工作目錄然後運行下邊的代碼. 這會創建一個目錄, 裡邊包括有Meteor和一個最基本模板程序.

　　?

　　1$meteor create chat

　　現在, 你可以轉到該目錄並運行下面的代碼讓它跑起來

　　?

　　1

　　2$cdchat$meteor

　　Running on: http://localhost:3000/

　　想要看到這個最基礎的應用程序, 你只需要在任意一款不過時的浏覽器下打開http://localhost:3000/

　　只要你想, 你就可以使用Meteor內置的meteor deploy命令來部署你的應用到Meteor自己的服務器上

　　?

　　1$meteor deploy my-app-name.meteor.com

　　只要你更新保存了你的代碼, 所有連接上的浏覽器都會實時更新其頁面.

　　開發聊天應用

　　在Meteor Create指令產生的文件夾中，你可以看見不同的文件。如果你知道怎麼查看隱藏文件的話，你還可以看見個.meteor這個文件夾。這個文件夾包含了Meteor它本身，以及MongoDB的數據文件。

　　在你App的根目錄文件夾下，你應該可以看到這三個文件：chat.html, chat.css和chat.js。這三個文件都是自帶說明部分的。HTML文件包含了App的模型以及外觀，他們都是被chat.css定義的。Javascript文件包含了在client和server端要執行的腳本。有一點很重要，不要把任何東西放進這個腳本文件，比如說配置參數和密碼，因為任何人都可以通過查看你應用程序的代碼看到這些。

　　用你喜歡的文本編輯軟件打開chat.js這個文件。就個人而言，我喜歡用Sublime Text2，因為這個工具簡潔還有多種鼠標狀態提示。

　　你可以在chat.js文件中查看到下面這樣一段代碼：

　　?

　　1if (Meteor.is_client) { Template.hello.greeting = function () { return "Welcome to chat."; }; Template.hello.events = { 'click input' : function () { // template data, if any, is available in 'this' if (typeof console !== 'undefined') console.log("You pressed the button"); } }; } if (Meteor.is_server) { Meteor.startup(function () { // code to run on server at startup }); }

　　在Meteor.js中注意if段落中Meteor.is_client和Meteor.is_server的兩個部分。在這些區塊中的代碼會分開執行，當運行這段代碼的機器是client端則只運行clint塊中的代碼，server同理。這就說明了Meteor在實際運用中的代碼共享能力。

　　刪除掉if中所有Meteor.is_client和Meteor.is_server段的代碼，最後只剩下一段：

　　?

　　1if (Meteor.is_client) { }

　　注意，當你保存了 腳本文件之後，你的浏覽器會立刻刷新加載這段新的代碼。

　　創建視圖(View)

　　在我們正式對這個腳本文件動工之前, 我們需要先新建一個視圖用來展示聊天記錄. 在編輯器裡打開chat.html並刪除body標簽裡邊的代碼. 包括名為hello的template標簽.只留如下部分

　　?

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　

　　

　　

　　

　　接著在body標簽裡添加下面這句

　　?

　　1{{> entryfield}}

　　Meteor使用的模板系統與Mustache很相似.大括號{% raw %}{{}}{% endraw %}表示要呈現的內容. 通過簡單地在兩對大括號裡添加內容如{% raw %}{{hello}}{% endraw %}, 模板系統會用hello這個變量的值來替換它. 後面會更詳細的介紹.

　　注意到了在entryfield這個詞前面有個大於號>了嗎? 使用該符號來指定渲染哪一個模板.

　　?

　　1

　　2

　　3

　　在這個例子中,template標簽有單個屬性, 即模板的名字, 這就是我們要渲染的模板, 注意, 模板的名字要和body裡的代碼指定的模板名字一樣 ({{> entryfield}})

　　查看浏覽器, 你會發現頁面已經刷新了, 輸入框已經呈現出來了.

　　接下來, 在body裡邊添加另外的一個mutache標簽用以渲染訊息列表

　　?

　　1{{> messages}}

　　最後, 我們還需要新建一個名叫messages的模板. 在entryfield模板下面添加下面這段代碼

　　?

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　注意到each子句. 在Meteor中你可以使用如下的語法來遍歷一個數組模板

　　?

　　1

　　2{{#each [name of array]}}

　　{{/each}}

　　使用each循環時,上下文會有所改變. 當引用變量的時候, 實際上你引用的是每一個數組元素的值.

　　例如,在我們的chat應用中, 我們遍歷了數組模板"messages"裡邊的每個元素, 該數組可以像下面這樣,

　　?

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　8

　　9

　　10[

　　{

　　"name": "Andrew",

　　"message": "Hello world!"

　　},

　　{

　　"name": "Bob",

　　"message": "Hey, Andrew!""

　　}

　　]

　　然後, 在each循環中, 你可以看到{% raw %}{{message}}{% endraw %}{% raw %}{{name}}{% endraw %}, 這會引用 每一個數組元素的值來替代(Andrew 和 Bob 替換 name, 以及各自的問候信息.)

　　當返回到你的浏覽器, 你還看不到任何的改變. 因為訊息數組還沒被傳送到模板, 所以Meteor遍歷不到任何東西來呈現.

　　你的chat.html最後應該是這樣的

　　?

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　8

　　9

　　10

　　11

　　12

　　13

　　14

　　15

　　16

　　17

　　18

　　19

　　20

　　21

　　

　　

　　

　　{{> entryfield}}

　　{{> messages}}

　　

　　

　　

　　Javascript

　　從現在開始, 我們處理的大部分代碼都是客戶端代碼, 所以, 除非特別說明, 以下的代碼都是在if (Meteor.is_client)代碼塊中.

　　在我們編寫展示訊息的代碼之前,讓我們先新建一個Collection. 從本質上講, 這是一組Models. 換句話說, 在這個chat應用的環境下, Messages collection保存著整個聊天記錄, 而每條訊息記錄是一個Model.

　　在if語句前, 添加如下代碼來初始化Collection:

　　?

　　1Messages = new Meteor.Collection('messages');

　　因為我們希望這個Collection可以在客戶端和服務端被創建, 所以我們把它寫在了客戶端代碼塊之外.

　　由於Meteor為我們做了大部分的工作, 要展示聊天記錄是非常容易的. 只需要把下面的代碼添加進if語句裡邊.

　　?

　　1

　　2

　　3Template.messages.messages = function(){

　　return Messages.find({}, { sort: { time: -1 }});

　　}

　　讓我們拆開來分析這段代碼:

　　?

　　1Template.messages.messag