Share
Het hebben van een "remember me" -functie is een zeer nuttige functie en de implementatie met React en Express is relatief eenvoudig. We gaan verder vanaf ons laatste deel waar we een WebRTC-chattoepassing hebben opgezet. We voegen nu doorlopende sessies met Mongo-ondersteuning toe en een onlinegebruikerslijst met databases voor een goede meting.
Als u nog niet eerder sessies hebt gebruikt, kort samengevat lijken ze op cookies, in die sessies kunt u de actieve gebruikers van uw toepassing in realtime volgen. Sessies werken eigenlijk via een sessie cookie, die wordt verzonden in de verzoek / responsheaders van uw app.
Dus cookies en sessies zijn met elkaar verweven door de natuur. Waarom hebben we dan sessies nodig als we al cookies hebben? Welke sessies u bovendien geven, is de mogelijkheid om de back-endopslag te definiëren die door het servergedeelte van uw toepassing wordt gebruikt. Dit betekent dat wanneer de informatie wordt vereist door uw app, deze kan worden opgehaald uit de database.
Dus in een realistisch voorbeeld van onze chattoepassing kunnen we nu de gebruikersnaam van de gebruiker opslaan - en als we onze app enigszins hebben geconfigureerd, moet u ook de volledige chathistorie in de database invoeren om te loggen.
In dit volgende voorbeeld gebruiken we een Mongo-database voor persistente back-endopslag. Dit is een van de vele opties die beschikbaar zijn voor sessieopslag en een andere die ik ten zeerste aanbeveel voor grootschalige productie-installaties met meerdere webservers is memcache.
Mongo is een NoSQL documentopslag-engine in plaats van een relationele gegevensopslag zoals de populaire MySQL. NoSQL is echt gemakkelijk om de kop op te steken als je afkomstig bent van MySQL of vergelijkbare databases en Mongo moet leren kennen - het zal je niet lang duren. De grootste verschillen die u moet weten, zijn de volgende:
Accentsconagua
db.collectionName.find () zou zijn SELECT * FROM-tabel.Als je nog geen Mongo hebt, installeer het dan via je pakketbeheerder. In op Linux gebaseerde distributies, bijvoorbeeld:
bash $ sudo apt-get install mongodb
Zodra we Mongo hebben geïnstalleerd, kunnen we eenvoudig Mongo-ondersteuning toevoegen aan onze chattoepassing met de mangoest module beschikbaar bij npm. Installeren mangoest met het volgende:
bash $ npm install mongoose --save
Laten we nu wat Mongo aan onze app toevoegen. Start uw code-editor op en open app.js en stel de bovenkant van je script als volgt in.
"js // Onze services configureren var PeerServer = vereisen ('peer'). PeerServer, express = vereisen ('express'), mongoose = vereisen ('mongoose'), assert = vereisen ('assert'), events = vereisen ( './src/events.js'), app = express (), port = process.en VAARTPORT || 3001;
// Maak verbinding met de database mongoose.connect ('mongodb: // localhost: 27017 / chat'); var db = mongoose.connection;
mongoose.set ('debug', true);
db.on ('error', console.error.bind (console, '# Mongo DB: connection error:')); "
Wij omvatten mangoest met require ( 'Mongoose') en gebruik dan onze databaseverbinding via mongoose.connect ( 'MongoDB: // localhost: 27017 / chatten');.
De / chatten definieert de naam van de database waarmee we verbinding maken.
Vervolgens raad ik aan om voor ontwikkelingsdoeleinden de foutopsporing in te schakelen.
js mongoose.set ('debug', true);
Als laatste voegen we een handler toe voor eventuele foutgebeurtenissen:
js db.on ('error', console.error.bind (console, '# Mongo DB: verbindingsfout:'));
Vervolgens kunt u uw cheque voor de verbinding toevoegen met de volgende code:
js db.once ('open', functie (callback) console.log ("# Mongo DB: verbonden met server");
De manier waarop mangoest wordt gebruikt is dat eens de db instantie ontvangt de Open evenement, zullen we in uitvoering gaan voor onze mongo-verbinding. Dus we zullen onze bestaande code in deze nieuwe mongo-verbinding moeten stoppen om deze te gebruiken.
Hier is een volledige codelijst met mongoose toegevoegd en rijen ingevoegd en verwijderd terwijl gebruikers online komen en offline gaan.
"js
// Onze services configureren var PeerServer = require ('peer'). PeerServer, express = require ('express'), mongoose = require ('mongoose'), assert = require ('assert'), events = require ('. /src/events.js '), app = express (), port = process.en VA.PORT || 3001;
// Zeg express om de 'src' directory app.use te gebruiken (express.static (__ dirname + '/ src'));
// Maak verbinding met de database mongoose.connect ('mongodb: // localhost: 27017 / chat'); var db = mongoose.connection;
mongoose.set ('debug', true);
db.on ('error', console.error.bind (console, '# Mongo DB: verbindingsfout:'));
db.once ('open', functie (callback)
console.log ("# Mongo DB: verbonden met server");
// Stel onze User Schema var-gebruikers inSchema = mongoose.Schema (username: String); var Gebruiker = mongoose.model ('Gebruiker', gebruikers Schema);
// Configureer de http-server en PeerJS Server var expressServer = app.listen (poort); var io = vereisen ('socket.io'). listen (expressServer); var peer = nieuwe PeerServer (poort: 9000, pad: '/ chat');
// Druk wat console-uitvoer console.log ('#### - Server draait - ####'); console.log ('# Express: Luisteren op poort', poort);
peer.on ('verbinding', functie (id) io.emit (events.CONNECT, id); console.log ('# Connected:', id);
// Store Peer in database var user = new User (username: id); user.save (function (err, user) if (err) return console.error (err); console.log ('# User' + id + 'saved to database');); );
peer.on ('disconnect', functie (id) io.emit (events.DISCONNECT, id); console.log ('# Disconnected:', id);
// Verwijder Peer uit de database User.remove (username: id, function (err) if (err) return console.error (err));
);
);"
Om dit te laten werken, laten we de chat-app opstarten. Ren gewoon npm start om er weer bovenop te komen.
Maak nu verbinding met de chat zoals normaal in de browser (standaard op http: // localhost: 3001).
Zodra u verbinding hebt gemaakt met uw chat, opent u een nieuw terminalvenster mongo-chat om de mongo cli te betreden.
bash $ mongo-chat MongoDB-shellversie: 2.0.6 verbinding maken met: chat> db.users.find () "gebruikersnaam": "CameronLovesPigs", "_id": ObjectId ("5636e9d7bd4533d610040730"), "__v": 0
Hier heb je het documentrecord opgeslagen in je mongo, en nu kun je altijd controleren hoeveel gebruikers online zijn door op de mongo-prompt te draaien db.users.count ().
bash> db.users.count () 3
Omdat we Express hebben gebruikt om onze applicatie te bouwen, is dit deel echt vrij eenvoudig en vereist het de installatie van een paar modules van NPM om ons op gang te brengen.
Pak de express-sessie en connect-mongo pakketten van npm:
bash $ npm installeren snelkoppeling connect-mongo cookie-parser - opslaan
Neem ze nu op in de top van app.js:
js var PeerServer = vereisen ('peer'). PeerServer, cookieParser = vereisen ('cookie-parser'), express = require ('express'), session = require ('express-session'), mongoose = require ('mongoose '), MongoStore = vereisen (' connect-mongo ') (sessie), // ...
Nadat je hebt ingesteld mongoose.connect u kunt sessies met express configureren. Verander uw code naar het volgende; u kunt uw eigen specificeren geheim draad.
"js // Maak verbinding met de database mongoose.connect ('mongodb: // localhost: 27017 / chat'); var db = mongoose.connection;
mongoose.set ('debug', true);
db.on ('error', console.error.bind (console, '# Mongo DB: verbindingsfout:'));
app.use (cookieParser ()); app.use (session (secret: 'supersecretstring12345!', saveUninitialized: true, resave: true, store: new MongoStore (mongooseConnection: db))) "
Hier is een cruciale instelling om op te merken de saveUninitialized: waar in de laatste app.use. Dit zorgt ervoor dat de sessies worden opgeslagen.
We specificeren waar met de op te slaan eigendom, die we instellen op de MongoStore bijvoorbeeld, met vermelding van de verbinding die moet worden gebruikt via mongooseConnection en onze db voorwerp.
Om op te slaan voor de sessie, moeten we express gebruiken voor de afhandeling van het verzoek, omdat we toegang tot de verzoekwaarde nodig hebben, bijvoorbeeld:
js // Start een permanente sessie voor gebruiker app.use (functie (req, res, next) req.session.username = id; req.session.save ();
Hiermee maakt u de req.session.username variabele met de waarde die wordt ingevoerd door de gebruiker en sla deze op voor later.
Vervolgens kunnen we deze waarde controleren met onze client-side code en de gebruiker automatisch aanmelden bij het vernieuwen, zodat ze nooit uitgelogd worden en automatisch worden ingelogd als hun gekozen gebruikersnaam.
Ook interessant om op te merken, omdat we database-back-upsessies hebben, is dat in het geval dat de ontwikkelaars de applicatie en de back-end herladen veranderen, de gebruikers die bij hun klanten zijn ingelogd ingelogd blijven omdat de sessieopslag nu persistent is. Dit is een geweldige functie om uw gebruikers tevreden te houden en aan te melden terwijl u aan het ontwikkelen bent, of als een verbinding met een onstabiele client wordt verbroken.
Nu we het gedeelte sessiecookie hebben ingesteld, laten we werken aan het toevoegen van permanente aanmeldingsgegevens aan onze front-endcode.
Tot nu toe hebben we zojuist de standaardroute van Express voor een SPA-toepassing gebruikt en geen routeverwerking gedefinieerd voor Express. Zoals ik al eerder zei, om toegang te krijgen tot de sessie, heb je de verzoek / responsvariabelen van Express nodig.
Eerst hebben we één route nodig zodat we toegang hebben tot de verzoek Object Express biedt het en geeft het weer voor foutopsporingsdoeleinden. Binnen uw Express-configuratie in /app.js, voeg het volgende toe aan de bovenkant van het bestand, na de sessie-instelling:
"js app.use (session (secret: 'supersecretstring12345!', saveUninitialized: true, resave: true, store: new MongoStore (mongooseConnection: db)))
app.get ('/', functie (req, res) res.sendFile (__ dirname + '/ src / index.html'); if (req.session.username == undefined) console.log ("# gebruikersnaam nog niet ingesteld in sessie "); else console.log (" # Gebruikersnaam van sessie: "+ req.session.username);
); "
Nu hebben we wat basisregistratie om te zien wat er met onze sessiewaarde gebeurt. Om hem in te stellen, moeten we getter- en setterroutes op de volgende manier configureren:
"js // Sla de gebruikersnaam op wanneer de gebruiker het ingestelde gebruikersnaam formulier app.post ('/ gebruikersnaam', functie (req, res) console.log (" # gebruikersnaam ingesteld op "+ req.body.username); .session.username = req.body.username; req.session.save (); console.log ("# Sessiewaarde set" + req.session.username); res.end (););
// Retourneer de sessiewaarde wanneer de client app.get controleert ('/ gebruikersnaam', functie (req, res) console.log ("# controle clientnaam" + req.session.username); res.json (gebruikersnaam : req.session.username)); "
Deze twee routes zullen functioneren als de get en set voor de gebruikersnaam sessie var. Nu met een beetje standaard JavaScript kunnen we autologin voor onze app implementeren. Doe open src / App.js en verander het als volgt:
"js / * global EventEmitter, events, io, Peer * / / ** @jsx React.DOM * /
$ (function () 'gebruik strict';
// Controleer de waarde van de sessie $ (document) .ready (function () $ .ajax (url: '/ username'). Done (function (data) console.log ("data loaded:" + data. gebruikersnaam); if (data.username) initChat ($ ('# container') [0], data.username);););
// Zet de sessie $ ('# connect-btn'). Klik (functie () var data = JSON.stringify (gebruikersnaam: $ ('# gebruikersnaam-invoer'). Val ()); $ .ajax (url: '/ gebruikersnaam', methode: "POST", data: data, contentType: 'application / json', dataType: 'json'););
// Initialiseer de chat $ ('# connect-btn'). Klik (function () initChat ($ ('# container') [0], $ ('# username-input'). Val ()); );
functie initChat (container, gebruikersnaam) var proxy = nieuwe ChatServer (); React.renderComponent (
window.onbeforeunload = function () retourneer 'Weet u zeker dat u de chat wilt verlaten?'; ;
);"
Met de $ .ajax faciliteit van jQuery maken we een verzoek om de waarde van de sessie variabele te controleren wanneer de document Wordt beschikbaar. Als dit is ingesteld, initialiseren we vervolgens onze React-component met de opgeslagen waarde, wat resulteert in een autologin-functie voor onze gebruikers.
Start de chat opnieuw op npm start en kijk in je browser om te zien hoe de sessies werken.
Nu heb je gezien hoe gemakkelijk het is om Mongoose te gebruiken in combinatie met Express en Express-sessies in te stellen. Het verder ontwikkelen van uw applicatie met React als de view controller gekoppeld aan database-gesteunde elementen zal een aantal serieuze applicaties creëren.
Als u nog een stap verder wilt gaan met React en wilt bekijken hoe uw componenten intern met elkaar kunnen communiceren binnen het React-framework, is deze handleiding uit de officiële documentatie zeer nuttig.
