Real-time chat med modul og node.js

I denne opplæringen vil jeg vise deg hvordan du implementerer et sanntids chatprogram med Node.js, Socket.IO og MongoDB, og da vil vi distribuere dette programmet til Modulus sammen.

Først av alt, la meg vise deg det endelige utseendet på søknaden som vi vil ha på slutten av artikkelen.

Node.js vil være kjernen til applikasjonen, med Express som MVC, MongoDB for databasen, og Socket.IO for sanntids kommunikasjon. Når vi er ferdige, vil vi distribuere programmet vårt til Modulus. MongoDB-delen eksisterer faktisk innenfor modulen. 

1. Scenario

  1. John vil bruke vår søknad, og åpner den i nettleseren.
  2. På den første siden velger han et brukernavn under chat, og logger seg på for å chatte.
  3. I tekstområdet skriver han noe og trykker Enter.
  4. Teksten sendes til en RESTful tjeneste (Express), og denne teksten er skrevet til MongoDB.
  5. Før du skriver i MongoDB, blir den samme teksten sendt til brukerne som for øyeblikket er logget inn i chat-appen.

Som du kan se, er dette en veldig enkel app, men det dekker nesten alt for et webprogram. Det er ikke noe kanal system i denne applikasjonen, men du kan gaffel kildekoden og implementere kanalmodulen for å øve.

2. Prosjektdesign fra grunnen av

Jeg vil forsøke å forklare de små delene av prosjektet først og kombinere dem på slutten. Jeg starter fra bakenden til forenden. Så, la oss starte med domenenobjektene (MongoDB-modeller).

2.1. Modell

For databaseabstraksjon, vil vi bruke Mongoose. I dette prosjektet har vi bare en modell som heter Budskap. Denne meldingsmodellen inneholder bare tekst, lag dato,og forfatterDet er ingen modell for forfatteren som Brukerfordi vi ikke fullt ut vil implementere et brukerregistrerings- / innloggingssystem. Det vil være en enkel kallenavn-å gi side, og dette kallenavnet blir lagret i en informasjonskapsel. Dette vil bli brukt i Budskap modell som tekst i forfatter felt. Du kan se et eksempel på JSON-modell nedenfor:

text: "Hei, er det en Full Stack Developer her?" forfatter: "john_the_full_stack", createDate: "2015.05.15"

For å lage dokumenter som dette, kan du implementere en modell ved å bruke Mongoose-funksjonene nedenfor:

var mongoose = krever ('mongoose') var Message = new mongoose.Schema (forfatter: String, melding: String, createDate: type: Date, default: Date.now); mongoose.model ('Melding', Melding)

Bare importer Mongoose-modulen, definer modellen med felt og feltattributter i JSON-format, og opprett en modell med navnet Budskap. Denne modellen vil bli inkludert i sidene du vil bruke.

Kanskje du har et spørsmål om hvorfor vi lagrer meldingen i databasen, når vi allerede sender denne meldingen til brukeren i samme kanal. Det er sant at du ikke trenger å lagre chatmeldinger, men jeg ville bare forklare databaseintegrasjonslaget. Uansett vil vi bruke denne modellen i vårt prosjekt inne i kontrollerne. Controllers?

2.2. Controller

Som jeg sa tidligere, vil vi bruke Express for MVC-delen. Og Cher står for Controller. For våre prosjekter vil det kun være to sluttpunkter for meldingstjenester. En av dem er for lasting av nylige chatmeldinger, og den andre er for håndtering av sendte chatmeldinger for å lagre i databasen, og deretter sendes inn i kanalen. 

