In diesem Tutorial zeige ich Ihnen, wie Sie eine Echtzeit-Chat-Anwendung mit Node.js, Socket.IO und MongoDB implementieren, und dann stellen wir die Anwendung gemeinsam in Modulus bereit.

Lassen Sie mich zun?chst das endgültige Aussehen der Anwendung zeigen, das wir am Ende des Artikels sehen werden.

Node.js wird der Kern der Anwendung sein, Express als MVC, MongoDB als Datenbank, Socket. IO wird für die Echtzeitkommunikation verwendet. Sobald wir fertig sind, stellen wir die Anwendung auf Modulus bereit. Der MongoDB-Teil befindet sich tats?chlich in Modulus.

1. Szene

1. John m?chte unsere App nutzen und ?ffnet sie in seinem Browser.
2. Auf der ersten Seite w?hlt er den w?hrend des Chats verwendeten Spitznamen aus und meldet sich beim Chat an.
3. Er schreibt etwas in den Textbereich und drückt die Eingabetaste.
4. Der Text wird an einen RESTful-Dienst (Express) gesendet und der Text wird in MongoDB geschrieben.
5. Derselbe Text wird an den aktuell in der Chat-App angemeldeten Benutzer gesendet, bevor er in MongoDB geschrieben wird.

Wie Sie sehen, ist dies eine sehr einfache Anwendung, die jedoch fast alles abdeckt, was eine Webanwendung zu bieten hat. Es gibt kein Kanalsystem in der Anwendung, aber Sie k?nnen den Quellcode teilen und das Kanalmodul zum üben implementieren.

2.Entwerfen Sie Ihr Projekt von Grund auf

Ich werde versuchen, zun?chst die kleinen Teile des Projekts zu erkl?ren und sie dann am Ende zusammenzusetzen. Ich beginne mit dem Backend und arbeite mich bis zum Frontend vor. Beginnen wir also mit den Dom?nenobjekten (MongoDB-Modellen).

2.1. Modell

Für die Datenbankabstraktion verwenden wir Mongoose. In diesem Projekt haben wir nur ein Modell mit dem Namen Message。 這個(gè)消息模型只包含 text, createDate,?和 作者。 作者沒有像User這樣的模型，因?yàn)槲覀儾粫?huì)完全實(shí)現(xiàn)用戶注冊/登錄系統(tǒng)。將會(huì)有一個(gè)簡單的昵稱提供頁面，并且該昵稱將被保存到cookie中。這將在 Message 模型中用作 author Text im Feld. Unten sehen Sie ein JSON-Beispielmodell:

{

    text: "Hi, is there any Full Stack Developer here?"

    author: "john_the_full_stack",

    createDate: "2015.05.15"

}

Um ein solches Dokument zu erstellen, k?nnen Sie die folgende Mongoose-Funktion verwenden, um das Modell zu implementieren:

var mongoose = require('mongoose')



var Message = new mongoose.Schema({

    author: String,

    message: String,

    createDate: {

        type: Date,

        default: Date.now

    }

});



mongoose.model('Message', Message)

Importieren Sie einfach das Mongoose-Modul, definieren Sie das Modell mit Feldern und Feldeigenschaften im JSON-Format und erstellen Sie ein Modell mit dem Namen Message. Das Modell wird in die Seite eingefügt, die Sie verwenden m?chten.

Vielleicht haben Sie eine Frage, warum wir die Nachricht in der Datenbank speichern m?chten, wenn wir diese Nachricht bereits an die Benutzer im selben Kanal senden. Es stimmt, dass Sie keine Chat-Nachrichten speichern müssen, aber ich wollte nur die Datenbankintegrationsschicht erkl?ren. Wie auch immer, wir werden dieses Modell im Controller unseres Projekts verwenden. Regler?

2.2. Controller

