Data Persistence and Sessions With React

Having a “remember me” function is a very useful feature, and implementation with React and Express is relatively easy. Continuing from our last part where we set up a WebRTC chat application, we will now add Mongo-backed persistent sessions and a database-backed online user list for good measure.

Sessions?

If you have not used sessions before, in brief they are pretty similar to cookies, in that sessions enable you to track the active users of your application in real time. Sessions actually work via a session cookie, which is sent in the request / response headers from your app.

So cookies and sessions are intertwined by nature. Then why do we need sessions if we already have cookies? What sessions give you in addition is the ability to define the back-end storage used by the server part of your application. This means that whenever the information is required by your app, it can be retrieved from the database.

So in a real-life example for our chat application, we can now store the username of the user—and if we reconfigured our app somewhat, also insert the entire chat history into the database for logging.

In this next example we will use a Mongo database for persistent back-end storage. This is one of several options available for session storage, and another I highly recommend for larger-scale production setups with multiple web servers is memcache.

Document Storage

Mongo is a NoSQL document storage engine rather than a relational data store such as the popular MySQL. NoSQL is really easy to get your head around if you are coming from MySQL or similar databases and need to get up to speed with Mongo—it won’t take you long. The biggest differences you should know are the following:

• As the name says, NoSQL doesn’t use SQL to perform queries. Instead the data is abstracted with method calls; for example db.collectionName.find() would be a SELECT * FROM table.
• Terminology is different: in MySQL we have Tables, Rows and Columns, and in Mongo it’s Collections, Documents and Keys.
• Data is structured, the same as a JSON object.

If you do not have Mongo yet, please install it via your package manager. In Linux-based distributions, for example:

1. $ sudo apt-get install mongodb

Once we have Mongo installed, we can easily add Mongo support to our chat application with the mongoose module available from npm. Install mongoose with the following:

1. $ npm install mongoose --save

Now let’s add some Mongo to our app. Fire up your code editor, and open app.js and set the top of your script to be as follows.

1. //Configure our Services
2. var PeerServer = require('peer').PeerServer,
3.     express = require('express'),
4.     mongoose = require('mongoose'),
5.     assert = require('assert'),
6.     events = require('./src/events.js'),
7.     app = express(),
8.     port = process.env.PORT || 3001;
9.  
10. //Connect to the database
11. mongoose.connect('mongodb://localhost:27017/chat');
12. var db = mongoose.connection;
13.  
14. mongoose.set('debug', true);
15.  
16. db.on('error', console.error.bind(console, '# Mongo DB: connection error:'));

We include mongoose with require('mongoose') and then utilise our database connection via mongoose.connect('mongodb://localhost:27017/chat');.

The /chat defines the name of the database we are connecting to.

Next, for development purposes, I recommend we set the debugging to on.

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

Finally we add a handler for any error events:

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

Next you can add your check for the connection with the following code:

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

The way that mongoose is used is that once the db instance receives the open event, we will enter into execution for our mongo connection. So we will need to wrap our existing code into this new mongo connection in order to utilise it.

Here is a full code listing with mongoose added and inserting rows and deleting them as users come online and go offline.

1. //Configure our Services
2. var PeerServer = require('peer').PeerServer,
3.     express = require('express'),
4.     mongoose = require('mongoose'),
5.     assert = require('assert'),
6.     events = require('./src/events.js'),
7.     app = express(),
8.     port = process.env.PORT || 3001;
9.  
10. //Tell express to use the 'src' directory
11. app.use(express.static(__dirname + '/src'));
12.  
13. //Connect to the database
14. mongoose.connect('mongodb://localhost:27017/chat');
15. var db = mongoose.connection;
16.  
17. mongoose.set('debug', true);
18.  
19. db.on('error', console.error.bind(console, '# Mongo DB: connection error:'));
20.  
21. db.once('open', function (callback) {
22.  
23.   console.log("# Mongo DB:  Connected to server");
24.  
25.   //Setup our User Schema
26.   var usersSchema = mongoose.Schema({username: String});
27.   var User = mongoose.model('User', usersSchema);
28.  
29.   //Configure the http server and PeerJS Server
30.   var expressServer = app.listen(port);
31.   var io = require('socket.io').listen(expressServer);
32.   var peer = new PeerServer({ port: 9000, path: '/chat' });
33.  
34.   //Print some console output
35.   console.log('#### -- Server Running -- ####');
36.   console.log('# Express:   Listening on port', port);
37.  
38.   peer.on('connection', function (id) {
39.     io.emit(events.CONNECT, id);
40.     console.log('# Connected: ', id);
41.  
42.     //Store Peer in database
43.     var user = new User({ username: id });
44.     user.save(function (err, user) {
45.       if (err) return console.error(err);
46.       console.log('# User '+ id + ' saved to database');
47.     });
48.  
49.   });
50.  
51.   peer.on('disconnect', function (id) {
52.     io.emit(events.DISCONNECT, id);
53.     console.log('# Disconnected: ', id);
54.  
55.     //Remove Peer from database
56.     User.remove({username: id}, function(err){ if(err) return console.error(err)});
57.  
58.   });
59.  
60. });

To see this working, let’s fire up the chat application. Just run npm start to get ‘er up.