... app.get ('/ chat', funksjon (req, res) res.sendFile (__ dirname + '/index.html');); app.get ('/ login', funksjon (req, res) res.sendFile (__ dirname + '/login.html');); app.post ('/ messages', funksjon (req, res, neste) var message = req.body.message; var author = req.body.author; var messageModel = ny melding (); messageModel.author = author; messageModel.message = message; messageModel.save (funksjon (feil, resultat) if (! err) Message.find (). sort ('- createDate') .grense (5) .exec (funksjon meldinger) io.emit ("melding", meldinger);); res.send ("Melding sendt!"); else res.send ("Teknisk feil oppstod!");;;); app.get ('/ messages', funksjon (req, res, neste) Message.find (). sort ('- createDate') .grense (5) .exec (funksjon (feil, meldinger) res. json (meldinger););); ... 

De første og andre kontrollerne er bare for å betjene statiske HTML-filer for chat- og påloggingssidene. Den tredje er å håndtere postforespørselen til / meldingersluttpunkt for å lage nye meldinger. I denne kontrolleren blir først og fremst forespørselslegemet konvertert til Meldingsmodellen, og deretter lagres denne modellen i databasen ved å bruke Mongoose-funksjonen lagre

Jeg vil ikke dykke i Mongoose veldig mye - du kan se på dokumentasjonen for ytterligere detaljer. Du kan gi en tilbakeringingsfunksjon for lagringsfunksjonen for å sjekke om det er noe problem eller ikke. Hvis det lykkes, har vi hentet de fem siste postene sortert i synkende rekkefølge av lag dato, og har sendt fem meldinger til klientene i kanalen. 

Ok, vi er ferdige MC.La oss bytte til Utsikt del.

2.3. Utsikt

Generelt kan en malmotor som Jade, EJS, Handlebars, etc., brukes innen Express. Vi har imidlertid bare en side, og det er en chatmelding, så jeg vil betjene dette statisk. Faktisk, som jeg sa ovenfor, er det to kontroller som skal betjene denne statiske HTML-siden. Du kan se følgende for å vise en statisk HTML-side.

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

Dette endpointet tjener bare index.html og login.html ved å bruke res.sendFile. Bådeindex.html og login.html er i samme mappe som server.js, og derfor brukte vi __dirname før HTML-filnavnet.

2.4. Frontend

På forsiden har jeg brukt Bootstrap, og det er ikke nødvendig å forklare hvordan jeg klarte å gjøre det. Bare, jeg har bundet en funksjon til en tekstboks, og når du trykker på Tast inn nøkkel eller Sende knappen, vil meldingen bli sendt til back-end-tjenesten. 

Denne siden har også en nødvendig js-fil av Socket.IO for å lytte til kanalen som heter budskap. Socket.IO-modulen er allerede importert i bakenden, og når du bruker denne modulen på serversiden, legger den automatisk til et sluttpunkt for visning av Socket.IO js-filen, men vi bruker den som serveres fra cdn . Når en ny melding kommer inn i denne kanalen, blir den automatisk oppdaget og meldingslisten vil bli oppdatert med de siste fem meldingene.  

Det er enda en sjekk i koden ovenfor: informasjonskapseldelen. Hvis du ikke har valgt et kallenavn for chat, betyr det at kaken ikke er angitt for kallenavnet, og du blir automatisk omdirigert til påloggingssiden. 

Hvis ikke, hentes de siste fem meldingene av et enkelt Ajax-anrop til / meldinger endepunkt. På samme måte, når du klikker på Sende knappen eller trykk på Tast inn nøkkel, blir tekstmeldingen hentet fra tekstboksen, og kallenavnet hentes fra informasjonskapsel, og disse verdiene vil bli sendt til serveren med en forespørsel om innlegg. Det er ingen streng kontroll for kallenavnet her, fordi jeg ønsket å fokusere på sanntidsdelen, ikke brukergodkjenningsdelen.

Som du kan se, er prosjektets overordnede struktur veldig enkel. La oss komme til distribusjonsdelen. Som jeg sa tidligere, vil vi bruke Modulus, en av de beste PaaSene for å distribuere, skalere og overvåke søknaden din på språket ditt valg. 

