Realtime chat met modulus en Node.js

In deze zelfstudie laat ik je zien hoe je een real-time chat-applicatie implementeert met Node.js, Socket.IO en MongoDB, en dan zullen we deze applicatie samen in Modulus implementeren.

Allereerst wil ik u de laatste indruk laten zien van de toepassing die we aan het einde van het artikel zullen hebben.

Node.js wordt de kern van de toepassing, met Express als MVC, MongoDB voor de database en Socket.IO voor realtime communicatie. Wanneer we klaar zijn, zullen we onze applicatie in Modulus implementeren. Het MongoDB-gedeelte bestaat eigenlijk binnen Modulus.

1. Scenario

John wil onze applicatie gebruiken en opent deze in de browser.
Op de eerste pagina selecteert hij een bijnaamgebruik tijdens de chat en logt hij in om te chatten.
In het tekstgedeelte schrijft hij iets en drukt op Enter.
De tekst wordt verzonden naar een RESTful-service (Express) en deze tekst is geschreven naar MongoDB.
Voordat u in MongoDB schrijft, wordt dezelfde tekst uitgezonden naar de gebruikers die momenteel zijn aangemeld bij de chat-app.

Zoals u kunt zien, is dit een zeer eenvoudige app, maar deze omvat bijna alles voor een webtoepassing. Er is geen kanaalsysteem in deze toepassing, maar u kunt de broncode aftasten en de kanaalmodule implementeren voor oefenen.

2. Projectontwerp van Scratch

Ik zal proberen de kleine stukjes van het project eerst uit te leggen en ze aan het einde te combineren. Ik zal van de achterkant naar de voorkant gaan. Laten we beginnen met de domeinobjecten (MongoDB-modellen).

2.1. Model

Voor database-abstractie zullen we Mongoose gebruiken. In dit project hebben we slechts één model genaamd Bericht. Dit berichtmodel bevat alleen tekst, CreateDate,en schrijver. Er is geen model voor de auteur zoals Gebruiker, omdat we een gebruikersregistratie- / inlogsysteem niet volledig zullen implementeren. Er zal een eenvoudige bijnaam-aanbiedende pagina zijn, en deze bijnaam zal worden opgeslagen in een cookie. Dit wordt gebruikt in de Bericht model als tekst in de schrijver veld. Hieronder ziet u een voorbeeld van een JSON-model:

text: "Hallo, is hier een Full Stack-ontwikkelaar?" author: "john_the_full_stack", createDate: "2015.05.15"

Om documenten zoals deze te maken, kunt u een model implementeren met behulp van de Mongoose-functies hieronder:

var mongoose = require ('mongoose') var Message = new mongoose.Schema (author: String, message: String, createDate: type: Date, default: Date.now); mongoose.model ('Message', Message)

Importeer gewoon de Mongoose-module, definieer uw model met de velden en veldkenmerken in JSON-indeling en maak een model met de naam Bericht. Dit model wordt opgenomen op de pagina's die u wilt gebruiken.

Misschien heb je een vraag over waarom we het bericht in de database opslaan, terwijl we dit bericht al naar de gebruiker in hetzelfde kanaal hebben uitgezonden. Het klopt dat je geen chatberichten hoeft op te slaan, maar ik wilde alleen de database-integratielaag uitleggen. Hoe dan ook, we zullen dit model gebruiken in ons project binnen de controllers. Controllers?

2.2. controleur

Zoals ik eerder al zei, zullen we Express gebruiken voor het MVC-gedeelte. En Chier staat voor de controleur. Voor onze projecten zijn er slechts twee eindpunten voor berichten. Een daarvan is voor het laden van recente chatberichten en de tweede is voor het afhandelen van verzonden chatberichten om op te slaan in de database en vervolgens uit te zenden naar het kanaal.

... app.get ('/ chat', functie (req, res) res.sendFile (__ dirname + '/index.html');); app.get ('/ login', functie (req, res) res.sendFile (__ dirname + '/login.html');); app.post ('/ messages', functie (req, res, next) var message = req.body.message; var author = req.body.author; var messageModel = new Message (); messageModel.author = auteur; messageModel.message = bericht; messageModel.save (functie (err, result) if (! err) Message.find (). sort ('- createDate'). limit (5) .exec (function (err, berichten) io.emit ("bericht", berichten);); res.send ("Message Sent!"); else res.send ("Technische fout opgetreden!"););); app.get ('/ messages', functie (req, res, next) Message.find (). sort ('- createDate'). limit (5) .exec (functie (err, berichten) res. json (berichten););); ...