Wie ich bereits sagte, werden wir Express für den MVC-Teil verwenden. Und C?這里代表的是Controller. Für unser Projekt gibt es nur zwei Messaging-Endpunkte. Einer davon l?dt aktuelle Chat-Nachrichten und der zweite verwaltet gesendete Chat-Nachrichten, die in der Datenbank gespeichert und dann an den Kanal gesendet werden.

.....

app.get('/chat', function(req, res){

    res.sendFile(__dirname + '/index.html');

});



app.get('/login', function(req, res){

    res.sendFile(__dirname + '/login.html');

});



app.post('/messages', function(req, res, next) {

    var message = req.body.message;

    var author = req.body.author;

    var messageModel = new Message();

    messageModel.author = author;

    messageModel.message = message;

    messageModel.save(function (err, result) {

       if (!err) {

           Message.find({}).sort('-createDate').limit(5).exec(function(err, messages) {

               io.emit("message", messages);

           });

           res.send("Message Sent!");

       } else {

           res.send("Technical error occurred!");

       }

    });

});



app.get('/messages', function(req, res, next) {

    Message.find({}).sort('-createDate').limit(5).exec(function(err, messages) {

        res.json(messages);

    });

});

.....

Der erste und zweite Controller werden nur zur Bereitstellung statischer HTML-Dateien für die Chat- und Anmeldeseiten verwendet. Der dritte dient zur Handhabung von Paaren /messages? 端點(diǎn)的發(fā)布請求，以創(chuàng)建新消息。在該控制器中，首先將請求正文轉(zhuǎn)換為 Message 模型，然后使用 Mongoose 函數(shù) save.

Ich werde mich nicht n?her mit Mongoose befassen – weitere Einzelheiten finden Sie in der Dokumentation. Sie k?nnen der Speicherfunktion eine Rückruffunktion bereitstellen, um zu überprüfen, ob Probleme vorliegen. Bei Erfolg erhalten wir die letzten 5 Datens?tze in createDate absteigender Reihenfolge und senden 5 Nachrichten an die Kunden im Kanal.

Okay, wir sind fertig mit MC. MC。?讓我們切換到 View

Wechseln wir zum Abschnitt Ansicht.

2.3. Ansicht

Im Allgemeinen k?nnen Template-Engines wie Jade, EJS und Handlers in Express verwendet werden. Allerdings haben wir nur eine Seite, und das ist eine Chat-Nachricht, also werde ich sie statisch bereitstellen. Tats?chlich gibt es, wie ich oben sagte, zwei weitere Controller, die diese statische HTML-Seite bedienen. Sie k?nnen sehen, dass Folgendes zum Bereitstellen einer statischen HTML-Seite verwendet wird.

app.get('/chat', function(req, res){

    res.sendFile(__dirname + '/index.html');

});



app.get('/login', function(req, res){

    res.sendFile(__dirname + '/login.html');

});

res.sendFile 提供 index.html 和 login.html。 ?index.html 和 login.html 與 server.js 位于同一文件夾中，這就是我們在 HTML 文件名之前使用 __dirnameDieser Endpunkt stellt nur index.html und login.html unter Verwendung von res.sendFile bereit.

??index.html und login.html befinden sich im selben Ordner wie server.js, deshalb verwenden wir __dirname vor dem HTML-Dateinamen. ??

2.4。前端

在前端頁面中，我已經(jīng)使用了Bootstrap，無需解釋我是如何做到這一點(diǎn)的。簡單來說，我將一個(gè)函數(shù)綁定到一個(gè)文本框，每當(dāng)您按下Enter鍵或發(fā)送按鈕時(shí)，消息就會(huì)發(fā)送到后端服務(wù)。

