使用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
您還將需要配置登錄系統
