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

Persistencia de datos y sesiones con 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

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

file

Tener una función de "recordarme" es una característica muy útil, y la implementación con React y Express es relativamente fácil. Continuando desde nuestra última parte donde creamos una aplicación de chat WebRTC, ahora vamos a añadir Mongo-backed sesiones persistentes y una base de datos respaldada lista de usuarios en línea para una buena medida.

¿Sesiones?

Si no has utilizado las sesiones antes, en resumen son bastante similares a las cookies, en que las sesiones le permiten realizar un seguimiento de los usuarios activos de su aplicación en tiempo real. Las sesiones realmente funcionan a través de una session cookie, que se envía en los encabezados de solicitud / respuesta de su aplicación.

Así que las cookies y las sesiones están entrelazadas por la naturaleza. Entonces, ¿por qué necesitamos sesiones si ya tenemos cookies? Lo que las sesiones le dan además es la capacidad de definir el almacenamiento back-end utilizado por la parte del servidor de su aplicación. Esto significa que cada vez que la información es requerida por su aplicación, se puede recuperar de la base de datos.

Así que en un ejemplo de la vida real para nuestra aplicación de chat, ahora podemos almacenar el nombre de usuario del usuario—y si reconfiguramos algo nuestra aplicación, también insertamos todo el historial de chat en la base de datos para el registro.

En este próximo ejemplo usaremos una base de datos Mongo para el almacenamiento persistente de fondo. Esta es una de las varias opciones disponibles para el almacenamiento de sesión, y otra que recomiendo para las configuraciones de producción a gran escala con múltiples servidores web es memcache.

Almacenamiento de documentos

Mongo es un motor de almacenamiento de documentos NoSQL en lugar de un almacén de datos relacional, como el popular MySQL. NoSQL es realmente fácil de conseguir su cabeza alrededor si usted viene de MySQL o de bases de datos similares y necesita ponerse al día con Mongo—no le tomará mucho. Las diferencias más grandes que usted debe saber son las siguientes:

  • Como dice el nombre, NoSQL no utiliza SQL para realizar consultas. En su lugar, los datos se abstraen con llamadas de método; Por ejemplo db.collectionName.find() Sería una SELECT * FROM table
  • La terminología es diferente: en MySQL tenemos Tablas, Filas y Columnas, y en Mongo son Colecciones, Documentos y Claves.
  • Los datos están estructurados, igual que un objeto JSON.

Si todavía no tiene Mongo, instálelo a través de su gestor de paquetes. En distribuciones basadas en Linux, por ejemplo:

Una vez que tengamos instalado Mongodb, podemos añadir fácilmente soporte Mongo a nuestra aplicación de chat con el módulo mongoose disponible desde npm. Instale mongoose con lo siguiente:

Ahora vamos a añadir un poco de Mongo a nuestra aplicación. Encienda su editor de código y abra app.js y configure la parte superior de su secuencia de comandos como sigue.

Incluimos mongoose con require('mongoose') y luego utilizamos nuestra conexión a la base de datos a través de mongoose.connect('mongodb://localhost:27017/chat');.

El /chat define el nombre de la base de datos a la que nos estamos conectando.

A continuación, para propósitos de desarrollo, recomiendo que configuremos la depuración.

Finalmente agregamos un manejador para cualquier evento de error:

A continuación, puede agregar su chequeo de conexión con el código siguiente:

La forma en que se usa mongoose es que una vez que la instancia db recibe el evento open, entraremos en ejecución para nuestra conexión mongo. Así que tendremos que envolver nuestro código existente en esta nueva conexión mongo con el fin de utilizarlo.

Aquí está un listado de código completo con mongoose añadido e insertando filas y suprimiéndolos cuando los usuarios se conectan y se desconectan.

Para ver esto funcionando, vamos a encender la aplicación de chat. Simplemente ejecute npm start para empezar

