Наличие функции «запомни меня» — очень полезная функция, а реализация с помощью React и Express относительно проста. Продолжая нашу последнюю часть, где мы настраивали приложение чата WebRTC, теперь мы добавим постоянные сеансы, поддерживаемые Mongo, и онлайновый список пользователей, поддерживаемый базой данных.
Сессии?
Если вы ранее не использовали сеансы, вкратце, они очень похожи на файлы cookie, поэтому они позволяют отслеживать активных пользователей вашего приложения в режиме реального времени. Сеансы фактически работают через session cookie , который отправляется в заголовках запросов / ответов из вашего приложения.
Таким образом, куки и сеансы переплетаются по своей природе. Тогда зачем нам сеансы, если у нас уже есть куки? Кроме того, сеансы дают вам возможность определить внутреннее хранилище, используемое серверной частью вашего приложения. Это означает, что когда информация требуется вашему приложению, ее можно извлечь из базы данных.
Таким образом, в реальном примере для нашего приложения чата теперь мы можем сохранить имя пользователя пользователя и, если мы немного изменили конфигурацию нашего приложения, также добавить всю историю чата в базу данных для ведения журнала.
В следующем примере мы будем использовать базу данных Mongo для постоянного внутреннего хранилища. Это одна из нескольких опций, доступных для хранения сеансов, и другая, которую я настоятельно рекомендую для крупномасштабных производственных установок с несколькими веб-серверами, — это memcache .
Хранение документов
Mongo — это механизм хранения документов NoSQL, а не реляционное хранилище данных, такое как популярный MySQL. NoSQL действительно легко обдумать, если вы используете MySQL или аналогичные базы данных и вам нужно быстро освоиться с Mongo — это не займет у вас много времени. Самые большие различия, которые вы должны знать, следующие:
- Как следует из названия, NoSQL не использует SQL для выполнения запросов. Вместо этого данные абстрагируются с помощью вызовов методов; например,
db.collectionName.find()будетSELECT * FROM table. - Терминология другая: в MySQL у нас есть таблицы, строки и столбцы, а в Mongo — это коллекции, документы и ключи.
- Данные структурированы так же, как объект JSON.
Если у вас еще нет Mongo, установите его через менеджер пакетов. В дистрибутивах на основе Linux, например:
bash $ sudo apt-get install mongodb
После того, как мы установили Mongo, мы можем легко добавить поддержку Mongo в наше приложение чата с помощью модуля mongoose доступного с npm. Установите mongoose со следующим:
bash $ npm install mongoose --save
Теперь давайте добавим Монго в наше приложение. app.js редактор кода, откройте app.js и установите верхнюю часть вашего скрипта следующим образом.
« `js // Настройка наших служб 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;
// Подключаемся к базе данных mongoose.connect (‘mongodb: // localhost: 27017 / chat’); var db = mongoose.connection;
mongoose.set (‘debug’, true);
db.on (‘error’, console.error.bind (console, ‘# Mongo DB: ошибка соединения:’)); « `
Мы включаем mongoose с require('mongoose') и затем используем наше соединение с базой данных через mongoose.connect('mongodb://localhost:27017/chat'); ,
/chat определяет имя базы данных, к которой мы подключаемся.
Далее, в целях разработки, я рекомендую включить отладку.
js mongoose.set('debug', true);
Наконец, мы добавляем обработчик для любых ошибок:
js db.on('error', console.error.bind(console, '# Mongo DB: connection error:'));
Далее вы можете добавить свой чек на соединение с помощью следующего кода:
js db.once('open', function (callback) { console.log("# Mongo DB: Connected to server"); }
Способ, которым используется mongoose заключается в том, что как только экземпляр db получит событие open , мы приступим к выполнению нашего соединения mongo. Таким образом, нам нужно обернуть наш существующий код в это новое монго-соединение, чтобы использовать его.
Вот полный список кодов с добавлением mongoose, вставкой строк и удалением их по мере того, как пользователи приходят в онлайн и уходят в автономный режим.
« `JS
// Конфигурируем наши сервисы 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;
// Сообщаем экспрессу использовать каталог ‘src’ app.use (express.static (__dirname + ‘/ src’));
// Подключаемся к базе данных mongoose.connect (‘mongodb: // localhost: 27017 / chat’); var db = mongoose.connection;
mongoose.set (‘debug’, true);
db.on (‘error’, console.error.bind (console, ‘# Mongo DB: ошибка соединения:’));
db.once (‘open’, function (callback) {
console.log («# Mongo DB: подключено к серверу»);
// Настройка нашей пользовательской схемы var usersSchema = mongoose.Schema ({username: String}); var User = mongoose.model (‘Пользователь’, usersSchema);
// Настройка http-сервера и PeerJS-сервера var expressServer = app.listen (port); var io = require (‘socket.io’). listen (expressServer); var peer = новый PeerServer ({порт: 9000, путь: ‘/ chat’});
// Вывести на печать некоторые данные консоли console.log (‘#### — Сервер работает — ####’); console.log («# Express: прослушивание через порт», порт);
peer.on (‘connection’, function (id) {io.emit (events.CONNECT, id); console.log (‘# Connected:’, id);
// Сохраняем Peer в базе данных var user = new User ({username: id}); user.save (function (err, user) { if (err) возвращает console.error (err); console.log ('# User' + id + 'сохранено в базе данных'); });
});
peer.on (‘отключить’, функция (id) {io.emit (events.DISCONNECT, id); console.log (‘# Disconnected:’, id);
// Удалить Peer из базы данных User.remove ({username: id}, function (err) {if (err) return console.error (err)});
});
}); « `
Чтобы увидеть, как это работает, давайте запустим приложение чата. Просто запустите npm start чтобы встать.
Теперь подключитесь к чату как обычно внутри браузера (по умолчанию на http: // localhost: 3001 ).
После того, как вы подключились к чату, в новом окне терминала откройте mongo chat чтобы войти в монго кли.
bash $ mongo chat MongoDB shell version: 2.0.6 connecting to: chat > db.users.find() { "username" : "CameronLovesPigs", "_id" : ObjectId("5636e9d7bd4533d610040730"), "__v" : 0 }
Здесь у вас есть запись документа, хранящаяся внутри вашего mongo , и теперь вы всегда можете проверить, сколько пользователей в сети, запустив команду mongo db.users.count() .
bash > db.users.count() 3
Добавление сессий в наше приложение
Поскольку мы использовали Express для создания нашего приложения, эта часть действительно довольно проста, и для ее запуска требуется только установка пары модулей из npm .
Получите пакеты express-session и connect-mongo от npm:
bash $ npm install express-session connect-mongo cookie-parser --save
Теперь app.js их в начало app.js :
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), //...
После настройки mongoose.connect вы можете настраивать сеансы с помощью экспресс. Измените свой код на следующее; Вы можете указать свою собственную secret строку.
« `js // Подключение к базе данных mongoose.connect (‘mongodb: // localhost: 27017 / chat’); var db = mongoose.connection;
mongoose.set (‘debug’, true);
db.on (‘error’, console.error.bind (console, ‘# Mongo DB: ошибка соединения:’));
app.use (cookieParser ()); app.use (session ({secret: ‘supersecretstring12345!’, saveUninitialized: true, resave: true, store: new MongoStore ({mongooseConnection: db})})) « `
Здесь важно отметить параметр saveUninitialized: true внутри последнего app.use . Это обеспечит сохранение сеансов.
Мы указываем где с помощью свойства store , которое мы устанавливаем для экземпляра MongoStore , определяя, какое соединение использовать через mongooseConnection и наш объект db .
Чтобы сохранить в сеансе, нам нужно использовать экспресс для обработки запроса, потому что нам нужен доступ к значению запроса, например:
js //Start persistent session for user app.use(function(req, res, next) { req.session.username = id; req.session.save();
Это создаст переменную req.session.username со значением, req.session.username пользователем, и сохранит ее для дальнейшего использования.
Затем мы можем проверить это значение с помощью нашего клиентского кода и автоматически войти в систему, когда пользователь обновится, чтобы он никогда не выходил из чата и автоматически входил в систему под своим именем пользователя.
Также интересно отметить, что поскольку у нас есть сеансы с поддержкой базы данных, то, что в случае, если разработчики изменяют приложение и перезагружают серверную часть, пользователи, вошедшие в систему на своих клиентах, будут оставаться в системе, поскольку хранилище сеансов теперь является постоянным. Это отличная возможность, чтобы ваши пользователи были довольны и вошли в систему во время разработки или при отключении от нестабильного клиента.
Постоянный вход
Теперь, когда у нас настроена часть файла cookie сеанса, давайте поработаем над добавлением постоянного входа в наш интерфейсный код.
До сих пор мы только что использовали маршрут по умолчанию, предоставленный Express для приложения SPA, и не определили никакой обработки маршрута для Express. Как я упоминал ранее, для получения доступа к сеансу вам понадобятся переменные запроса / ответа Express.
Сначала нам нужен один маршрут, чтобы мы могли получить доступ к объекту request предоставляет Express, и отобразить его в целях отладки. Внутри вашей экспресс-конфигурации в /app.js добавьте следующее вверху файла после настройки сеанса:
« `js 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 («# Имя пользователя еще не установлен в сеансе »);} else {console.log (« # Имя пользователя из сеанса: «+ req.session.username);
}}); « `
Теперь у нас есть базовая регистрация, чтобы увидеть, что происходит с нашим значением сеанса. Чтобы установить его, нам нужно настроить маршруты получения и установки следующим образом:
« `js // Сохраняем имя пользователя, когда пользователь публикует установленную форму имени пользователя app.post (‘/ username’, function (req, res) {console.log (« # Имя пользователя установлено в «+ req.body.username)» ; req.session.username = req.body.username; req.session.save (); console.log («# Набор значений сеанса« + req.session.username); res.end ();});
// Возвращаем значение сеанса, когда клиент проверяет app.get (‘/ username’, function (req, res) {console.log («# Проверка имени пользователя клиента» + req.session.username); res.json ({username : req.session.username})}); « `
Эти два маршрута будут функционировать как get и set для имени пользователя сеанса var. Теперь с небольшим количеством базового JavaScript мы можем реализовать автологин для нашего приложения. Откройте src/App.js и измените его следующим образом:
« `js / * global EventEmitter, events, io, Peer * / / ** @jsx React.DOM * /
$ (function () {‘использовать строгий’;
// Проверка значения сеанса $ (document) .ready (function () {$ .ajax ({url: ‘/ username’}). Done (function (data) {console.log («данные загружены:« + данные. имя пользователя); if (data.username) initChat ($ (‘# container’) [0], data.username);});});
// Установить сессию $ (‘# connect-btn’). Click (function () {var data = JSON.stringify ({username: $ (‘# username-input’). Val ()}); $ .ajax ({url: ‘/ username’, метод: «POST», data: data, contentType: «application / json», dataType: «json»});});
// Инициализируем чат $ (‘# connect-btn’). Click (function () {initChat ($ (‘# container’) [0], $ (‘# username-input’). Val ());} );
function initChat (контейнер, имя пользователя) {var proxy = new ChatServer (); React.renderComponent (<ChatBox chatProxy = {proxy} username = {username}> </ ChatBox>, контейнер); }
window.onbeforeunload = function () {return ‘Вы уверены, что хотите выйти из чата?’; };
}); « `
С помощью $.ajax объекта jQuery мы создаем запрос для проверки значения переменной сеанса, когда document становится доступным. Если он установлен, мы инициализируем наш компонент React с сохраненным значением, что приводит к автоматическому включению функции для наших пользователей.
npm start чат снова с помощью npm start и загляните в свой браузер, чтобы увидеть рабочие сессии.
Выводы
Теперь вы увидели, как легко использовать Mongoose в сочетании с Express и настроить сеансы Express. Продолжая разработку приложений с React в качестве контроллера представления, связанного с элементами, поддерживаемыми базой данных, создаст несколько серьезных приложений.
Если вы хотите пойти дальше с React и посмотреть, как ваши компоненты могут взаимодействовать друг с другом внутри платформы React, это руководство из официальной документации очень полезно.