位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享使用Meteor配合Node.js编写实时聊天应用的范例,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

创建一个 Meteor应用

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

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

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

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

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

想要看到这个最基础的应用程序, 你只需要在任意一款不过时的浏览器下打开 你就可以使用Meteor内置的meteor deploy命令来部署你的应用到Meteor自己的服务器上

只要你更新保存了你的代码, 所有连接上的浏览器都会实时更新其页面.

开发聊天应用

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

在Meteor.js中注意if段落中Meteor.is_client和Meteor.is_server的两个部分。在这些区块中的代码会分开执行,当运行这段代码的机器是client端则只运行clint块中的代码,server同理。这就说明了Meteor在实际运用中的代码共享能力。

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

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

创建视图(View)

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

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

Meteor使用的模板系统与Mustache很相似.大括号{% raw %}{{}}{% endraw %}表示要呈现的内容. 通过简单地在两对大括号里添加内容如{% raw %}{{hello}}{% endraw %}, 模板系统会用hello这个变量的值来替换它. 后面会更详细的介绍.

注意到了在entryfield这个词前面有个大于号>了吗&#; 使用该符号来指定渲染哪一个模板.

在这个例子中,template标签有单个属性, 即模板的名字, 这就是我们要渲染的模板, 注意, 模板的名字要和body里的代码指定的模板名字一样 ({{> entryfield}})

查看浏览器, 你会发现页面已经刷新了, 输入框已经呈现出来了.

接下来, 在body里边添加另外的一个mutache标签用以渲染讯息列表

最后, 我们还需要新建一个名叫messages的模板. 在entryfield模板下面添加下面这段代码

注意到each子句. 在Meteor中你可以使用如下的语法来遍历一个数组模板

使用each循环时,上下文会有所改变. 当引用变量的时候, 实际上你引用的是每一个数组元素的值.

例如,在我们的chat应用中, 我们遍历了数组模板"messages"里边的每个元素, 该数组可以像下面这样,

然后, 在each循环中, 你可以看到{% raw %}{{message}}{% endraw %}{% raw %}{{name}}{% endraw %}, 这会引用 每一个数组元素的值来替代(Andrew 和 Bob 替换 name, 以及各自的问候信息.)

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

当返回到你的浏览器, 你还看不到任何的改变. 因为讯息数组还没被传送到模板, 所以Meteor遍历不到任何东西来呈现.

你的chat.html最后应该是这样的

Javascript

从现在开始, 我们处理的大部分代码都是客户端代码, 所以, 除非特别说明, 以下的代码都是在if (Meteor.is_client)代码块中.

在我们编写展示讯息的代码之前,让我们先新建一个Collection. 从本质上讲, 这是一组Models. 换句话说, 在这个chat应用的环境下, Messages collection保存着整个聊天记录, 而每条讯息记录是一个Model.

在if语句前, 添加如下代码来初始化Collection:

因为我们希望这个Collection可以在客户端和服务端被创建, 所以我们把它写在了客户端代码块之外.

由于Meteor为我们做了大部分的工作, 要展示聊天记录是非常容易的. 只需要把下面的代码添加进if语句里边.

让我们拆开来分析这段代码:

第一部分Template表示我们正在修改一个模板的行为.

第二部分messages是模板的名字, 表示是在修改哪一个模板. 例如,如果我们想要对"entryfield"模板做些什么, 只需把代码改成

(在这里, 请别这么做)

第三部分的这个messages代表的是一个这个模板里的一个变量. 还记得我们的each循环遍历messages吗&#; 这就是那个mesaages.

当你打开浏览器时, 页面还是没有什么改变. 这是意料之中的事, 因为我们只抓取的讯息, 而没有展示出来.

此时,你的chat.js应该是这样的. 是否很惊讶就只需在服务器写这么些代码我们就能展示一个实时的聊天记录应用.

在console里添加Message

这部分的内容是可选的, 当然它有助于你调试程序. 你可以直接跳过往下学习建立form来响应键盘事件(key press).

如果你想要测试你的讯息显示代码, 你可以手动插入一条记录到数据库. 打开你的浏览器控制台, 并输入如下:

这将会在数据库中新建一条记录, 如果正确的操作了的话,那浏览器就会即刻更新这条讯息在页面上.

消息表单

回到chat.js文件当中,我们会将供输入的form和数据库链接起来以接收用户聊天数据的提交。在底部添加下面的代码,不过注意要在if语句块中。

代码有点多,让我们再回顾一遍。你也许还记得,在Template后面的第二个单词决定了我们正在修改的是哪个模板。不过跟之前不同的是,我们写的代码是用来绑定数据库和messages模板的,我们正在修改的模板是entryfield。

这个模板中events的属性包含了一个object,events的属性按照下面的格式呈现:

"[eventname] [selector]"例如,如果我们想为一个ID为hello的button绑定一个点击事件的话,我们会把下面的代码加入到events的个结构体当中。 "click #hello": function(event){ … }在我们的例子当中,我们是将一个函数绑定到了ID为“message”的一个keydown事件当中。如果你还记得,这段代码早在我们在chat.html文件中建立模板的时候就已经设定好了。

在事件对象中,每个key都有一个函数作为它的值。这个函数在事件被调用时执行,其中事件对象作为第一个参数传递给该函数。在我们的app里,每当ID带有“message”的输入栏中有任意键被按下(keydown)时,该函数就被调用了。