Ahora conéctese al chat normalmente dentro del navegador (por defecto en http://localhost:3001).

Una vez que te hayas conectado a tu chat, en una nueva ventana de terminal abra mongo chat para ingresar al mongo cli.

Aquí tienes el registro de documentos almacenado dentro de tu mongo, y ahora siempre puedes comprobar cuántos usuarios están en línea ejecutándose en el mongo prompt db.users.count().

Cómo agregar sesiones a nuestra aplicación

Debido a que hemos utilizado Express para construir nuestra aplicación, esta parte es realmente bastante simple y sólo requiere la instalación de un par de módulos de npm para marchar.

Obtenga los paquetes express-session y connect-mongo desde npm:

Ahora incluya en la parte superior de app.js:

Después de configurar mongoose.connect, puede configurar sesiones con express. Cambie su código a lo siguiente; Puede especificar su propia cadena secret.

Aquí un punto crucial a destacar es el saveUninitialized: true dentro de la última app.use. Esto asegurará que las sesiones sean guardadas.

Especificamos dónde con la propiedad store, que establecemos en la instancia MongoStore, especificando qué conexión usar a través de mongooseConnection y nuestro objeto db.

Para almacenar en la sesión, necesitamos usar express para el manejo de la solicitud porque necesitamos acceso al valor de la solicitud, por ejemplo:

Esto creará la variable req.session.username con el valor introducido por el usuario y lo guardará para más tarde.

A continuación, podemos comprobar este valor con nuestro código del cliente y registrar automáticamente el usuario cuando se actualizan para que nunca se desconecten del chat y se registren automáticamente como su nombre de usuario elegido.

También es interesante observar, porque tenemos sesiones respaldadas por la base de datos, es que en caso de que los desarrolladores cambien la aplicación y la recarga de back-end, los usuarios conectados a sus clientes permanecerán conectados como el almacén de sesión es ahora persistente. Esta es una gran característica para mantener a sus usuarios contentos y conectados durante todo el tiempo que se está desarrollando, o si hay una desconexión de un cliente inestable.

Ingreso persistente

Ahora que tenemos la parte de cookie de sesión configurada, vamos a trabajar en la adición de ingreso persistente a nuestro código de front-end.

Hasta ahora hemos utilizado la ruta predeterminada proporcionada por Express para una aplicación de SPA y no hemos definido ninguna ruta de manejo para Express. Como mencioné antes, para tener acceso a la sesión necesitará las variables de petición / respuesta de Express.

Primero necesitamos una ruta para poder acceder al objeto request que Express proporciona y mostrarlo para propósitos de depuración. Dentro de su configuración Express en /app.js, agregue lo siguiente cerca de la parte superior del archivo, después de la sesión de configuración:

Ahora tenemos un registro básico para ver qué está pasando con nuestro valor de sesión. Para configurarlo, necesitamos configurar las rutas getter y setter de la siguiente manera:

Estas dos rutas funcionarán como get y set para la sesión de username var. Ahora, con un poco de JavaScript básico, podemos implementar el inicio de sesión automático para nuestra aplicación. Abra src/App.js y cámbielo de la siguiente manera:

Con la facilidad $.ajax de jQuery creamos una solicitud para comprobar el valor de la variable de sesión cuando el document está disponible. Si se establece, a continuación, inicializar nuestro componente React con el valor almacenado, lo que resulta en una característica de autologin para nuestros usuarios.

Encender el chat de nuevo con npm start y echar un vistazo en su navegador para ver las sesiones de trabajo.

Conclusiones

Ahora ha visto lo fácil que es utilizar Mongoose en conjunto con Express y configurar sesiones Express. Tomando su desarrollo de aplicaciones más con React como el controlador de vista vinculado a los elementos respaldados por la base de datos creará algunas aplicaciones serias.

Si desea dar un paso más con React y ver cómo sus componentes pueden comunicarse internamente dentro del marco React, esta guía de la documentación oficial es muy útil.

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.