使用Meteor配合Node.js编写实时聊天应用的范例

我经常见到被拿来与Derby.js做比较的框架是Meteor.js. 与Derby相似的是,它也能在多个客户端下实时更新views, 尽管做法上可能跟Derby有点不同. Derby可以较容易的使用多种数据库, 而Meteor则只亲近于MongoDB. 事实上, 通过如Mongoose客户端接入数据库的API与你在服务端所期望的已经非常接近了.

虽然现在meteor是个有一些缺点和争议的框架, 但Meteor看起来是非常有趣的选择用来建立有实时需求的应用. 个人还是喜欢Derby基于传统回调的编程形式更吸引我, 但在Derby的强大背后,却缺乏健壮的文档和一个大的开发者社区, 这无疑是个很大的打击. 或许这会随着时间推移而有所改变吧, 但比起Meteor来说还是会慢很多, 因为后者最近获得了1100万美元的资金. 这笔财政资金确保了Meteor的存在以及得到持续的支持. 对于那些需要财政与发展稳定的框架的开发者而言, 这笔资金只会让Meteor更加优胜. <!-- more --> 今天,让我们一起来看看如何新建一个真实的但又简单的Meteor应用. 本质上说, 这是基于Tom的 Vimeo screencast的一个新手指引. 与Tom的 Vimeo screencast最大的不同是处理事件的方式. 比起复制粘贴一个Meteor示例的代码, 我会一步一步的通过自己的方式来处理使用Enter键来提交一则讯息. 让我们开始吧.

创建一个 Meteor应用

Derby和Meteor 他们共有的一个大加分是他们各自的命令行工具. 与Derby使用Node的内置的 npm 工具所不同的是, Meteor使用的是它自己的.

在终端(Mac OS X 和 Linux),执行如下的命令. (在这之前请确保你已经安装了Node)

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

Metror会自己搞定,并安装命令行工具.

要新建一个项目, 先转到你的工作目录然后运行下边的代码. 这会创建一个目录, 里边包括有Meteor和一个最基本模板程序.

$meteor create chat

现在, 你可以转到该目录并运行下面的代码让它跑起来

$cdchat$meteor Running on: :3000/

想要看到这个最基础的应用程序, 你只需要在任意一款不过时的浏览器下打开:3000/

只要你想, 你就可以使用Meteor内置的meteor deploy命令来部署你的应用到Meteor自己的服务器上

$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文件中查看到下面这样一段代码:
 

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的两个部分。在这些区块中的代码会分开执行,当运行这段代码的机器是client端则只运行clint块中的代码,server同理。这就说明了Meteor在实际运用中的代码共享能力。

删除掉if中所有Meteor.is_client和Meteor.is_server段的代码,最后只剩下一段:
 

if (Meteor.is_client) { }

注意,当你保存了 脚本文件之后,你的浏览器会立刻刷新加载这段新的代码。

创建视图(View)

在我们正式对这个脚本文件动工之前, 我们需要先新建一个视图用来展示聊天记录. 在编辑器里打开chat.html并删除body标签里边的代码. 包括名为hello的template标签.只留如下部分

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

接着在body标签里添加下面这句

{{> entryfield}}

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgdjpz.html