函数内的代码相当简单。首先,我们检查回车键是否被按下(输入中有的关键代码)。第二,我们通过ID取得两个输入栏的DOM元素。第三,我们检查并确保输入值不为空,以防止用户提交一个空的名字或信息(name or message)。

注意下面的代码很重要。这段代码是将message插入数据库。

正如你看到的,这和我们插入到控制台的代码类似,但不是硬编码的数值,我们用的是DOM元素的值。此外,我们加入了当前时间,以保证聊天日志被正确的按时间排序。

最后,我们将两个输入的值简单的设为''以清空输入栏。

现在,如果你进入浏览器,你可以试着输入一个名字与信息到两个输入栏。按下回车以后,输入栏将被清除,一个新的消息会出现在你的输入字段的正下方。打开另一个浏览器窗口,导航到同一个URL( 目前客户端被给予集合的完全写访问权限。它们可以执行任意的更新命令。一旦我们建立鉴权认证,你将能够限制客户端的直接插入,更新和删除。我们也在考虑校验器或者其他类似ORM的功能。

任何用户拥有完全的写访问权限是一个非常大的问题,因为对任何一个app产品——如果一个用户对你的整个数据库有写访问权限,这是一个相当大的安全问题。

看到Meteor(和Derby.js!)在像哪个方向前进是令人激动的,但是除非它成熟一点,它可能不是一个产品级应用的最好选择。期待那万美元资金能很好的利用起来。

Node.js编程中客户端Session的使用详解 静态网站很容易扩展。你只需要全部缓存,不需要考虑从不同服务器组合有状态的内容给用户。可惜,大多数Web应用使用有状态的内容提供个性化体验

浅析Node.js中的内存泄漏问题 这篇文章是由Mozilla的Identity团队带来的ANode.JSHolidaySeason系列文章的首篇,该团队上个月发布了Persona的第一个测试版本。在开发Persona时我们构建了一系列

浅析Node.js中使用依赖注入的相关问题及解决方法 最近,我转向使用依赖注入来帮助理解分离代码的简单途径,并有助测试。然而,Node.js中的模块依赖Node提供的系统API,这很难判断私有依赖被恰当的使

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

本文链接地址:https://www.jiuchutong.com/biancheng/377986.html 转载请保留说明!

上一篇:充分发挥Node.js程序性能的一些方法介绍(充分发挥党员的先锋模范作用,积极)

下一篇:Node.js编程中客户端Session的使用详解(node.js详解)

  • 补提去年所得税会计分录怎么写
  • 车船税是什么意思图片
  • 上月社保未扣款怎么回事
  • 管理会计期末存货计算公式
  • 关联公司往来款算应收账款吗
  • 出口货物不能退税的原因
  • 超过认证期限的发票未抵扣能红冲吗
  • 关联方交易影响因素
  • 物业公司支付出的费用
  • 收到网站招聘费专票如何做账务处理?
  • 增值税专用发票电子版
  • 小规模季度超过30万是全额纳税吗
  • 收到投资款需要什么原始凭证
  • 应交税费的期初余额是借还是贷
  • 固定资产停止使用还计提折旧吗
  • 企业报税网上申报
  • 小规模纳税人减免税明细表怎么填
  • 超市买的东西开什么发票
  • 企业贷款的利息都是固定的吗
  • 会计中坏账准备的借贷方向
  • 报考中级会计师证的条件
  • 顺丰充值的钱可以退吗
  • 什么是现金解款支付
  • 7zip怎么压缩文件为rar
  • vue解决跨域问题
  • cpu的保养有哪些
  • php读取opc
  • php在线阅读器源代码
  • php pulsar
  • 出口货物视同内销征税的会计核算
  • 银行汇票和银行本票的区别
  • 朴素贝叶斯算法
  • 人工智能该如何规划软件工程师岗位
  • php生成zip压缩包
  • read命令 linux
  • python2打包
  • 结构性存款随时可取么
  • 6月收到4月的单子怎么办
  • vue 生产环境
  • vue连接webapi
  • mysql有什么优势和特点
  • dedecms插件
  • 汽车车票增值税税率
  • 公司向股东借款多久必须归还
  • 承兑汇票上能手写名字吗
  • 增值税发票抵扣联的作用
  • 汇算清缴银行手续费放哪里
  • 豆腐是农产品还是工业产品
  • 进项税额不允许抵扣
  • 个体工商户分配所得
  • 大修和维修怎样定义
  • 固定资产为
  • 简要分析企业购买行为的影响因素
  • 什么是电子商业承兑汇票贴现
  • 计入当期损益是不是计入三大期间费用
  • 会计中的记账是什么意思
  • 在查询结果中添加字母
  • windos基于
  • win8.1 升级
  • linux 解析
  • freebsd怎么样
  • ubuntu18.04启用root
  • centos6启动不了
  • 全自怎么安装方法
  • 刷新页面jquery
  • node.js连接mysql的数据怎么可视化
  • vim fold
  • 谈一谈你对人与自然关系的认识
  • JavaScript window.document的属性、方法和事件小结
  • python中如何去除空格
  • pyqt5编译
  • Android 使用 ASM 修改函数
  • dom使用
  • 使用二氧化碳灭火器时人应该站在什么位置
  • androidstudio性能检测工具
  • 社保已申报怎么停止缴费
  • 河南网上税务申报步骤
  • 小规模开了红字发票申报表怎么填
  • 世界近代史的改革有哪些
  • 核算成本需要哪些数据来源
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设