使用Meteor配合Node.js編寫實(shí)時(shí)聊天應(yīng)用的范例

更新時(shí)間：2015年06月23日 12:02:32 投稿：goldensun

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

我經(jīng)常見(jiàn)到被拿來(lái)與Derby.js做比較的框架是Meteor.js. 與Derby相似的是,它也能在多個(gè)客戶端下實(shí)時(shí)更新views, 盡管做法上可能跟Derby有點(diǎn)不同. Derby可以較容易的使用多種數(shù)據(jù)庫(kù), 而Meteor則只親近于MongoDB. 事實(shí)上, 通過(guò)如Mongoose客戶端接入數(shù)據(jù)庫(kù)的API與你在服務(wù)端所期望的已經(jīng)非常接近了.

雖然現(xiàn)在meteor是個(gè)有一些缺點(diǎn)和爭(zhēng)議的框架, 但Meteor看起來(lái)是非常有趣的選擇用來(lái)建立有實(shí)時(shí)需求的應(yīng)用. 個(gè)人還是喜歡Derby基于傳統(tǒng)回調(diào)的編程形式更吸引我, 但在Derby的強(qiáng)大背后,卻缺乏健壯的文檔和一個(gè)大的開(kāi)發(fā)者社區(qū), 這無(wú)疑是個(gè)很大的打擊. 或許這會(huì)隨著時(shí)間推移而有所改變吧, 但比起Meteor來(lái)說(shuō)還是會(huì)慢很多, 因?yàn)楹笳咦罱@得了1100萬(wàn)美元的資金. 這筆財(cái)政資金確保了Meteor的存在以及得到持續(xù)的支持. 對(duì)于那些需要財(cái)政與發(fā)展穩(wěn)定的框架的開(kāi)發(fā)者而言, 這筆資金只會(huì)讓Meteor更加優(yōu)勝.  今天,讓我們一起來(lái)看看如何新建一個(gè)真實(shí)的但又簡(jiǎn)單的Meteor應(yīng)用. 本質(zhì)上說(shuō), 這是基于Tom的 Vimeo screencast的一個(gè)新手指引. 與Tom的 Vimeo screencast最大的不同是處理事件的方式. 比起復(fù)制粘貼一個(gè)Meteor示例的代碼, 我會(huì)一步一步的通過(guò)自己的方式來(lái)處理使用Enter鍵來(lái)提交一則訊息. 讓我們開(kāi)始吧.

創(chuàng)建一個(gè) Meteor應(yīng)用

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

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

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

Metror會(huì)自己搞定,并安裝命令行工具.

要新建一個(gè)項(xiàng)目, 先轉(zhuǎn)到你的工作目錄然后運(yùn)行下邊的代碼. 這會(huì)創(chuàng)建一個(gè)目錄, 里邊包括有Meteor和一個(gè)最基本模板程序.

$meteor create chat

現(xiàn)在, 你可以轉(zhuǎn)到該目錄并運(yùn)行下面的代碼讓它跑起來(lái)

$cdchat$meteor
Running on: http://localhost:3000/

想要看到這個(gè)最基礎(chǔ)的應(yīng)用程序, 你只需要在任意一款不過(guò)時(shí)的瀏覽器下打開(kāi)http://localhost:3000/

只要你想, 你就可以使用Meteor內(nèi)置的meteor deploy命令來(lái)部署你的應(yīng)用到Meteor自己的服務(wù)器上

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

只要你更新保存了你的代碼, 所有連接上的瀏覽器都會(huì)實(shí)時(shí)更新其頁(yè)面.

開(kāi)發(fā)聊天應(yīng)用

在Meteor Create指令產(chǎn)生的文件夾中，你可以看見(jiàn)不同的文件。如果你知道怎么查看隱藏文件的話，你還可以看見(jiàn)個(gè).meteor這個(gè)文件夾。這個(gè)文件夾包含了Meteor它本身，以及MongoDB的數(shù)據(jù)文件。

