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

首頁

web前端

js教程

使用Meteor配合Node.js編寫即時聊天應用的範例_node.js

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:53 PM

node 即時

我經常見到被拿來與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)

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

登入後複製

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

要新建一個專案, 先轉到你的工作目錄然後運行下邊的程式碼. 這會建立一個目錄, 裡邊包括有Meteor和一個最基本範本程式.

$meteor create chat

登入後複製

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

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

登入後複製

想要看到這個最基礎的應用程式, 你只需要在任何一款不過時的瀏覽器下打開http://localhost: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}}

登入後複製

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

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

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

登入後複製

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

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

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

{{> messages}}

登入後複製

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

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

登入後複製

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

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

登入後複製

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

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

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

登入後複製

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

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

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


 chat



 {{> entryfield}}

 {{> messages}}


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

登入後複製

Javascript

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

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

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

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

登入後複製

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

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

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

登入後複製

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

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

登入後複製

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

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

登入後複製

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

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

登入後複製

(在这里, 请别这么做)

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

登入後複製

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

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

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

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

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

登入後複製

在console里添加Message

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

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

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

登入後複製

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

消息表单

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

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 = '';
   }
  }
 }
}

登入後複製

代码有点多，让我们再回顾一遍。你也许还记得，在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)时，该函数就被调用了。

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

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

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

登入後複製

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

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

现在，如果你进入浏览器，你可以试着输入一个名字与信息到两个输入栏。按下回车以后，输入栏将被清除，一个新的消息会出现在你的输入字段的正下方。打开另一个浏览器窗口，导航到同一个URL(http://localhost:3000/)。试着键入另一个信息，而

正如你看到的，Meteor非常强大。不需要写一行明确更新消息日志的代码，新的信息显示出来并同步到多个浏览器和客户端。

总结

虽然Meteor工作起来非常酷，而且也有一些非常有用的应用支持它，比如Derby.js，但它是不成熟的。一个说明这一点例子就是，浏览文档并找找红色的引文。例如，关于MongoDB集合该文档做了如下陈述：

目前客户端被给予集合的完全写访问权限。它们可以执行任意的更新命令。一旦我们建立鉴权认证，你将能够限制客户端的直接插入，更新和删除。我们也在考虑校验器或者其他类似ORM的功能。

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

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1318

PHP教程

1269

C# 教程

1248

Related knowledge

Java和WebSocket的結合：如何實現即時視訊串流播放 Dec 17, 2023 pm 05:50 PM

隨著網路技術的不斷發展，即時視訊串流已成為了網路領域的重要應用。要實現即時視訊串流播放，其中的關鍵技術包括WebSocket和Java。本文將介紹如何結合使用WebSocket和Java實現即時視訊串流播放，並提供相關的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工通訊的協議，它在Web

node專案中如何使用express來處理檔案的上傳 Mar 28, 2023 pm 07:28 PM

怎麼處理文件上傳？以下這篇文章為大家介紹一下node專案中如何使用express來處理文件的上傳，希望對大家有幫助！

Pi Node教學：什麼是Pi節點？如何安裝和設定Pi Node？ Mar 05, 2025 pm 05:57 PM

PiNetwork節點詳解及安裝指南本文將詳細介紹PiNetwork生態系統中的關鍵角色——Pi節點，並提供安裝和配置的完整步驟。 Pi節點在PiNetwork區塊鏈測試網推出後，成為眾多先鋒積極參與測試的重要環節，為即將到來的主網發布做準備。如果您還不了解PiNetwork，請參考Pi幣是什麼？上市價格多少？ Pi用途、挖礦及安全性分析。什麼是PiNetwork？ PiNetwork項目始於2019年，擁有其專屬加密貨幣Pi幣。該項目旨在創建一個人人可參與

深入淺析Node的進程管理工具'pm2” Apr 03, 2023 pm 06:02 PM

這篇文章跟大家分享Node的進程管理工具“pm2”，聊聊為什麼需要pm2、安裝和使用pm2的方法，希望對大家有幫助！

利用C++實現嵌入式系統的即時音視頻處理功能 Aug 27, 2023 pm 03:22 PM

利用C++實現嵌入式系統的即時音視頻處理功能嵌入式系統的應用範圍越來越廣泛，尤其在音視頻處理領域的需求日益增長。面對這樣的需求，利用C++語言實現嵌入式系統的即時音視訊處理功能成為常見的選擇。本文將介紹如何使用C++語言開發嵌入式系統的即時音視訊處理功能，並給出對應的程式碼範例。為了實現即時音視訊處理功能，首先需要理解音視訊處理的基本流程。一般來說，影音

基於JavaScript建立即時聊天室 Aug 10, 2023 pm 11:18 PM

基於JavaScript建立即時聊天室隨著網路的快速發展，人們越來越注重即時通訊和即時互動體驗。而即時聊天室作為一種常見的即時通訊工具，對於個人和企業來說都非常重要。本文將介紹如何使用JavaScript建立一個簡單的即時聊天室，並提供對應的程式碼範例。我們首先需要一個前端頁面作為聊天室的UI介面。以下是一個簡單的HTML結構範例：<!DOCTYPE

使用Angular和Node進行基於令牌的身份驗證 Sep 01, 2023 pm 02:01 PM

身份驗證是任何網路應用程式中最重要的部分之一。本教程討論基於令牌的身份驗證系統以及它們與傳統登入系統的差異。在本教程結束時，您將看到一個用Angular和Node.js編寫的完整工作演示。傳統身份驗證系統在繼續基於令牌的身份驗證系統之前，讓我們先來看看傳統的身份驗證系統。使用者在登入表單中提供使用者名稱和密碼，然後點擊登入。發出請求後，透過查詢資料庫在後端驗證使用者。如果請求有效，則使用從資料庫中獲取的使用者資訊建立會話，然後在回應頭中傳回會話訊息，以便將會話ID儲存在瀏覽器中。提供用於存取應用程式中受

如何在 Windows 11 中立即開啟即時字幕 Jun 27, 2023 am 08:33 AM

如何在Windows11中立即開啟即時字幕1.在鍵盤上預贏+按Ctrl+L2.點擊同意3.將顯示一個彈出窗口，顯示準備以英語（美國）添加字幕（取決於您的首選語言）4.此外，您還可以透過點擊齒輪按鈕來過濾褻瀆？偏好？過濾髒話相關文章如何修復Windows伺服器中的啟動錯誤代碼0xc004f069Windows上的啟動過程有時會突然轉向顯示包含此錯誤代碼0xc004f069的錯誤訊息。雖然啟動程序已經聯機，但一些運行WindowsServer的舊系統可能會遇到此問題。透過這些初步檢查，如果這些檢查不

See all articles

使用Meteor配合Node.js編寫即時聊天應用的範例_node.js

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題