Share
Å ha en "husk meg" -funksjon er en svært nyttig funksjon, og implementering med React and Express er relativt enkelt. Fortsatt fra vår siste del der vi satte opp et WebRTC-chatprogram, vil vi nå legge til Mongo-støttede vedvarende økter og en database-støttet online brukerliste for godt mål.
Hvis du ikke har brukt økter før, i korte tider, de er ganske lik cookies, i disse sesjonene kan du spore de aktive brukerne av søknaden din i sanntid. Sessene jobber egentlig via a øktkake, som sendes i forespørsel / svarhodene fra appen din.
Så informasjonskapsler og økter er sammenflettet av naturen. Så hvorfor trenger vi økter hvis vi allerede har informasjonskapsler? Hvilke økter gir deg i tillegg er muligheten til å definere backend-lagringsplassen som brukes av serverdelen av søknaden din. Dette betyr at når informasjonen kreves av appen din, kan den hentes fra databasen.
Så i et virkelighetseksempel for vårt chat-program, kan vi nå lagre brukernavnet til brukeren, og hvis vi omkonfigurerer vår app noe, kan du også sette hele chatloggen inn i databasen for logging.
I dette neste eksempelet vil vi bruke en Mongo database for vedvarende back-end lagring. Dette er en av flere alternativer tilgjengelig for økt lagring, og en annen jeg anbefaler på det sterkeste for større produksjonsoppsett med flere webservere er memcache.
Mongo er en NoSQL-dokumentlagringsmotor i stedet for en relationsdatabutikk som den populære MySQL. NoSQL er veldig lett å få hodet rundt hvis du kommer fra MySQL eller lignende databaser og trenger å komme opp til fart med Mongo-det tar ikke lang tid. De største forskjellene du bør vite er følgende:
Accentsconagua
db.collectionName.find () ville være en VELG * FRA tabell.Hvis du ikke har Mongo, vennligst installer den via pakken din. I Linux-baserte distribusjoner, for eksempel:
bash $ sudo apt-get install mongodb
Når vi har installert Mongo, kan vi enkelt legge til Mongo-støtte til vårt chatprogram med Mongoose modul tilgjengelig fra npm. Installere Mongoose med følgende:
bash $ npm installere mongoose - save
La oss nå legge til noen Mongo i vår app. Brann opp kodeditoren din, og åpne app.js og sett toppen av skriptet ditt for å være som følger.
"js // Konfigurer våre tjenester var PeerServer = krever ('peer'). PeerServer, express = krever ('express'), mongoose = krever ('mongoose'), assert = kreve ('assert'), events = './src/events.js'), app = express (), port = process.env.PORT || 3001;
// Koble til databasen mongoose.connect ('mongodb: // localhost: 27017 / chat'); var db = mongoose.connection;
mongoose.set ('debug', true);
db.on ('error', console.error.bind (konsoll, '# Mongo DB: tilkoblingsfeil:')); "
Vi inkluderer Mongoose med kreve ( 'Mungofamilien') og bruk deretter vår databaseforbindelse via mongoose.connect ( 'mongodb: // localhost: 27017 / chat');.
De / chat definerer navnet på databasen vi kobler til.
Deretter anbefaler jeg for utviklingsformål at vi setter feilsøkingen på.
js mongoose.set ('debug', true);
Til slutt legger vi til en behandler for eventuelle feilhendelser:
js db.on ('error', console.error.bind (konsoll, '# Mongo DB: tilkoblingsfeil:'));
Deretter kan du legge til sjekken din for forbindelsen med følgende kode:
js db.once ('open', funksjon (tilbakering) console.log ("# Mongo DB: Koblet til server");
Måten som Mongoose er brukt er det en gang db eksempel mottar åpen hendelse, vil vi gå inn i utførelse for vår mongo-tilkobling. Så vi må pakke vår eksisterende kode inn i denne nye mongo-forbindelsen for å kunne utnytte den.
Her er en full kodeoppføring med mongoose lagt til og setter inn rader og sletting av dem som brukere kommer på nettet og går offline.
"js
// Konfigurer våre tjenester var PeerServer = krever ('peer'). PeerServer, express = krever ('express'), mongoose = krever ('mongoose'), assert = kreve ('assert'), events = /src/events.js '), app = express (), port = process.env.PORT || 3001;
// Fortell uttrykk for å bruke 'src' katalogen app.use (express.static (__ dirname + '/ src'));
// Koble til databasen mongoose.connect ('mongodb: // localhost: 27017 / chat'); var db = mongoose.connection;
mongoose.set ('debug', true);
db.on ('error', console.error.bind (konsoll, '# Mongo DB: tilkoblingsfeil:'));
db.once ('open', funksjon (tilbakeringing)
console.log ("# Mongo DB: Koblet til server");
// Oppsett vårt brukerskjema var usersSchema = mongoose.Schema (brukernavn: String); var Bruker = mongoose.model ('User', usersSchema);
// Konfigurer http-serveren og PeerJS-serveren var expressServer = app.listen (port); var io = krever ('socket.io'). lytt (expressServer); var peer = ny PeerServer (port: 9000, bane: '/ chat');
// Skriv ut noen konsollutgangskonsoll.logg ('#### - Serverløp - ####'); console.log ('# Express: Lytt på port', port);
peer.on ('connection', funksjon (id) io.emit (events.CONNECT, id); console.log ('# Connected:', id);
// Store Peer i databasen var bruker = Ny bruker (brukernavn: id); user.save (funksjon (feil, bruker) hvis (feil) returnerer console.error (err); console.log ('# User' + id + 'lagret i database');); );
peer.on ('disconnect', funksjon (id) io.emit (events.DISCONNECT, id); console.log ('# Disconnected:', id);
// Fjern Peer fra database User.remove (brukernavn: id, funksjon (err) hvis (err) returner console.error (err));
);
);"
For å se dette arbeidet, la oss brann opp chatprogrammet. Bare løp npm start å få det opp.
Koble nå til chatten som vanlig i nettleseren (standard på http: // localhost: 3001).
Når du har koblet deg til nettpraten din, åpner du et nytt terminalvindu mongo chat å gå inn i mongo cli.
bash $ mongo chat MongoDB shell versjon: 2.0.6 kobler til: chat> db.users.find () "brukernavn": "CameronLovesPigs", "_id": ObjectId ("5636e9d7bd4533d610040730"), "__v": 0
Her har du dokumentoppføringen lagret i din mongo, og nå kan du alltid sjekke hvor mange brukere som er på nett ved å kjøre på mongo-spørringen db.users.count ().
bash> db.users.count () 3
Fordi vi brukte Express for å bygge vår applikasjon, er denne delen veldig enkel og krever bare å installere et par moduler fra NPM å få oss til å gå.
Hent ekspress-session og koble-mongo pakker fra npm:
bash $ npm installere express-session connect-mongo cookie-parser - lagre
Ta med dem i toppen av app.js:
jes var PeerServer = krever ('peer'). PeerServer, cookieParser = krever ('cookie-parser'), express = krever ('express'), økt = krever ('express-session'), mongoose = krever '), MongoStore = krever (' connect-mongo ') (økt), // ...
Etter at du har satt opp mongoose.connect Du kan konfigurere økter med express. Endre koden din til følgende; du kan spesifisere din egen hemmelig string.
"js // Koble til databasen mongoose.connect ('mongodb: // localhost: 27017 / chat'); var db = mongoose.connection;
mongoose.set ('debug', true);
db.on ('error', console.error.bind (konsoll, '# Mongo DB: tilkoblingsfeil:'));
app.use (cookieParser ()); app.use (session (secret: 'supersecretstring12345!', saveUnitialized: true, resave: true, store: new MongoStore (mongooseConnection: db))) "
Her er en viktig innstilling å merke seg lagreUnitisert: sant inne i det siste app.use. Dette sikrer at øktene blir lagret.
Vi spesifiserer hvor med butikk eiendom, som vi satt til MongoStore eksempel, angi hvilken tilkobling som skal brukes via mongooseConnection og vår db gjenstand.
For å lagre til økten må vi bruke uttrykk for forespørselhåndtering fordi vi trenger tilgang til forespørselsverdien, for eksempel:
js // Start vedvarende økt for bruker app.use (funksjon (req, res, neste) req.session.username = id; req.session.save ();
Dette vil skape req.session.username variabel med verdien som blir oppgitt av brukeren og lagre den for senere.
Deretter kan vi sjekke for denne verdien med vår klient-sidekode og logg automatisk inn brukeren når de oppdateres slik at de aldri blir logget ut av chatten, og blir automatisk logget inn som deres valgte brukernavn.
Det er også interessant å merke seg at fordi vi har databasestøttede økter, er det i tilfelle utviklerne endrer applikasjonen og tilbakestilling av back-end, vil brukerne som er logget inn på sine kunder, bli logget inn som øktbutikken er vedvarende. Dette er en flott funksjon for å holde brukerne glade og logget inn hele tiden du utvikler, eller hvis det er en frakobling fra en ustabil klient.
Nå som vi har satt opp kakediamedelen, la oss jobbe med å legge til vedvarende innlogging til vår front-end-kode.
Så langt har vi nettopp brukt standardruten fra Express til et SPA-program, og ikke definert noen rutehåndtering for Express. Som jeg nevnte før, for å få tilgang til sesjonen, trenger du Express's forespørsel / svarvariabler.
Først trenger vi en rute, slik at vi får tilgang til be om objekt Express gir og viser det for feilsøkingsformål. Inne i Express-konfigurasjonen din i /app.js, legg til følgende nær toppen av filen, etter øktoppsettet:
"js app.use (session (secret: 'supersecretstring12345!', saveUnitialized: true, resave: true, store: new MongoStore (mongooseConnection: db)))
app.get ('/', funksjon (req, res) res.sendFile (__ dirname + '/ src / index.html'); hvis (req.session.username == undefined) console.log ikke satt i økt ennå "); else console.log (" # Brukernavn fra økt: "+ req.session.username);
); "
Nå har vi noen grunnleggende logging for å se hva som skjer med vår øktverdi. For å sette det, må vi konfigurere getter og setterruter slik:
"js // Lagre brukernavnet når brukeren legger inn brukernavnskjemaet app.post ('/ brukernavn', funksjon (req, res) console.log (" # Brukernavn satt til "+ req.body.username); req .session.username = req.body.username; req.session.save (); console.log ("# Session value set" + req.session.username); res.end (););
// Tilbakestill sessionsverdien når klienten sjekker app.get ('/ brukernavn', funksjon (req, res) console.log ("# Klient brukernavn sjekk" + req.session.username); res.json (brukernavn : req.session.username)); "
Disse to rutene vil fungere som get og sett for brukernavn session var. Nå med litt grunnleggende JavaScript kan vi implementere autologin for appen vår. Åpne opp src / App.js og endre det som følger:
"js / * global EventEmitter, hendelser, io, Peer * / / ** @jsx React.DOM * /
$ (funksjon () 'bruk strenge';
// Sjekk etter økt verdi $ (dokument) .ready (funksjon () $ .ajax (url: '/ brukernavn'). Ferdig (funksjon (data) console.log ("data lastet:" + data. brukernavn); hvis (data.username) initChat ($ ('# container') [0], data.username);););
// Sett økten $ ('# connect-btn'). Klikk (funksjon () var data = JSON.stringify (brukernavn: $ ('# brukernavn-input') .val ()); $ .ajax (url: '/ brukernavn', metode: "POST", data: data, contentType: 'application / json', dataType: 'json';;);
// Initialiser chatten $ ('# connect-btn'). Klikk (funksjon () initChat ($ ('# container') [0], $ ('# brukernavn-input') .val ()); );
funksjon initChat (container, brukernavn) var proxy = new ChatServer (); React.renderComponent (
window.onbeforeunload = function () return 'Er du sikker på at du vil forlate chatten?'; ;
);"
Med $ .ajax anlegg av jQuery lager vi en forespørsel om å sjekke verdien av sesjonsvariabelen når dokument blir tilgjengelig. Hvis det er satt, initialiserer vi vår React-komponent med den lagrede verdien, noe som resulterer i en autologin-funksjon for brukerne.
Slå opp chatten igjen med npm start og ta en titt i nettleseren din for å se øktene som fungerer.
Nå har du sett hvor enkelt det er å bruke Mongoose i forbindelse med Express og sette opp Express-økter. Ta din applikasjonsutvikling videre med React som visningsregulatoren knyttet til databasebaserte elementer vil skape noen seriøse applikasjoner.
Hvis du vil gå et skritt videre med React og se på hvordan komponentene dine kan kommunisere med hverandre internt innenfor React-rammen, er denne veiledningen fra den offisielle dokumentasjonen veldig nyttig..
