создать панель мониторинга в реальном времени с помощью скрипта Google Apps

Question

Я хочу иметь возможность постоянно обновлять мое веб-приложение (в режиме реального времени), чтобы в любое время на моем Листе Google было обновление (через веб-крючок, настроенный с помощью функции doGet скрипта приложения), то же самое показано в HTMLПанель инструментов, которую я построил.

Мне не нужна помощь в настройке моего листа, или веб-крюка, или панели инструментов HTML - у меня все это уже настроено.

Мне нужнопомогите / посоветуйте, как я могу обновить свою панель инструментов HTML (веб-приложение) в любое время, когда происходит обновление либо моей функции doGet, либо листа (эта часть на самом деле не имеет значения).

Лучшим примером может служить изменение информационной панели Google Analytics в режиме реального времени, каждый раз, когда на вашем сайте появляется новый пользователь.

PS. Я знаю, что должен поделиться некоторым кодом, но все, что у меня есть, не имеет ничего общего с тем, что я на самом деле хочу;надеюсь, это понятно, но если кому-то из вас понадобится увидеть мой код / ​​лист, я буду рад создать фиктивную версию.

Answer 1

Вам нужно будет использовать:

• google.script.run.withSuccessHandler, который является JavaScript, асинхронным, Клиентский API , который позволяет вам взаимодействовать с функциями на стороне сервера (ссылкиможно найти здесь ).
• setInterval функция для вызова вышеупомянутого клиентского API на частоте, которую вы считаете подходящей
  • 3000/3500 миллисекунд - вот что яДо сих пор мы использовали сервисные квоты , конкретно не говорим о его ограничениях

На стороне сервера

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

на стороне клиента

Это код, который запускается из вашего файла *. html изагрузка в вашем веб-браузере. Здесь вы можете использовать «асинхронный» API

Пример

В моей фиктивной настройке , я -

1. Извлечениеслучайные цитаты из thesimpsonsquoteapi
2. Отображение таймера, который меняется каждую секунду

Code.gs (код на стороне сервера)

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('Index').setTitle('Realtime Data');
}

function randomQuotes() {
  var baseURL = 'https://thesimpsonsquoteapi.glitch.me/quotes';
  var quotesData = UrlFetchApp.fetch(baseURL, { muteHttpExceptions: true });
  var quote;
  var imageURL;
  if (quotesData.getResponseCode() == 200 || quotesData.getResponseCode() == 201) {
    var response = quotesData.getContentText();
    var data = JSON.parse(response)[0];
    quote = data["quote"];
    imageURL = data["image"];
  } else {
    quote = 'Random Quote Generator is broken!';
    imageURL = 'https://cdn.shopify.com/s/files/1/1061/1924/products/Sad_Face_Emoji_large.png?v=1480481055';
  }
  var randomQuote = {
    "quote": quote,
    "imageTag": '<img class="responsive-img" src="' + imageURL + '">'
  }
  return randomQuote;
}

function getTime() {
  var now = new Date();
  return now;
}

Index.html (код на стороне клиента)

Я только выделяю соответствующие аспекты кода

Следующие выборочные кавычки выбираются каждые 10 секунд (10000 мс)

<script>
    function onSuccess1(quotedata) {
        var quoteactual = document.getElementById('quote');
        quoteactual.innerhtml = quotedata.quote;
        var quoteimg = document.getElementById('quoteImage');
        quoteimg.innerhtml = quotedata.imagetag;
    }

    setInterval(function() {
        console.log("getting quote...")
        google.script.run.withSuccessHandler(onsuccess1).randomQuotes();
    }, 10000);
</script>

Эта выборка производится раз в 1 секунду (1000 мс)

<script>
    function onSuccess2(now) {
        var div = document.getElementById('time');
        var today = new Date();
        var time = today.getHours() + " : " + today.getMinutes() + " : " + today.getSeconds();
        div.innerhtml = time;
    }

    setInterval(function() {
        console.log("getting time...")
        google.script.run.withSuccessHandler(onsuccess2).getTime();
    }, 1000);
</script>

Вы можете получить доступ ко всему сценарию в моем репозитории github или сделатькопия из оригинального сценария .

Вывод

Предполагается, что изображение здесь меняется каждые 10 секунд и таймер, каждые 1 с

Журнал консоли браузера можно посмотреть здесь -

Я написал эту статью пару недельназад, что outlИнес большинство аспектов того, что все до сих пор отвечали / комментировали, но я надеюсь, что мое объяснение здесь также поможет.

Answer 2

Я согласен с ответом @Cooper, @Dimu Designs и @ carlesgg97. Но я также предлагаю альтернативное решение через Сайты Google и / или Google Sheets.

Не знаю, хотите ли вы передать свою панель инструментов HTML на сайты (она поддерживает вставку HTML), но если вы это сделаете, вы можете вставлять графики непосредственно из Google Sheets (или создавать там графики), дажев виде таблиц, и они будут автоматически обновляться (но не вставлять их). [https://developers.google.com/chart/interactive/docs]

При желании вы можете создать графики в Google Sheets, а затем опубликовать их [https://support.google.com/docs/answer/1047436?co=GENIE.Platform%3DDesktop&hl=en],, которые предоставят вам ссылку, которую вы используете в HTML.

Answer 3

Чтобы обеспечить производительность панели мониторинга в режиме реального времени, вам нужно будет использовать уведомления Web Push, как заявляет пользователь @Dimu Designs, или поддерживать соединение с открытым веб-сокетом между клиентом и вашим веб-приложением. Тем не менее, я боюсь, что в настоящее время ни одно из этих решений не поддерживается.

Единственное, что останется, это использовать опрос: HTML-код, предоставленный клиенту, будет иметь встроенный код Javascript, которыйнастроит функцию, подобную cron, которая будет отправлять запрос в ваше веб-приложение каждые X секунд (см. setInterval ) и обновлять содержимое вашей панели мониторинга.

Имейте в виду, что это решение будет включать отправку многихHTTP-запросы к вашему веб-приложению, которые будут иметь следующие недостатки:

1. Увеличенное потребление полосы пропускания.
2. Панель мониторинга не в реальном времени, которая будет работать с задержкой до X секунд. определяется как частота обновления.
3. При отправке большого количества запросов за короткий промежуток времени могут возникнуть ограничения по скорости. Для получения дополнительной информации об этом вы можете проверить квоты здесь .