3. Distribusjon

3.1. Forutsetninger

Det første som kommer til å tenke meg, er å vise deg hvordan du distribuerer, men for vellykket distribusjon trenger vi en arbeidsdatabase. La oss se på hvordan du lager en database på modulen og deretter utfører distribusjon. 

Gå til modulskjermbildet etter å ha opprettet en konto. Klikk på databaser menyen til venstre, og klikk Opprett database. 

Fyll ut de nødvendige feltene i popup-skjemaet som nedenfor.

Når du fyller ut de nødvendige feltene og klikker Skape, det vil opprette en MongoDB-database for deg, og du vil se databasens URL på skjermen. Vi vil bruke MONGO URI,så kopier den URI.

I vårt prosjekt hentes Mongo URI fra miljøvariabelen MONGO_URI, og du må angi denne miljøvariabelen i dashbordet. Gå til dashbordet, klikk på prosjekter menyen, velg prosjektet ditt i listen, og klikk Administrasjon i venstre meny. På denne siden vil du se avsnittet om miljøvariabler når du ruller nedover siden, som vist nedenfor.

Du kan distribuere til modul på to måter: 

  • laster opp prosjektets ZIP-fil ved hjelp av dashbordet
  • distribusjon fra kommandolinjen ved hjelp av modul CLI

Jeg vil fortsette med kommandolinjevalg, fordi den andre er lett å gjøre. Først og fremst installerer du Modulus CLI:

npm installer -g modulus

Gå til prosjektmappen din og utfør følgende kommando for å logge på Modul.

modul innlogging

Når du utfører kommandoen ovenfor, blir du bedt om å skrive inn et brukernavn og passord:

Hvis du har opprettet en konto ved hjelp av GitHub, kan du bruke --GitHub alternativ.

modulinnlogging - gitub

Nå er du logget på Modulus, og det er på tide å lage et prosjekt. Bruk følgende kommando for å opprette et prosjekt:

modulprosjektet oppretter "Realtime Chat"

Når du kjører denne funksjonen, blir du bedt om kjøretiden. Velg det første alternativet, som er Node.js, og det andre blir du bedt om servostørrelsen, og du kan beholde den som standard.

Vi har opprettet et prosjekt, og denne gangen vil vi distribuere vårt nåværende prosjekt til Modulus. Kjør følgende kommando for å sende det nåværende prosjektet til Realtime Chat prosjekt på modulsiden.

moduler distribuere

Den vil distribuere prosjektet ditt, og du vil få din løpende prosjektadresse på slutten av den vellykkede distribusjonsmeldingen:

Realtime Chat kjører på realtime-chat-46792.onmodulus.net

Som du kan se, er distribusjonen til Modulus veldig enkelt! 

Modul CLI har svært nyttige kommandoer å bruke under prosjektet distribusjon eller på kjøretid. For eksempel, for å hale logger av ditt løpeprosjekt, kan du bruke modulus prosjekt logger hale, å opprette en MongoDB database bruk modulus mongo skape , å angi en miljøvariabel bruk modul env sett , etc. Du kan se en fullstendig liste over kommandoer ved å bruke modulhjelp. 

Konklusjon

Hovedformålet med denne opplæringen var å vise deg hvordan du lager et sanntids chatprogram med Node.js, Socket.IO og MongoDB. For å drive et prosjekt i produksjon, brukes Modulus som en PaaS-leverandør. Modulus har svært enkle trinn for distribusjon, og det har også en intern database (MongoDB) for våre prosjekter. Ved siden av dette kan du bruke svært nyttige verktøy i modulskjermbildet, for eksempel logger, varsler, automatisk skalering, databaseadministrasjon og så videre.

For å registrere deg for Modulus klikk her og få ekstra $ 10 eksklusivt for å være en Tuts + leser. Bruk kampanjekode ModulusChat10.

For mer informasjon om Modulus Enterprise tilbyr klikk her.