Обновление данных в реальном времени в веб-приложении MERN
Я подал заявку на роль веб-разработчика MERN Stack в стартап-компанию, и мне нужно было выполнить задачу за 2 дня. Задача заключалась в обновлении данных веб-сайта в режиме реального времени из базы данных. Во-первых, я сделал обходной путь, чтобы регулярно обновлять свой реагирующий компонент, чтобы axios мог вызывать серверный API для обновления данных. Это самый неэффективный способ обновления данных. В конце концов я решил использовать socket.io для создания соединения в реальном времени.
Читая блоги, я обнаружил, что если я слежу за ними, мне нужно полностью изменить серверную часть веб-приложения. Все блоги использовали сокет только для создания соединения с серверной частью, но я уже использовал экспресс для создания соединения. Я просмотрел разные блоги, а затем решил просмотреть документацию, чтобы узнать, как работает сокет. Я обнаружил, что могу использовать экспресс для создания порта и передать путь к серверу функции сокета для подключения моего сокетного соединения к экспрессу.
Вот код бэкэнда для сокета: -
var data = require (‘./ fetch.js’);
const server = app.listen (порт, функция () {
console.log (‘работает на локальном хосте:‘ + порт);
});
const io = require (‘socket.io’) (server);
io.on ('connection', (client) = ›{
client.on ('getData', (interval) =› {
console.log ('клиент подписывается на таймер с interval ', interval);
setInterval (() = ›{
MongoClient.connect (' MONGO_URI ', function (err, db) {
if (err) {
throw err;
client.emit ('data', err);
} else {
data.getData (db, (err, result) = ›{
if (err) {
client.emit ('данные', ошибка);
} else {
ans = result;
client.emit ('data', ans);
}
});
}
db.close ();
});
}, интервал);
});
});
Сокет подключается к mongo, чтобы получить данные из коллекции и передать их клиенту. В приведенном выше коде fetch.js - это API, написанный для получения данных для формирования любой коллекции Mongo. Код для fetch.js выглядит следующим образом: -
module.exports = {
getData: function (db, cb) {
попробовать {
vardatabase = db.db (‘balon_parkplatz’);
varcollection = database.collection (‘hyderabad’);
collection.find (). toArray (функция (ошибка, результаты) {
если (ошибка) {
метатель;
} еще {
cb (результаты);
}
});
}
catch (ошибка) {
cb (ошибка);
}
}
}
Следующим шагом было заставить клиент выдавать getData, который будет перехвачен внутренним сокетом. Чтобы отреагировать, я использовал socket.io-client, чтобы передать "getData" бэкэнду. Код для сокета в сочетании с реакцией приведен ниже: -
импортировать openSocket из socket.io-client;
const socket = openSocket (‘ http: // localhost: 8000 ‘);
function getStatus (cb) {
socket.on ('data', Parking_status = ›cb (null, Parking_status));
socket.emit ('getData', 2000);
}
экспортировать getStatus по умолчанию;
Приведенный выше код отправляет «getData» клиенту и получает «данные», которые отправляются с сервера для создания соединения в реальном времени между серверной частью и внешним интерфейсом.