在你App的根目錄文件夾下，你應(yīng)該可以看到這三個(gè)文件：chat.html, chat.css和chat.js。這三個(gè)文件都是自帶說(shuō)明部分的。HTML文件包含了App的模型以及外觀，他們都是被chat.css定義的。Javascript文件包含了在client和server端要執(zhí)行的腳本。有一點(diǎn)很重要，不要把任何東西放進(jìn)這個(gè)腳本文件，比如說(shuō)配置參數(shù)和密碼，因?yàn)槿魏稳硕伎梢酝ㄟ^(guò)查看你應(yīng)用程序的代碼看到這些。

用你喜歡的文本編輯軟件打開(kāi)chat.js這個(gè)文件。就個(gè)人而言，我喜歡用Sublime Text2，因?yàn)檫@個(gè)工具簡(jiǎn)潔還有多種鼠標(biāo)狀態(tài)提示。

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

if (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的兩個(gè)部分。在這些區(qū)塊中的代碼會(huì)分開(kāi)執(zhí)行，當(dāng)運(yùn)行這段代碼的機(jī)器是client端則只運(yùn)行clint塊中的代碼，server同理。這就說(shuō)明了Meteor在實(shí)際運(yùn)用中的代碼共享能力。

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

if (Meteor.is_client) { }

注意，當(dāng)你保存了腳本文件之后，你的瀏覽器會(huì)立刻刷新加載這段新的代碼。

創(chuàng)建視圖(View)

在我們正式對(duì)這個(gè)腳本文件動(dòng)工之前, 我們需要先新建一個(gè)視圖用來(lái)展示聊天記錄. 在編輯器里打開(kāi)chat.html并刪除body標(biāo)簽里邊的代碼. 包括名為hello的template標(biāo)簽.只留如下部分

<head>
 <title>chat</title>
</head>

<body>

</body>

接著在body標(biāo)簽里添加下面這句

{{> entryfield}}

Meteor使用的模板系統(tǒng)與Mustache很相似.大括號(hào){% raw %}{{}}{% endraw %}表示要呈現(xiàn)的內(nèi)容. 通過(guò)簡(jiǎn)單地在兩對(duì)大括號(hào)里添加內(nèi)容如{% raw %}{{hello}}{% endraw %}, 模板系統(tǒng)會(huì)用hello這個(gè)變量的值來(lái)替換它. 后面會(huì)更詳細(xì)的介紹.

注意到了在entryfield這個(gè)詞前面有個(gè)大于號(hào)>了嗎? 使用該符號(hào)來(lái)指定渲染哪一個(gè)模板.

<template name="entryfield">
  <input type="text" id="name" placeholder="Name" /> <input type="text" id="message" placeholder="Your Message" />
</template>

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

查看瀏覽器, 你會(huì)發(fā)現(xiàn)頁(yè)面已經(jīng)刷新了, 輸入框已經(jīng)呈現(xiàn)出來(lái)了.

接下來(lái), 在body里邊添加另外的一個(gè)mutache標(biāo)簽用以渲染訊息列表

{{> messages}}

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

<template name="messages">
  <p>
    {{#each messages}}
      <strong>{{name}}</strong>- {{message}}
    {{/each}}
  </p>
</template>

注意到each子句. 在Meteor中你可以使用如下的語(yǔ)法來(lái)遍歷一個(gè)數(shù)組模板

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

使用each循環(huán)時(shí),上下文會(huì)有所改變. 當(dāng)引用變量的時(shí)候, 實(shí)際上你引用的是每一個(gè)數(shù)組元素的值.

例如,在我們的chat應(yīng)用中, 我們遍歷了數(shù)組模板"messages"里邊的每個(gè)元素, 該數(shù)組可以像下面這樣,

[
  {
    "name": "Andrew",
    "message": "Hello world!"
  },
  {
    "name": "Bob",
    "message": "Hey, Andrew!""
  }
]

然后, 在each循環(huán)中, 你可以看到{% raw %}{{message}}{% endraw %}{% raw %}{{name}}{% endraw %}, 這會(huì)引用每一個(gè)數(shù)組元素的值來(lái)替代(Andrew 和 Bob 替換 name, 以及各自的問(wèn)候信息.)

當(dāng)返回到你的瀏覽器, 你還看不到任何的改變. 因?yàn)橛嵪?shù)組還沒(méi)被傳送到模板, 所以Meteor遍歷不到任何東西來(lái)呈現(xiàn).

你的chat.html最后應(yīng)該是這樣的

<head>
 <title>chat</title>
</head>

<body>
 {{> entryfield}}

 {{> messages}}
</body>

<template name="entryfield">
  <input type="text" id="name" placeholder="Name" /> <input type="text" id="message" placeholder="Your Message" />
</template>

<template name="messages">
  <p>
    {{#each messages}}
      <strong>{{name}}</strong>- {{message}}<br/>
    {{/each}}
  </p>
</template>

Javascript

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

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

在if語(yǔ)句前, 添加如下代碼來(lái)初始化Collection:

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

因?yàn)槲覀兿Ｍ@個(gè)Collection可以在客戶端和服務(wù)端被創(chuàng)建, 所以我們把它寫在了客戶端代碼塊之外.

由于Meteor為我們做了大部分的工作, 要展示聊天記錄是非常容易的. 只需要把下面的代碼添加進(jìn)if語(yǔ)句里邊.

Template.messages.messages = function(){
  return Messages.find({}, { sort: { time: -1 }});
}

讓我們拆開(kāi)來(lái)分析這段代碼:

Template.messages.messages = function(){ … }

第一部分Template表示我們正在修改一個(gè)模板的行為.

Template.messages.messages = function(){ … }

第二部分messages是模板的名字, 表示是在修改哪一個(gè)模板. 例如,如果我們想要對(duì)"entryfield"模板做些什么, 只需把代碼改成

Template.entryfields.variable = function(){ … }

(在這里, 請(qǐng)別這么做)

Template.messages.messages = function(){ … }

第三部分的這個(gè)messages代表的是一個(gè)這個(gè)模板里的一個(gè)變量. 還記得我們的each循環(huán)遍歷messages嗎? 這就是那個(gè)mesaages.

當(dāng)你打開(kāi)瀏覽器時(shí), 頁(yè)面還是沒(méi)有什么改變. 這是意料之中的事, 因?yàn)槲覀冎蛔ト〉挠嵪? 而沒(méi)有展示出來(lái).

此時(shí),你的chat.js應(yīng)該是這樣的. 是否很驚訝就只需在服務(wù)器寫這么些代碼我們就能展示一個(gè)實(shí)時(shí)的聊天記錄應(yīng)用.

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

if (Meteor.is_client) {
 Template.messages.messages = function(){
  return Messages.find({}, { sort: { time: -1 }});
 }
}

在console里添加Message

這部分的內(nèi)容是可選的, 當(dāng)然它有助于你調(diào)試程序. 你可以直接跳過(guò)往下學(xué)習(xí)建立form來(lái)響應(yīng)鍵盤事件(key press).

如果你想要測(cè)試你的訊息顯示代碼, 你可以手動(dòng)插入一條記錄到數(shù)據(jù)庫(kù). 打開(kāi)你的瀏覽器控制臺(tái), 并輸入如下:

Messages.insert({ name: 'Andrew', message: 'Hello world!', time: 0 })

這將會(huì)在數(shù)據(jù)庫(kù)中新建一條記錄, 如果正確的操作了的話,那瀏覽器就會(huì)即刻更新這條訊息在頁(yè)面上.

消息表單

回到chat.js文件當(dāng)中，我們會(huì)將供輸入的form和數(shù)據(jù)庫(kù)鏈接起來(lái)以接收用戶聊天數(shù)據(jù)的提交。在底部添加下面的代碼，不過(guò)注意要在if語(yǔ)句塊中。

Template.entryfield.events = {
 "keydown #message": function(event){
  if(event.which == 13){
   // Submit the form
   var name = document.getElementById('name');
   var message = document.getElementById('message');
 
   if(name.value != '' && message.value != ''){
    Messages.insert({
     name: name.value,
     message: message.value,
     time: Date.now()
    });
 
    name.value = '';
    message.value = '';
   }
  }
 }
}

代碼有點(diǎn)多，讓我們?cè)倩仡櫼槐椤Ｄ阋苍S還記得，在Template后面的第二個(gè)單詞決定了我們正在修改的是哪個(gè)模板。不過(guò)跟之前不同的是，我們寫的代碼是用來(lái)綁定數(shù)據(jù)庫(kù)和messages模板的，我們正在修改的模板是entryfield。

