Я пытаюсь отобразить страницу на основе информации из событий EventEmitter. Как к этому подступиться?

Я использую экспресс для отображения страницы с некоторым html, созданным на основе информации, извлеченной из eventEmitter.

По сути, код прямо сейчас выглядит примерно так:

      app.post("/login", (req, res) => {
  let factory = eventFactory(args);
  let client = factory.client();
  let html;
  client.once(client.Event.Ready, function() {
                                            html = buildHTML(someArgs);
                                            res.render("page", {html: html});
                                            })
}

Это хорошо рисует один раз. Однако я хотел бы, чтобы страница перерисовывалась при новых событиях. Я знаю, что мог бы использовать для запуска этого обратного вызова при каждом полученном событии, однако я не верю, что простое изменение этого приведет к тому, что что-либо будет передано клиенту.

Я попробовал простой тег для обновлений на стороне клиента приложения, но я получаю сообщения об ошибках когда обновится.

Поэтому я думаю, что мой дизайн, вероятно, неверен здесь. Нужны советы и/или советы о том, как подойти или спроектировать это так, чтобы клиент получал обновленную информацию о событии, полученном от обработчика событий. Единственный способ сделать это - использовать AJAX или веб-сокеты?

Спасибо

Источник

1 ответ

Веб-сокеты позволят вам отправлять новые события клиенту. С AJAX вам пришлось бы неоднократно опрашивать сервер, как с http-metaярлык. Ошибка, которую вы получаете, связана с тем, что ваш первый запрос — это POST, тогда как запросы на обновление — это запросы GET, а ваш сервер поддерживает только POST (конечно, это можно исправить).

Между прочим, если вы не возражаете против незавершенных HTML-страниц, вы можете использовать другой подход, используя тот факт, что браузеры отображают HTML-страницу, даже если ответ еще не завершен. (Браузеры сообщают о «тайм-ауте» через некоторое время, но, возможно, нет, если уже есть что отображать.)

Следующий код иллюстрирует эту идею. Каждую секунду происходит событие, которое увеличивает счетчик. Это записывается клиенту как HTML pэлемент. В этом примере они отображаются один под другим, но с помощью CSS вы можете изменить это так, чтобы они «обновляли» страницу.

      app.use(function(req, res) {
  var count = 0;
  res.write("<!DOCTYPE html><html><body>");
  setInterval(function() {
    res.write(`<p>${++count}</p>`);
  }, 1000);
});

Таким образом можно было бы реализовать «индикатор прогресса».

Источник
Другие вопросы по тегам