Persistenza dei Dati e Sessioni in React

() translation by (you can also view the original English article)

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:

1	$ sudo apt-get install mongodb

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:

1	$ npm install mongoose --save

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

//Configure our Services
var PeerServer = require('peer').PeerServer,
    express = require('express'),
    mongoose = require('mongoose'),
    assert = require('assert'),
    events = require('./src/events.js'),
    app = express(),
    port = process.env.PORT || 3001;

//Connect to the 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:'));

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.

1	mongoose.set('debug', true);

Infine aggiungiamo un handler per gli eventi d'errore:

1	db.on('error', console.error.bind(console, '# Mongo DB: connection error:'));

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

1	db.once('open', function (callback) {
2	console.log("# Mongo DB: Connected to server");
3	}

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.


//Configure our Services
var PeerServer = require('peer').PeerServer,
    express = require('express'),
    mongoose = require('mongoose'),
    assert = require('assert'),
    events = require('./src/events.js'),
    app = express(),
    port = process.env.PORT || 3001;

//Tell express to use the 'src' directory
app.use(express.static(__dirname + '/src'));

//Connect to the 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:'));

db.once('open', function (callback) {

  console.log("# Mongo DB:  Connected to server");

  //Setup our User Schema
  var usersSchema = mongoose.Schema({username: String});
  var User = mongoose.model('User', usersSchema);

  //Configure the http server and PeerJS Server
  var expressServer = app.listen(port);
  var io = require('socket.io').listen(expressServer);
  var peer = new PeerServer({ port: 9000, path: '/chat' });

  //Print some console output
  console.log('#### -- Server Running -- ####');
  console.log('# Express:   Listening on port', port);

  peer.on('connection', function (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', function (id) {
    io.emit(events.DISCONNECT, id);
    console.log('# Disconnected: ', id);

    //Remove Peer from database
    User.remove({username: id}, function(err){ if(err) return console.error(err)});

  });

});

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.

$ mongo chat
MongoDB shell version: 2.0.6
connecting to: chat
> db.users.find()
{ "username" : "CameronLovesPigs", "_id" : ObjectId("5636e9d7bd4533d610040730"), "__v" : 0 }

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().

1	> db.users.count()
2	3

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:

1	$ npm install express-session connect-mongo cookie-parser --save

Ora includeteli all'inizio di app.js:

var PeerServer = require('peer').PeerServer,
    cookieParser = require('cookie-parser'),
    express = require('express'),
    session = require('express-session'),
    mongoose = require('mongoose'),
    MongoStore = require('connect-mongo')(session),
    //...

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.

//Connect to the 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:'));

app.use(cookieParser());
app.use(session({
  secret: 'supersecretstring12345!',
  saveUninitialized: true,
  resave: true,
  store: new MongoStore({ mongooseConnection: db })
}))

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:

1	//Start persistent session for user
2	app.use(function(req, res, next) {
3	req.session.username = id;
4	req.session.save();

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:

app.use(session({
  secret: 'supersecretstring12345!',
  saveUninitialized: true,
  resave: true,
  store: new MongoStore({ mongooseConnection: db })
}))

app.get('/', function (req, res) {
  res.sendFile(__dirname +'/src/index.html');
  if(req.session.username == undefined){
    console.log("# Username not set in session yet");
  } else {
    console.log("# Username from session: "+ req.session.username);

  }
});

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:

//Save the username when the user posts the set username form
app.post('/username', function(req, res){
  console.log("# Username set to "+ req.body.username);
  req.session.username = req.body.username;
  req.session.save();
  console.log("# Session value set "+ req.session.username);
  res.end();
});

//Return the session value when the client checks
app.get('/username', function(req,res){
  console.log("# Client Username check "+ req.session.username);
  res.json({username: req.session.username})
});

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:

/* global EventEmitter, events, io, Peer */
/** @jsx React.DOM */

$(function () {
  'use strict';

  // Check for session value
  $(document).ready(function(){
    $.ajax({
          url: '/username'
    }).done(function (data) {
      console.log("data loaded: " + data.username);
      if(data.username)
        initChat($('#container')[0], data.username);
    });
  });

  // Set the session
  $('#connect-btn').click(function(){
    var data = JSON.stringify({username: $('#username-input').val()});
    $.ajax({ url: '/username',
              method: "POST",
              data: data,
              contentType: 'application/json',
              dataType: 'json'
            });
  });

  // Initialize the chat
  $('#connect-btn').click(function () {
    initChat($('#container')[0],
      $('#username-input').val());
  });

  function initChat(container, username) {
    var proxy = new ChatServer();
    React.renderComponent(<ChatBox chatProxy={proxy}
      username={username}></ChatBox>, container);
  }

  window.onbeforeunload = function () {
    return 'Are you sure you want to leave the chat?';
  };

});

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.