Chat in tempo reale con modulo e Node.js

In questo tutorial, ti mostrerò come implementare un'applicazione di chat in tempo reale con Node.js, Socket.IO e MongoDB, e quindi implementeremo questa applicazione in Modulus insieme.

Prima di tutto, lascia che ti mostri l'aspetto finale dell'applicazione che avremo alla fine dell'articolo.

Node.js sarà il nucleo dell'applicazione, con Express come MVC, MongoDB per il database e Socket.IO per la comunicazione in tempo reale. Quando avremo finito, implementeremo la nostra applicazione su Modulus. La parte MongoDB esiste effettivamente all'interno di Modulus. 

1. Scenario

1. John vuole utilizzare la nostra applicazione e la apre nel browser.
2. Nella prima pagina, seleziona un nickname durante la chat e accede alla chat.
3. Nell'area di testo scrive qualcosa e preme Invio.
4. Il testo viene inviato a un servizio RESTful (Express) e questo testo è scritto su MongoDB.
5. Prima di scrivere in MongoDB, lo stesso testo verrà trasmesso agli utenti che sono attualmente connessi all'app di chat.

Come puoi vedere, questa è un'app molto semplice, ma copre quasi tutto per un'applicazione web. Non esiste un sistema di canali in questa applicazione, ma è possibile inserire il codice sorgente e implementare il modulo del canale per esercitarsi.

2. Project Design From Scratch

Proverò a spiegare prima i piccoli pezzi del progetto e a combinarli alla fine. Inizierò dal back end al front end. Quindi, iniziamo con gli oggetti dominio (modelli MongoDB).

2.1. Modello

Per l'astrazione del database, useremo Mongoose. In questo progetto, abbiamo chiamato solo un modello Messaggio. Questo modello di messaggio contiene solo testo, CreateDate,e autore. Non esiste un modello per l'autore Utente, perché non implementeremo completamente un sistema di registrazione / login utente. Ci sarà una semplice pagina che fornisce nickname e questo nickname verrà salvato in un cookie. Questo sarà usato nel Messaggio modella come testo nel autore campo. Puoi vedere un esempio di modello JSON di seguito:

text: "Ciao, c'è uno sviluppatore Full Stack qui?" autore: "john_the_full_stack", createDate: "2015.05.15"

Per creare documenti come questo, puoi implementare un modello usando le seguenti funzioni di Mongoose:

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

È sufficiente importare il modulo Mongoose, definire il modello con i relativi campi e attributi di campo in formato JSON e creare un modello con il nome Messaggio. Questo modello verrà incluso nelle pagine che si desidera utilizzare.

Forse hai una domanda sul motivo per cui stiamo memorizzando il messaggio nel database, quando già trasmettiamo questo messaggio all'utente nello stesso canale. È vero che non è necessario memorizzare i messaggi di chat, ma volevo solo spiegare il livello di integrazione del database. Ad ogni modo, utilizzeremo questo modello nel nostro progetto all'interno dei controller. Controller?

2.2. controllore

Come ho detto prima, useremo Express per la parte MVC. E Cqui sta per il controllore. Per i nostri progetti, ci saranno solo due endpoint per la messaggistica. Uno di questi è per caricare i messaggi recenti di chat e il secondo è per gestire i messaggi di chat inviati da archiviare nel database e quindi trasmetterli nel canale. 

... 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 autore = 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, messaggi) io.emit ("message", messages);); res.send ("Message Sent!"); else res.send ("Si è verificato un errore tecnico!"););); app.get ('/ messages', function (req, res, next) Message.find (). sort ('- createDate'). limit (5) .exec (function (err, messages) res. json (messaggi););); ...) 

Il primo e il secondo controller servono solo a servire file HTML statici per le pagine di chat e di accesso. Il terzo è per la gestione della richiesta di posta al / messaggiendpoint per la creazione di nuovi messaggi. In questo controller, prima di tutto il corpo della richiesta viene convertito nel modello Message, quindi questo modello viene salvato nel database utilizzando la funzione Mongoose salvare. 

Non mi immergerò molto in Mongoose: puoi dare un'occhiata alla documentazione per ulteriori dettagli. È possibile fornire una funzione di richiamata per la funzione di salvataggio per verificare se vi siano problemi o meno. Se ha successo, abbiamo recuperato gli ultimi cinque record ordinati in ordine decrescente per CreateDate, e hanno trasmesso cinque messaggi ai clienti nel canale. 

Ok, abbiamo finito MC.Passiamo al vista parte.

2.3. vista

In generale, un motore di template come Jade, EJS, Handlebars, ecc. Può essere utilizzato all'interno di Express. Tuttavia, abbiamo solo una pagina, e questo è un messaggio di chat, quindi lo servirò staticamente. In realtà, come ho detto sopra, ci sono altri due controller per servire questa pagina HTML statica. Puoi vedere quanto segue per pubblicare una pagina HTML statica.

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

Questo endpoint serve semplicemente index.html e login.html usando res.sendFile. Tutti e dueindex.html e login.html si trovano nella stessa cartella di server.js, ed è per questo che abbiamo usato __dirname prima del nome del file HTML.

2.4. Fine frontale

Nella pagina front-end ho usato Bootstrap e non è necessario spiegare come sono riuscito a farlo. Semplicemente, ho associato una funzione a una casella di testo e ogni volta che premete il tasto accedere chiave o Inviare pulsante, il messaggio verrà inviato al servizio back-end. 

