實時程式時代 – Meteor

来源：互联网发布：纯软件管理的编辑：程序博客网时间：2024/06/06 08:01

互聯網程式發展真的一日都嫌太長了，發展速度乃前所未見。數年前網頁界開始玩 AJAX，人們按一下按鈕，頁面不用重新載入就更新了。今天來到實時程式時代，連按下按鈕這個動作也節省了，Facebook、Gmail 等等程式我倒真是開了一整天也沒有按過重新整理鍵。

Meteor 最近開始火起來了，很多媒體開始報導它，到底這東西是什麼來的呢？Meteor 是一款用來開發網絡程式的框架，不過和以往的框架都有點不一樣，它最強大的功能是能夠做到 hot-push，把最新的 data 從 server side push 到 client side，而且不用編寫任何一行代碼就做到，可見其強大之處。

Meteor 的兩大特色：

一、純 Javascript

Meteor 是基於 Node.js 的開發框架，因此大家只需使用 Javascript 就可以編寫 server side 和 client side 的代碼（當然，CSS 和 HTML 另計）。但當然，你或者會考慮安全問題，如果 server side 的代碼被人看到了會不會很危險呢？Meteor 容許你把兩邊的代碼分開，那就不用怕了吧！

二、實時頁面更新

每當資料庫的內容被改變了之後，Meteor 都會自動幫你把改變了的內容 push 到 client side，而這個過程你甚至是一行代碼都不用寫，Meteor 能夠處理得到！

好了，大家都是 programmer，知道你們喜歡看代碼，就一起看看如何使用這個偉大的工具吧。

首先，如何安裝 Meteor？很簡單，就一句 command：

?
1
curl https://install.meteor.com | sh

然後，怎樣建立新 Project？

?
1
2
3
4
meteor create dukeland
 
#if you want to create an example project
meteor create --example leaderboard

最後，怎樣運行？

?
1
2
cddukeland
meteor

開啟你的瀏覽器，輸入 http://localhost:3000/ 就可以看到你剛剛建立的 Project 了。

如果你想把 example project deploy 到 Meteor 的官方伺服器的話，你只需輸入：

?
1
meteor deploy server-name.meteor.com

Little big detail：Meteor 官網會自動產生新的網址讓開發人員 deploy 他們的程式

如圖中的 convincingly-unbelieable-leaderboard-test.meteor.com

好吧，動手做一個簡單的聊天室，首先做一個 template。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<head>
    <title>dukechat</title>
</head>
 
<body>
    <h1>dukechat</h1>
    {{> content}}
    {{> input}}
</body>
 
<templatename="content">
    <divclass="content">
        {{#each messages}}
            {{> message}}
        {{/each}}
    </div>
</template>
 
<templatename="message">
    <divclass="msg">
        <spanclass="author">{{author}}</span>
        <spanclass="msg">{{msg}}</span>
    </div>
</template>
 
<templatename="input">
    <divclass="input">
        <inputtype="text"id="author"/>
        <inputtype="text"id="msg-input"/>
        <inputtype="button"value="Send"/>
    </div>
</template>

Meteor 的 Template 語法很易看，{{> name}} 代表要使用一個名為 name 的 template，{{#each}} {{/each}} 包圍著的就會被 iterate，不太難明吧？

Javascript 又如何呢？

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
Messages = newMeteor.Collection("messages");
 
if(Meteor.isClient) {
    varinput, author;
    Template.input.events({
        "click input[type=button]":function(){
            if(input.value == ""){
                return;
            }
 
            Messages.insert({
                author: author.value,
                msg: input.value,
                time: +newDate
            });
 
            input.value = "";
        }
    });
    Template.input.rendered = function(){
        input = this.find("#msg-input");
        author = this.find("#author");
 
        author.value = "dukeland#"+ parseInt(Math.random() * 1000);
    }
 
    Template.content.messages = function(){
        returnMessages.find({}, {sort: ["time","desc"]});
    };
}
 
if(Meteor.isServer) {
    Meteor.startup(function() {
        // code to run on server at startup
    });
}

首先建立一個 Meteor 的 Collection（底層是用 MongoDB 來實現的），名為 messages。

用 if (Meteor.isClient) 來判斷代碼是否在 client side 運行，判定 server side 則用 Meteor.isServer。

?
1
2
3
4
5
6
Template.input.rendered=function(){
    input=this.find("#msg-input");
    author=this.find("#author");
 
    author.value="dukeland#" + parseInt(Math.random()*1000);
}

在 template 在 client side render 好之後，就從 DOM 裏拿取元素並儲存起來待會兒使用。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Template.input.events({
    "click input[type=button]":function(){
        if(input.value == ""){
            return;
        }
 
        Messages.insert({
            author: author.value,
            msg: input.value,
            time: +newDate
        });
 
        input.value = "";
    }
});

按下 Send 按鈕之後就會往 Messages 這個 Meteor Collection 加入一個新的 object（你可以注意到我沒有刻意去寫 server side 的 Messages 還是 client side 的 Messages），然後清空 input 裏的數值。

就是這樣，簡單聊天室就完成了。難以置信吧！不用再處理 client side server side 的東西，不用再寫 XHR，就這麼短短幾十行就完成一個簡單聊天室，很好很強大！

官網在此，想知道更多的就去看看吧！

http://dukeland.hk/2013/03/25/age-of-real-time-application/