這個(gè)模板中events的屬性包含了一個(gè)object，events的屬性按照下面的格式呈現(xiàn)：

"[eventname] [selector]"
例如，如果我們想為一個(gè)ID為hello的button綁定一個(gè)點(diǎn)擊事件的話，我們會(huì)把下面的代碼加入到events的個(gè)結(jié)構(gòu)體當(dāng)中。

"click #hello": function(event){ … }
在我們的例子當(dāng)中，我們是將一個(gè)函數(shù)綁定到了ID為“message”的一個(gè)keydown事件當(dāng)中。如果你還記得，這段代碼早在我們?cè)赾hat.html文件中建立模板的時(shí)候就已經(jīng)設(shè)定好了。

在事件對(duì)象中，每個(gè)key都有一個(gè)函數(shù)作為它的值。這個(gè)函數(shù)在事件被調(diào)用時(shí)執(zhí)行，其中事件對(duì)象作為第一個(gè)參數(shù)傳遞給該函數(shù)。在我們的app里，每當(dāng)ID帶有“message”的輸入欄中有任意鍵被按下(keydown)時(shí)，該函數(shù)就被調(diào)用了。

函數(shù)內(nèi)的代碼相當(dāng)簡(jiǎn)單。首先，我們檢查回車鍵是否被按下（輸入中有13的關(guān)鍵代碼）。第二，我們通過(guò)ID取得兩個(gè)輸入欄的DOM元素。第三，我們檢查并確保輸入值不為空，以防止用戶提交一個(gè)空的名字或信息(name or message)。