De eerste en tweede controllers dienen alleen voor het weergeven van statische HTML-bestanden voor de chat- en inlogpagina's. De derde is voor het afhandelen van het postverzoek naar de / messageseindpunt voor het maken van nieuwe berichten. In deze controller wordt eerst de hoofdtekst van het verzoek geconverteerd naar het berichtmodel en vervolgens wordt dit model in de database opgeslagen met behulp van de Mongoose-functie opslaan.

Ik zal niet zo veel in Mongoose duiken - je kunt de documentatie bekijken voor meer informatie. U kunt een callback-functie voor de opslagfunctie opgeven om te controleren of er een probleem is of niet. Als dit lukt, hebben we de laatste vijf records opgehaald in aflopende volgorde gesorteerd op CreateDate, en hebben vijf berichten uitgezonden naar de clients in het kanaal.

Ok, we zijn klaar MC.Laten we overschakelen naar de Uitzicht een deel.

2.3. Uitzicht

Over het algemeen kan een sjabloon als Jade, EJS, Handlebars enz. Worden gebruikt binnen Express. We hebben echter slechts één pagina en dat is een chatbericht, dus ik zal dit statisch dienen. Zoals ik hierboven al zei, zijn er eigenlijk nog twee controllers om deze statische HTML-pagina te bedienen. U kunt het volgende zien voor het weergeven van een statische HTML-pagina.

app.get ('/ chat', functie (req, res) res.sendFile (__ dirname + '/index.html');); app.get ('/ login', functie (req, res) res.sendFile (__ dirname + '/login.html'););

Dit eindpunt dient gewoon voor index.html en login.html door te gebruiken res.sendFile. Beideindex.html en login.html bevinden zich in dezelfde map als server.js, daarom hebben we deze gebruikt __dirname vóór de HTML-bestandsnaam.

2.4. Voorkant

Op de voorpagina heb ik Bootstrap gebruikt en het is niet nodig om uit te leggen hoe ik dat heb gedaan. Gewoon, ik heb een functie gebonden aan een tekstvak, en telkens wanneer u op de invoeren toets of Sturen knop, wordt het bericht verzonden naar de back-endservice.

Deze pagina heeft ook een vereist js-bestand van Socket.IO om naar het geroepen kanaal te luisteren bericht. De Socket.IO-module is al geïmporteerd aan de achterkant en wanneer u deze module gebruikt aan de serverzijde, wordt er automatisch een eindpunt toegevoegd voor het weergeven van het Socket.IO js-bestand, maar we gebruiken het eindpunt dat wordt geserveerd via cdn . Wanneer een nieuw bericht op dit kanaal binnenkomt, wordt het automatisch gedetecteerd en wordt de berichtenlijst vernieuwd met de laatste vijf berichten.

Er is nog een vinkje in de bovenstaande code: het cookie-gedeelte. Als u geen bijnaam voor chat hebt gekozen, betekent dit dat de cookie niet is ingesteld voor de bijnaam en dat u automatisch wordt omgeleid naar de inlogpagina.

Zo niet, dan worden de laatste vijf berichten opgehaald door een eenvoudige Ajax-oproep naar de / messages eindpunt. Op dezelfde manier, telkens wanneer u op Sturen knop of druk op de invoeren sleutel, wordt het SMS-bericht opgehaald uit het tekstvak en wordt de bijnaam opgehaald van de cookie, en die waarden worden naar de server verzonden met een postverzoek. Er is hier geen strikte controle voor de bijnaam, omdat ik me wilde concentreren op het deel in realtime, niet op het gedeelte voor gebruikersauthenticatie.

Zoals u kunt zien, is de algemene structuur van het project erg eenvoudig. Laten we naar het inzetdeel gaan. Zoals ik eerder al zei, zullen we Modulus gebruiken, een van de beste PaaS voor het implementeren, schalen en monitoren van uw toepassing in de taal van uw keuze.