該頁面還有一個(gè)必需的Socket.IO js文件，用于監(jiān)聽名為message的頻道。 Socket.IO 模塊已在后端導(dǎo)入，當(dāng)您在服務(wù)器端使用此模塊時(shí)，它會(huì)自動(dòng)添加一個(gè)端點(diǎn)來提供 Socket.IO js 文件，但我們使用由 cdn <script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>。每當(dāng)有新消息進(jìn)入此頻道時(shí)，都會(huì)自動(dòng)檢測到該消息，并且消息列表將刷新為最后 5 條消息。

<script>

        var socket = io();

        socket.on("message", function (messages) {

            refreshMessages(messages);

        });



        function refreshMessages(messages) {

            $(".media-list").html("");

            $.each(messages.reverse(), function(i, message) {

                $(".media-list").append('<li class="media"><div class="media-body"><div class="media"><div class="media-body">'

                + message.message + '<br/><small class="text-muted">' + message.author + ' | ' + message.createDate + '</small><hr/></div></div></div></li>');

            });

        }



        $(function(){



            if (typeof $.cookie("realtime-chat-nickname") === 'undefined') {

                window.location = "/login"

            } else {

                $.get("/messages", function (messages) {

                    refreshMessages(messages)

                });



                $("#sendMessage").on("click", function() {

                    sendMessage()

                });



                $('#messageText').keyup(function(e){

                    if(e.keyCode == 13)

                    {

                        sendMessage();

                    }

                });

            }



            function sendMessage() {

                $container = $('.media-list');

                $container[0].scrollTop = $container[0].scrollHeight;

                var message = $("#messageText").val();

                var author = $.cookie("realtime-chat-nickname");

                $.post( "/messages", {message: message, author: author}, function( data ) {

                    $("#messageText").val("")

                });

                $container.animate({ scrollTop: $container[0].scrollHeight }, "slow");

            }

        })

    </script>

上面的代碼中還有一項(xiàng)檢查：cookie 部分。如果您沒有選擇任何聊天昵稱，則表示該昵稱沒有設(shè)置cookie，您將自動(dòng)重定向到登錄頁面。

如果沒有，最后五條消息將通過對 /messages 端點(diǎn)的簡單 Ajax 調(diào)用來獲取。同樣，每當(dāng)您點(diǎn)擊發(fā)送按鈕或按Enter鍵時(shí)，都會(huì)從文本框中提取短信，并從文本框中提取昵稱。 cookie，這些值將通過 post 請求發(fā)送到服務(wù)器。這里沒有嚴(yán)格檢查昵稱，因?yàn)槲蚁腙P(guān)注實(shí)時(shí)部分，而不是用戶身份驗(yàn)證部分。

正如你所看到的，項(xiàng)目的整體結(jié)構(gòu)非常簡單。讓我們進(jìn)入部署部分。正如我之前所說，我們將使用 Modulus，它是用您選擇的語言部署、擴(kuò)展和監(jiān)控應(yīng)用程序的最佳 PaaS 之一。

3.部署

3.1。先決條件

我首先想到的是向您展示如何部署，但為了成功部署，我們需要一個(gè)工作數(shù)據(jù)庫。我們來看看如何在Modulus上創(chuàng)建數(shù)據(jù)庫，然后進(jìn)行部署。

創(chuàng)建帳戶后轉(zhuǎn)至 Modulus 儀表板。點(diǎn)擊左側(cè)的數(shù)據(jù)庫菜單，然后點(diǎn)擊創(chuàng)建數(shù)據(jù)庫。

在彈出表單中填寫必填字段，如下所示。

當(dāng)您填寫必填字段并點(diǎn)擊創(chuàng)建時(shí)，它將創(chuàng)建一個(gè) MongoDB 數(shù)據(jù)庫您將在屏幕上看到您的數(shù)據(jù)庫 URL。我們將使用 MONGO URI，?因此請復(fù)制該 URI。