Now connect to the chat as normal inside the browser (default at http://localhost:3001).

Once you have connected to your chat, in a new terminal window open mongo chat to enter the mongo cli.

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

Here you have the document record stored inside your mongo, and now you can always check how many users are online by running at the mongo prompt db.users.count().

1. > db.users.count()
2. 3

Adding Sessions to Our App

Because we used Express to build our application, this part is really pretty simple and just requires the installation of a couple modules from npm to get us going.

Get the express-session and connect-mongo packages from npm:

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

Now include them in the top of app.js:

1. var PeerServer = require('peer').PeerServer,
2.     cookieParser = require('cookie-parser'),
3.     express = require('express'),
4.     session = require('express-session'),
5.     mongoose = require('mongoose'),
6.     MongoStore = require('connect-mongo')(session),
7.     //...

After you set up mongoose.connect you can configure sessions with express. Change your code to the following; you can specify your own secret string.

1. //Connect to the database
2. mongoose.connect('mongodb://localhost:27017/chat');
3. var db = mongoose.connection;
4.  
5. mongoose.set('debug', true);
6.  
7. db.on('error', console.error.bind(console, '# Mongo DB: connection error:'));
8.  
9. app.use(cookieParser());
10. app.use(session({
11.   secret: 'supersecretstring12345!',
12.   saveUninitialized: true,
13.   resave: true,
14.   store: new MongoStore({ mongooseConnection: db })
15. }))

Here a crucial setting to note is the saveUninitialized: true inside the last app.use. This will ensure the sessions are saved.

We specify where with the store property, which we set to the MongoStore instance, specifying which connection to use via mongooseConnection and our db object.

To store to the session, we need to use express for the request handling because we need access to the request value, for example:

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

This will create the req.session.username variable with the value being entered by the user and save it for later.

Next, we can check for this value with our client-side code and automatically log the user in when they refresh so that they never get signed out of the chat and are automatically logged in as their chosen username.

Also interesting to note, because we have database-backed sessions, is that in the event of the developers changing the application and the back-end reloading, the users logged in to their clients will stay logged in as the session store is now persistent. This is a great feature to keep your users happy and logged in all the while you are developing, or if there’s a disconnection from an unstable client.

Persistent Login

Now that we have the session cookie part set up, let’s work on adding persistent login to our front-end code.

So far we have just used the default route provided by Express for an SPA application, and not defined any route handling for Express. As I mentioned before, to get access to the session you will need Express’s request / response variables.

First we need one route so we can access the request object Express provides and display it for debugging purposes. Inside your Express configuration in /app.js, add the following near the top of the file, after the session setup:

1. app.use(session({
2.   secret: 'supersecretstring12345!',
3.   saveUninitialized: true,
4.   resave: true,
5.   store: new MongoStore({ mongooseConnection: db })
6. }))
7.  
8. app.get('/', function (req, res) {
9.   res.sendFile(__dirname +'/src/index.html');
10.   if(req.session.username == undefined){
11.     console.log("# Username not set in session yet");
12.   } else {
13.     console.log("# Username from session: "+ req.session.username);
14.  
15.   }
16. });

Now we have some basic logging to see what is happening with our session value. In order to set it, we need to configure getter and setter routes like so:

1. //Save the username when the user posts the set username form
2. app.post('/username', function(req, res){
3.   console.log("# Username set to "+ req.body.username);
4.   req.session.username = req.body.username;
5.   req.session.save();
6.   console.log("# Session value set "+ req.session.username);
7.   res.end();
8. });
9.  
10. //Return the session value when the client checks
11. app.get('/username', function(req,res){
12.   console.log("# Client Username check "+ req.session.username);
13.   res.json({username: req.session.username})
14. });

These two routes will function as the get and set for the username session var. Now with a bit of basic JavaScript we can implement autologin for our app. Open up src/App.js and change it as follows:

1. /* global EventEmitter, events, io, Peer */
2. /** @jsx React.DOM */
3.  
4. $(function () {
5.   'use strict';
6.  
7.   // Check for session value
8.   $(document).ready(function(){
9.     $.ajax({
10.           url: '/username'
11.     }).done(function (data) {
12.       console.log("data loaded: " + data.username);
13.       if(data.username)
14.         initChat($('#container')[0], data.username);
15.     });
16.   });
17.  
18.   // Set the session
19.   $('#connect-btn').click(function(){
20.     var data = JSON.stringify({username: $('#username-input').val()});
21.     $.ajax({ url: '/username',
22.               method: "POST",
23.               data: data,
24.               contentType: 'application/json',
25.               dataType: 'json'
26.             });
27.   });
28.  
29.   // Initialize the chat
30.   $('#connect-btn').click(function () {
31.     initChat($('#container')[0],
32.       $('#username-input').val());
33.   });
34.  
35.   function initChat(container, username) {
36.     var proxy = new ChatServer();
37.     React.renderComponent(<ChatBox chatProxy={proxy}
38.       username={username}></ChatBox>, container);
39.   }
40.  
41.   window.onbeforeunload = function () {
42.     return 'Are you sure you want to leave the chat?';
43.   };
44.  
45. });

With the $.ajax facility of jQuery we create a request to check the value of the session variable when the document becomes available. If it is set, we then initialise our React component with the stored value, resulting in an autologin feature for our users.

Fire up the chat again with npm start and have a look in your browser to see the sessions working.

Conclusions

Now you have seen how easy it is to use Mongoose in conjunction with Express and set up Express sessions. Taking your application development further with React as the view controller linked to database-backed elements will create some serious applications.
Written by Tom Whitbread

If you found this post interesting, follow and support us.
Suggest for you:

Modern React with Redux

Advanced React and Redux

Build Apps with React Native

React for Visual Learners

The Complete Web Development Tutorial Using React and Redux