注意下面的代碼很重要。這段代碼是將message插入數(shù)據(jù)庫(kù)。

Messages.insert({
 name: name.value,
 message: message.value,
 time: Date.now()
});

正如你看到的，這和我們插入到控制臺(tái)的代碼類似，但不是硬編碼的數(shù)值，我們用的是DOM元素的值。此外，我們加入了當(dāng)前時(shí)間，以保證聊天日志被正確的按時(shí)間排序。

最后，我們將兩個(gè)輸入的值簡(jiǎn)單的設(shè)為''以清空輸入欄。

現(xiàn)在，如果你進(jìn)入瀏覽器，你可以試著輸入一個(gè)名字與信息到兩個(gè)輸入欄。按下回車以后，輸入欄將被清除，一個(gè)新的消息會(huì)出現(xiàn)在你的輸入字段的正下方。打開(kāi)另一個(gè)瀏覽器窗口，導(dǎo)航到同一個(gè)URL(http://localhost:3000/)。試著鍵入另一個(gè)信息，而

正如你看到的，Meteor非常強(qiáng)大。不需要寫一行明確更新消息日志的代碼，新的信息顯示出來(lái)并同步到多個(gè)瀏覽器和客戶端。

總結(jié)

雖然Meteor工作起來(lái)非?？?，而且也有一些非常有用的應(yīng)用支持它，比如Derby.js，但它是不成熟的。一個(gè)說(shuō)明這一點(diǎn)例子就是，瀏覽文檔并找找紅色的引文。例如，關(guān)于MongoDB集合該文檔做了如下陳述：

目前客戶端被給予集合的完全寫訪問(wèn)權(quán)限。它們可以執(zhí)行任意的更新命令。一旦我們建立鑒權(quán)認(rèn)證，你將能夠限制客戶端的直接插入，更新和刪除。我們也在考慮校驗(yàn)器或者其他類似ORM的功能。

任何用戶擁有完全的寫訪問(wèn)權(quán)限是一個(gè)非常大的問(wèn)題，因?yàn)閷?duì)任何一個(gè)app產(chǎn)品——如果一個(gè)用戶對(duì)你的整個(gè)數(shù)據(jù)庫(kù)有寫訪問(wèn)權(quán)限，這是一個(gè)相當(dāng)大的安全問(wèn)題。

看到Meteor(和Derby.js!)在像哪個(gè)方向前進(jìn)是令人激動(dòng)的，但是除非它成熟一點(diǎn)，它可能不是一個(gè)產(chǎn)品級(jí)應(yīng)用的最好選擇。期待那1100萬(wàn)美元資金能很好的利用起來(lái)。

您可能感興趣的文章: