使用Meteor在五分鐘內建立一個超棒的聊天應用程式

在這個教程中，我將向你展示如何使用MeteorJS編寫一個簡單的聊天應用程式。

這裡有一個我們目標的實際演示：http://hrr2demo.meteor.com/

和GitHub上的原始碼：https://github.com/victorleungtw/hrr2demo

在我們開始之前，隨意嘗試演示並分叉存儲庫。

什麼是Meteor？

Meteor是一個用於使用JavaScript構建實時應用程式的出色網絡框架。它基於NodeJS和MongoDB。

步驟1：安裝Meteor

對於macOS和Linux用戶，在終端機中運行以下命令：

> curl [https://install.meteor.com/](https://install.meteor.com/) | sh

步驟2：創建新應用程式

> meteor create awesomeChatApp

然後更改為你應用程式的目錄：

> cd awesomeChatApp

嘗試運行它：

> meteor

並在瀏覽器中打開此地址：http://localhost:3000

步驟3：創建資料夾和檔案結構

使用命令刪除默認檔案：

> rm awesomeChatApp.*

創建三個資料夾：

> mkdir client server both

按慣例，我們將把在客戶端（即，用戶的瀏覽器）運行的任何內容放在“client”資料夾中，將在服務器端運行的任何內容放在“server”資料夾中，將由客戶端和服務器共同訪問的任何內容放在“both”資料夾中。

步驟4a：創建收集來儲存訊息

在’both’文件夾內，我們將在這裡放置我們的模型。

> touch collection.js

創建一個新的’messages’集合：

Messages = new Meteor.Collection("messages")

步驟4b：創建索引頁

在’client’文件夾內，我們將在此處放置我們的首頁視圖。

> touch index.html

使用以下HTML：

<head>
  <title>chatterbox</title>
</head>
<body>
  {{> loginButtons align="right"}} # chatterbox {{> input}} {{> messages}}
</body>

步驟4c：創建帶有助手的HTML模板

為了更好地組織我們的檔案，我們可以創建一個新的文件夾：

> mkdir messages > cd messages > touch messages.html

現在，我們創建一個名為’messages’的模板。

<template name="messages">
  {{#each messages}} {{name}}: {{message}} {{/each}}
</template>

並且我們將創建助手以通過在’Messages’集合中的每個消息。

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

步驟4d：創建帶有事件處理程序的HTML模板

同樣，我們將為輸入框和提交按鈕創建一個模板。

> mkdir input > cd input > touch input.html

<template name="input">
  <form id="send">
    <input id="message" type="text" />
    <input type="submit" value="Submit" />
  </form>
</template>

另外，我們將創建一個JavaScript文件來處理提交按鈕的點擊事件。

Template.input.events({
  "submit form": function (event) {
    event.preventDefault()
    var name = Meteor.user() ? Meteor.user().profile.name : "Anonymous"
    var message = document.getElementById("message")
    if (message.value !== "") {
      Messages.insert({
        name: name,
        message: message.value,
        time: Date.now(),
      })
      message.value = ""
    }
  },
})

步驟4e：添加帳戶包以便使用GitHub帳戶登錄

Meteor非常容易使用。因為它具有豐富的包生態系統，所以我們要添加accounts-ui和accounts-github以便一個簡單的用戶登錄系統。

meteor add accounts-ui
meteor add accounts-github

步驟4f：添加樣式表（可選）

將以下樣式表複製並粘貼到您的’client’文件夾內。

> mkdir style > cd style > touch style.css

步驟5：將您的網站部署到Meteor的免費服務器

meteor deploy awesomeChatApp.meteor.com

完成！如果給出的地址已經在使用，您可能需要部署到其他地址。在瀏覽器中打開您的地址：http://awesomeChatApp.meteor.com

您還將需要配置登錄系統