Questa pagina ha anche un file js richiesto di Socket.IO per ascoltare il canale chiamato Messaggio. Il modulo Socket.IO è già importato nel back-end e quando si utilizza questo modulo sul lato server, aggiunge automaticamente un endpoint per servire il file js Socket.IO, ma usiamo quello fornito da cdn . Ogni volta che un nuovo messaggio arriva a questo canale, verrà automaticamente rilevato e l'elenco dei messaggi verrà aggiornato con gli ultimi cinque messaggi.  

C'è un altro controllo nel codice sopra: la parte del cookie. Se non hai scelto alcun nickname per la chat, significa che il cookie non è impostato per il nickname e verrai reindirizzato automaticamente alla pagina di accesso. 

In caso contrario, gli ultimi cinque messaggi verranno recuperati da una semplice chiamata Ajax al / messaggi endpoint. Allo stesso modo, ogni volta che fai clic sul Inviare pulsante o premere il tasto accedere chiave, il messaggio di testo verrà prelevato dalla casella di testo e il nickname verrà recuperato dal cookie e tali valori verranno inviati al server con una richiesta di post. Non c'è un controllo rigoroso per il nickname qui, perché volevo concentrarmi sulla parte in tempo reale, non sulla parte di autenticazione dell'utente.

Come puoi vedere, la struttura generale del progetto è molto semplice. Veniamo alla parte di spiegamento. Come ho detto prima, useremo Modulus, uno dei migliori PaaS per la distribuzione, il ridimensionamento e il monitoraggio della tua applicazione nella lingua di tua scelta. 

3. Distribuzione

3.1. Prerequisiti

La prima cosa che mi viene in mente è mostrarti come distribuire, ma per una distribuzione di successo, abbiamo bisogno di un database funzionante. Diamo un'occhiata a come creare un database su Modulus e quindi eseguire la distribuzione. 

Vai alla dashboard Modulus dopo aver creato un account. Clicca il Banche dati menu a sinistra e fare clic Crea Database. 

Compila i campi richiesti nel modulo popup come sotto.

Quando compili i campi richiesti e fai clic Creare, creerà un database MongoDB per te e vedrai l'URL del tuo database sullo schermo. Noi useremo UGO MONGO,quindi copia quell'URI.

Nel nostro progetto, l'URI Mongo viene prelevato dalla variabile d'ambiente MONGO_URI, e devi impostare la variabile di ambiente nella dashboard. Vai alla dashboard, fai clic su progetti menu, selezionare il progetto nell'elenco e fare clic Amministrazione nel menu a sinistra. In questa pagina, vedrai la sezione delle variabili d'ambiente quando scorri verso il basso la pagina, come mostrato di seguito.

Puoi schierare in Modulus in due modi: 

• caricamento del file ZIP del progetto utilizzando la dashboard
• distribuzione dalla riga di comando utilizzando Modulus CLI

Continuerò con l'opzione della riga di comando, perché l'altro è facile da fare. Prima di tutto, installa Modulus CLI:

npm install -g modulo

Vai alla cartella del tuo progetto ed esegui il seguente comando per accedere a Modulus.

accesso modulo

Quando esegui il comando sopra, ti verrà richiesto di inserire un nome utente e una password:

Se hai creato un account usando GitHub, puoi usare il --github opzione.

login modulo --github

Ora sei connesso a Modulus ed è ora di creare un progetto. Utilizzare il seguente comando per creare un progetto:

progetto modulo creare "chat in tempo reale"

Quando si esegue questa funzione, verrà richiesto il runtime. Seleziona la prima opzione, che è Node.js, e in secondo luogo ti verrà richiesta la dimensione del servo, e puoi mantenerla come predefinita.

Abbiamo creato un progetto e questa volta implementeremo il nostro attuale progetto su Modulus. Esegui il seguente comando per inviare il progetto corrente a Chat in tempo reale progetto sul lato Modulus.

modulo distribuire

Distribuirà il progetto e verrà visualizzato l'URL del progetto in esecuzione alla fine del messaggio di distribuzione riuscito:

Chat in tempo reale in esecuzione su realtime-chat-46792.onmodulus.net

Come puoi vedere, la distribuzione su Modulus è molto semplice! 

Modulo CLI ha comandi molto utili da utilizzare durante la distribuzione del progetto o in fase di esecuzione. Ad esempio, per poter registrare i log del tuo progetto in esecuzione, puoi utilizzare coda di registro modulo modulo, per creare un database MongoDB modulo mongo creare , per impostare un uso variabile di ambiente modulo env impostato , ecc. Puoi vedere una lista completa di comandi usando l'aiuto Modulus. 

Conclusione

Lo scopo principale di questo tutorial era di mostrare come creare un'applicazione di chat in tempo reale con Node.js, Socket.IO e MongoDB. Per eseguire un progetto in produzione, Modulus viene utilizzato come fornitore PaaS. Modulus ha passaggi molto semplici per la distribuzione e ha anche un database interno (MongoDB) per i nostri progetti. Oltre a questo, è possibile utilizzare strumenti molto utili all'interno del dashboard Modulus come registri, notifiche, scalabilità automatica, amministrazione del database e così via.

Per iscriverti a Modulus fai clic qui e ottieni $ 10 in più esclusivamente per essere un lettore Tuts +. Usa il codice promozionale ModulusChat10.

Per maggiori informazioni sull'offerta aziendale Modulus clicca qui.