在我們的項(xiàng)目中，Mongo URI是從環(huán)境變量MONGO_URI中獲取的，您需要在儀表板中設(shè)置該環(huán)境變量。轉(zhuǎn)到信息中心，點(diǎn)擊項(xiàng)目菜單，在列表中選擇您的項(xiàng)目，然后點(diǎn)擊左側(cè)菜單中的管理。在此頁面中，向下滾動(dòng)頁面時(shí)您將看到環(huán)境變量部分，如下所示。

您可以通過兩種方式部署到 Modulus：

• 使用儀表板上傳項(xiàng)目 ZIP 文件
• 使用 Modulus CLI 從命令行進(jìn)行部署

我將繼續(xù)使用命令行選項(xiàng)，因?yàn)榱硪粋€(gè)很容易做到。首先，安裝 Modulus CLI：

npm install -g modulus

轉(zhuǎn)到您的項(xiàng)目文件夾并執(zhí)行以下命令以登錄 Modulus。

modulus login

當(dāng)您執(zhí)行上述命令時(shí)，系統(tǒng)會(huì)提示您輸入用戶名和密碼：

如果您已使用 GitHub 創(chuàng)建帳戶，則可以使用 --github 選項(xiàng).

modulus login --github

現(xiàn)在您已登錄 Modulus，可以創(chuàng)建項(xiàng)目了。使用以下命令創(chuàng)建項(xiàng)目：

modulus project create "Realtime Chat"

當(dāng)您運(yùn)行此函數(shù)時(shí)，系統(tǒng)會(huì)詢問您運(yùn)行時(shí)。選擇第一個(gè)選項(xiàng)，即 Node.js，第二個(gè)選項(xiàng)將詢問您伺服器的大小，您可以保留默認(rèn)值。

我們已經(jīng)創(chuàng)建了一個(gè)項(xiàng)目，這次我們將把當(dāng)前項(xiàng)目部署到Modulus中。執(zhí)行以下命令將當(dāng)前項(xiàng)目發(fā)送到Modulus端的Realtime Chat項(xiàng)目中。

modulus deploy

它將部署您的項(xiàng)目，并且您將在成功部署消息的末尾獲得正在運(yùn)行的項(xiàng)目 URL：

Realtime Chat running at realtime-chat-46792.onmodulus.net

如您所見，部署到 Modulus 非常簡單！

Modulus CLI verfügt über sehr nützliche Befehle, die w?hrend der Projektbereitstellung oder Laufzeit verwendet werden k?nnen. Um beispielsweise die Protokolle eines laufenden Projekts zu verfolgen, k?nnen Sie modulus 項(xiàng)目日志 tail，創(chuàng)建 MongoDB 數(shù)據(jù)庫使用 modulus mongo create <db-name></db-name> ，要設(shè)置環(huán)境變量，請使用 modulus env set <key> <value></value></key> usw. verwenden. Sie k?nnen die Modulus-Hilfe verwenden, um die vollst?ndige Liste der Befehle anzuzeigen.

Fazit

Der Hauptzweck dieses Tutorials besteht darin, Ihnen zu zeigen, wie Sie eine Echtzeit-Chat-Anwendung mit Node.js, Socket.IO und MongoDB erstellen. Um das Projekt in der Produktion laufen zu lassen, wird Modulus als PaaS-Anbieter eingesetzt. Die Bereitstellungsschritte für Modulus sind sehr einfach und es stellt auch eine interne Datenbank (MongoDB) für unser Projekt bereit. Darüber hinaus k?nnen Sie im Modulus-Dashboard auch sehr nützliche Tools wie Protokollierung, Benachrichtigungen, automatische Skalierung, Datenbankverwaltung usw. verwenden.

Um sich für Modulus anzumelden, klicken Sie hier und erhalten Sie 10 $ zus?tzlich, indem Sie Tuts+-Leser werden. Verwenden Sie den Aktionscode ModulusChat10.

Weitere Informationen zu Modulus-Unternehmensprodukten finden Sie hier.

Das obige ist der detaillierte Inhalt vonLive-Chat: Implementiert mit Modulus und Node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!