这篇文章主要介绍了使用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