Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Persistenza dei Dati e Sessioni in React

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Getting Starting with React.
Getting Started With React
Using JSX and React

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

file

Avere a disposizione una funzione "remember me" è davvero molto utile, e l'implementazione con React e Express è relativamente facile. Continuando dall'ultima parte dove abbiamo impostato un'applicazione chat WebRTC, aggiungeremo ora sessioni persistenti con Mongo e un database di un elenco online di utenti.

Sessioni?

Se non avete mai usato sessioni finora, in breve sono molto simili ai cookies, nel senso che le sessioni vi consentono di tracciare gli utenti attivi dell'applicazione in tempo reale. Le sessioni lavorano attraverso un session cookie che viene inoltrato nell'header  request / response dall'applicazione.

Così cookies e sessioni sono intrecciate per natura. Quindi perché necessitiamo delle sessioni se abbiamo già i cookies? Ciò che vi danno in aggiunta le sessioni è l'abilità di definire il back-end usato dalla vostra applicazione. Significa che ogni volta che l'informazione viene richiesta dalla vostra applicazione può essere richiamata dal database.

Così in un esempio di vita reale per la nostra chat, ora possiamo memorizzare l'username dell'utente — e se abbiamo riconfigurato un po' l'applicazione, possiamo anche inserire l'intera cronologia della chat nel database per la registrazione.

In questo prossimo esempio useremo un database Mongo per l'archiviazione persistente lato back-end. Questa è una delle diverse opzioni per l'archiviazione della sessione, e memcache è un'altra che raccomandiamo altamente per la configurazione in produzione in larga scala .

Archiviazione dei documenti

Mongo è un motore di archiviazione di documenti NoSQL piuttosto che un archivio di dati relazionale come il popolare MySQL. È davvero facile prendere confidenza con NoSQL se provenite da MySQL o databases simili e avete bisogno di avvicinarvi velocemente a Mongo — non vi ci vorrà molto. Le differenze più importanti che dovreste conoscere sono le seguenti:

  • Come suggerisce il nome, NoSQL non utilizza SQL per eseguire queries. Invece i dati vengono estratti con chiamate al metodo; ad esempio db.collectionName.find() sarebbe SELECT * FROM table.
  • La terminologia è differente: in MySQL abbiamo Tabelle, Righe e Colonne, mentre in Mongo sono presenti Collezioni, Documenti e Chiavi.
  • I dati sono strutturati nello stesso modo in cui è strutturato un oggetto JSON.

Se non avete ancora Mongo, installatelo attraverso il vostro package manager. Nelle distribuzioni Linux per esempio:

Una volta installato Mongo possiamo semplicemente aggiungere il supporto di Mongo alla nostra applicazione con il modulo mongoose disponibile attraverso npm. Installate mongoose nel modo seguente:

Aggiungiamo ora Mongo alla nostra applicazione. Aprite il vostro editor, aprite app.js e impostate la parte alta del vostro script nel modo seguente.

Includiamo mongoose con require('mongoose') e utilizziamo quindi la nostra connessione al database attraverso mongoose.connect('mongodb://localhost:27017/chat');

/chat definisce il nome del database a cui ci stiamo connettendo.

Poi, a fini di sviluppo, raccomandiamo di impostare il debugging su on.

Infine aggiungiamo un handler per gli eventi d'errore:

Quindi potete aggiungere il controllo per la connessione con il codice seguente:

mongoose viene usato in modo che una volta che l'istanza db riceve l'evento open, inizieremo l'esecuzione della nostra connessione mongo. Avremo così bisogno di inserire il nostro codice esistente in questa nuova connessione mongo in modo da utilizzarla.

Ecco un elenco di codice intero con l'aggiunta di mongoose e l'inserimento di righe e loro cancellazione quando gli utenti sono online e offline.

Per vederlo funzionante avviamo l'applicazione chat. Eseguiamo npm start.

