Больше
Разработка приложений на JavaScript в реальном времени

11min
В современном быстром цифровом мире пользователи ожидают мгновенных обновлений и бесшовных взаимодействий. Приложения в реальном времени стали нормой, от чатов до живых уведомлений. Но как построить эти сложные системы, не углубляясь в детали инфраструктуры? Входите в Back4App. Давайте погрузимся в то, как вы можете использовать мощные функции Back4App для создания отзывчивых приложений в реальном времени с легкостью.
Понимание требований к приложениям в реальном времени
Прежде чем мы перейдем к коду, давайте разберем, что делает приложение «реальным временем»:
Мгновенные обновления данных
Низкая задержка
Масштабируемость для обработки нескольких одновременных подключений
Синхронизация данных между клиентами
Back4App предоставляет инструменты для решения всех этих требований, значительно упрощая процесс разработки.
Настройка Back4App для данных в реальном времени
Прежде всего, давайте настроим наш проект Back4App:
Зарегистрируйтесь или войдите в свою учетную запись Back4App
Создайте новое приложение из панели управления
Запишите свой идентификатор приложения и ключ JavaScript
Теперь давайте инициализируем наш проект:
mkdir real-time-app
cd real-time-app
npm init -y
npm install parse
Создайте файл index.js и добавьте следующее:
const Parse = require('parse/node');

Parse.initialize("YOUR_APP_ID", "YOUR_JS_KEY");
Parse.serverURL = 'https://parseapi.back4app.com/';
Замените YOUR_APP_ID и YOUR_JS_KEY на ваши реальные учетные данные.
Использование реальной базы данных Back4App
Реальная база данных Back4App построена на основе Parse Server, предлагая мощное решение для обновления данных в реальном времени. Давайте посмотрим, как это использовать:
const query = new Parse.Query('Message');
query.subscribe().then((subscription) => {
  console.log('Подписка создана!');

  subscription.on('create', (object) => {
    console.log('Создано новое сообщение:', object.get('text'));
  });

  subscription.on('update', (object) => {
    console.log('Сообщение обновлено:', object.get('text'));
  });

  subscription.on('delete', (object) => {
    console.log('Сообщение удалено:', object.id);
  });
});
Этот код настраивает подписку на класс ‘Message’. Каждый раз, когда сообщение создается, обновляется или удаляется, ваше приложение получит уведомление в реальном времени.
Интеграция WebSockets для обновлений в реальном времени
Хотя реальная база данных охватывает многие случаи использования, иногда вам нужна еще более быстрая связь. Вот где приходят на помощь WebSockets. Back4App поддерживает соединения WebSocket через Live Queries Parse. Вот как это настроить:
const Parse = require('parse/node');
const ParseLiveQueryClient = require('parse-server').ParseLiveQueryClient;

Parse.initialize("YOUR_APP_ID", "YOUR_JS_KEY");
Parse.serverURL = 'https://parseapi.back4app.com/';

const client = new Parse.LiveQueryClient({
  applicationId: 'YOUR_APP_ID',
  serverURL: 'wss://YOUR_APP_SUBDOMAIN.back4app.io',
  javascriptKey: 'YOUR_JS_KEY'
});

client.open();

const query = new Parse.Query('Message');
const subscription = client.subscribe(query);

subscription.on('create', (object) => {
  console.log('Создано новое сообщение:', object.get('text'));
});
Эта настройка позволяет еще быстрее обновлять данные в реальном времени с использованием соединений WebSocket.
Пример: Создание приложения для чата в реальном времени
Давайте объединим все и создадим простое приложение для чата в реальном времени:
const Parse = require('parse/node');
const readline = require('readline');

Parse.initialize("YOUR_APP_ID", "YOUR_JS_KEY");
Parse.serverURL = 'https://parseapi.back4app.com/';

const Message = Parse.Object.extend("Message");
const query = new Parse.Query(Message);

query.subscribe().then((subscription) => {
  console.log('Чат комната присоединена!');

  subscription.on('create', (message) => {
    console.log(`${message.get('username')}: ${message.get('text')}`);
  });
});

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

function sendMessage(username) {
  rl.question('', (text) => {
    const message = new Message();
    message.set("username", username);
    message.set("text", text);
    message.save().then(() => {
      sendMessage(username);
    });
  });
}

rl.question('Введите ваше имя пользователя: ', (username) => {
  console.log('Введите ваши сообщения:');
  sendMessage(username);
});
Это простое приложение для чата демонстрирует обмен сообщениями в реальном времени с использованием базы данных в реальном времени Back4App.
Обработка синхронизации данных в реальном времени
При создании приложений в реальном времени синхронизация данных имеет решающее значение. Back4App обрабатывает большую часть этого за вас, но вот несколько лучших практик:
Используйте транзакции для операций, которые должны быть атомарными
Реализуйте оптимистичные обновления пользовательского интерфейса для более отзывчивого ощущения
Обрабатывайте конфликты, объединяя состояния сервера и клиента
Вот пример оптимистичного обновления пользовательского интерфейса:
function sendMessage(text) {
  // Оптимистично добавляем сообщение в интерфейс
  displayMessage({ text, status: 'sending' });

  const message = new Parse.Object('Message');
  message.set('text', text);

  message.save().then(
    (savedMessage) => {
      // Обновляем интерфейс, чтобы показать, что сообщение было успешно отправлено
      updateMessageStatus(savedMessage.id, 'sent');
    },
    (error) => {
      // Обрабатываем ошибку, возможно, повторить попытку или проинформировать пользователя
      updateMessageStatus(message.id, 'failed');
    }
  );
}
Тестирование и развертывание приложений в реальном времени
Тестирование приложений в реальном времени может быть сложным. Вот несколько стратегий:
Используйте среду разработки Back4App для тестирования
Симулируйте несколько клиентов для тестирования конкурентности
Тестируйте крайние случаи, такие как отключения сети
Для развертывания Back4App упрощает процесс:
Убедитесь, что ваше приложение работает в среде разработки Back4App
Настройте параметры вашего приложения в панели управления Back4App
Используйте хостинг Back4App или разверните свой фронтенд у вашего предпочтительного провайдера хостинга
Заключение
Создание приложений в реальном времени не должно быть головной болью. С помощью базы данных в реальном времени Back4App и поддержки WebSocket вы можете легко создавать отзывчивые и масштабируемые приложения. От чатов до живых панелей управления, возможности безграничны.
Готовы создать свое приложение в реальном времени? Перейдите на Back4App и начните кодировать! Помните, что ключ к освоению разработки в реальном времени — это практика и эксперименты. Удачного кодирования!
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Как оптимизировать асинхронные операции в Flutter с помощью Future.wait и Back4app
Как использовать изоляты в Flutter с Back4app для обработки объемных данных