3. Implementatie

3.1. voorwaarden

Het eerste dat me te binnen schiet, is om u te laten zien hoe u het implementeert, maar voor een succesvolle implementatie hebben we een werkende database nodig. Laten we eens kijken naar hoe een database op Modulus te maken en vervolgens deployment uit te voeren.

Ga naar het Modulus-dashboard nadat u een account hebt gemaakt. Klik op de databases menu aan de linkerkant en klik op Maak een database.

Vul de vereiste velden in het pop-upformulier in, zoals hieronder.

Wanneer u de vereiste velden invult en klikt creëren, het maakt een MongoDB-database voor u en u ziet uw database-URL op het scherm. We zullen gebruiken MONGO URI,dus kopieer die URI.

In ons project wordt Mongo URI opgehaald uit de omgevingsvariabele MONGO_URI, en je moet die omgevingsvariabele instellen in het dashboard. Ga naar het dashboard, klik op de projecten menu, selecteer uw project in de lijst en klik op Toediening in het linkermenu. Op deze pagina ziet u het gedeelte omgevingsvariabelen wanneer u de pagina omlaag schuift, zoals hieronder wordt weergegeven.

U kunt op twee manieren naar Modulus distribueren:

het uploaden van het project ZIP-bestand met behulp van het dashboard
deployment vanaf de opdrachtregel met Modulus CLI

Ik ga verder met de opdrachtregeloptie, omdat de andere eenvoudig te doen is. Allereerst installeer Modulus CLI:

npm install-g modulus

Ga naar uw projectmap en voer de volgende opdracht uit om u aan te melden bij Modulus.

modulus login

Wanneer u de bovenstaande opdracht uitvoert, wordt u gevraagd om een gebruikersnaam en wachtwoord in te voeren:

Als u een account hebt gemaakt met behulp van GitHub, kunt u de --github keuze.

modulus login - github

U bent nu aangemeld bij Modulus en het is tijd om een project te maken. Gebruik de volgende opdracht om een project te maken:

modulus project creëer "Realtime Chat"

Wanneer u deze functie uitvoert, wordt u om de runtime gevraagd. Selecteer de eerste optie, die Node.js is, en ten tweede wordt u gevraagd naar de servo-grootte en kunt u deze als standaard instellen.

We hebben een project gemaakt en dit keer zullen we ons huidige project in Modulus implementeren. Voer de volgende opdracht uit om het huidige project naar de te verzenden Realtime Chat project aan de Modulus kant.

modulus deploy

Uw project wordt geïmplementeerd en aan het einde van het succesvolle implementatiemelding ontvangt u uw actieve project-URL:

Realtime-chat uitgevoerd op realtime-chat-46792.onmodulus.net

Zoals u kunt zien, is de inzet naar Modulus zeer eenvoudig!

Modulus CLI heeft zeer nuttige commando's om te gebruiken tijdens uw projectimplementatie of tijdens runtime. U kunt bijvoorbeeld gebruiken om logboeken van uw actieve project te verwijderen modulus project logs staart, om een MongoDB-database te gebruiken modulus mongo maken , om een gebruik van de omgevingsvariabele in te stellen modulus env-set , enz. U kunt een volledige lijst met opdrachten zien met behulp van Modulus help.

Conclusie

Het belangrijkste doel van deze zelfstudie was om u te laten zien hoe u een realtime chattoepassing kunt maken met Node.js, Socket.IO en MongoDB. Om een project in productie te leiden, wordt Modulus gebruikt als een PaaS-provider. Modulus heeft zeer eenvoudige implementatiestappen en heeft ook een interne database (MongoDB) voor onze projecten. Daarnaast kunt u zeer nuttige tools gebruiken binnen het Modulus-dashboard zoals Logs, Notifications, Auto-Scaling, Database Administration, enzovoort.

Om u aan te melden voor Modulus, klik hier en ontvang een extra $ 10 exclusief voor het zijn van een Tuts + -lezer. Gebruik promocode ModulusChat10.

Klik hier voor meer informatie over het Modulus Enterprise-aanbod.

Code