Ora connettiamoci alla chat nel browser come di consueto (default http://localhost:3001).

Una volta connessi alla chat in una nuova finestra di terminale eseguite mongo chat per aprire la cli di mongo.

Qui avete il registro dei documenti archiviati in mongo, e ora potete sempre controllare quanti utenti sono online eseguendo nel prompt mongo db.users.count().

Aggiungere Sessioni all'Applicazione

Dal momento che abbiamo usato Express per sviluppare l'applicazione, questa parte sarà davvero molto facile e richiederà l'installazione di un paio di moduli da npm per permetterci di proseguire.

Prendete i pacchetti express-session e connect-mongo da npm:

Ora includeteli all'inizio di app.js:

Dopo che avete impostato mongoose.connect potete configurare le sessioni con express. Cambiate il vostro codice nel modo seguente; potete specificare la vostra stringa secret.

Qui un'impostazione cruciale da notare è saveUninitialized: true dentro l'ultimo app.use. Assicurerà che le sessioni vengano salvate.

Specifichiamo dove grazie alla proprietà store, che impostiamo nell'istanza MongoStore indicando quale connessione usare attraverso mongooseConnection e il nostro oggetto db.

Per archiviare la sessione abbiamo bisogno di usare express per la gestione della richiesta perché abbiamo bisogno di accedere al valore della richiesta, ad esempio:

Ciò creerà la variabile req.session.username con il valore inserito dall'utente e lo salveremo per utilizzo successivo.

Poi potremo cercare questo valore con il codice lato client ed effettuare il log in automatico dell'utente quando aggiorna, cosicché non venga mai escluso dalla chat ed esegua automaticamente il login con l'username scelto. 

Interessante anche notare che, dal momento che abbiamo delle sessioni supportate da database, nel caso che gli sviluppatori cambino l'applicazione e il back-end venga ricaricato, gli utenti che hanno già effettuato il login rimarranno loggati essendo ora la sessione d'archiviazione persistente. Questa è una grande funzionalità per tenere i vostri utenti contenti e loggati mentre state sviluppando, o se è presente una disconnessione da un client non stabile.

Login persistente

Ora che abbiamo la sessione cookie impostata, lavoriamo sull'aggiungere il login persistente al nostro codice front-end.

Finora abbiamo solo usato il route di default fornito da Express per un'applicazione SPA, e non abbiamo definito alcuna gestione routing per Express. Come menzionato prima, per avere accesso alla sessione avrete bisogno delle variabili di richiesta / risposta di Express.

Prima di tutto abbiamo bisogno di una route in modo da accedere all'oggetto request fornito da Express e visualizzarlo per il debug. All'interno del file di configurazione Express /app.js, aggiungete le righe seguenti all'inizio del file, dopo il setup della sessione:

Ora abbiamo qualche registrazione di base per vedere cosa sta succedendo con il nostro valore di sessione. Per impostarlo, abbiamo bisogno di configurare le routes get e set nel modo seguente:

Queste due routes funzioneranno come il get e il set per la variabile di sessione username. Ora con un po' di semplice JavaScript possiamo implementare l'autologin per la nostra applicazione. Aprite src/App.js e modificatelo nel modo seguente:

Con il servizio $.ajax di jQuery creiamo una richiesta per controllare il valore della variabile di sessione quando document diventa disponibile. Se è impostato inizializziamo quindi il nostro componente React con il valore archiviato, risultante in una funzionalità autologin per gli utenti.

Avviate nuovamente la chat con npm start e guardate nel browser le sessioni funzionanti.

Conclusioni

Ora avete visto quanto è facile usare Mongoose insieme a Express e impostare le sessioni Express. Approfondendo ulteriormente lo sviluppo dell'applicazione, con React come view controller collegato agli elementi del database creerete applicazioni interessanti.

Se volete procedere ulteriormente con React e guardare come i componenti possono comunicare tra l'uno e l'altro internamente attraverso il framework, questa guida dalla documentazione ufficiale vi risulterà molto utile.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.