我希望能够不断地(实时)更新我的网络应用程序,这样,只要我的Google表格上有更新(通过使用应用程序脚本的doGet
函数配置的webhook),我的HTML仪表板中就会显示相同的内容已经建成。
我不需要设置工作表,webhook或HTML仪表板的帮助-我已经设置了所有这些设置。
我确实需要帮助/建议,无论何时我的doGet
函数或工作表上有更新(该部分都无关紧要)时,如何更新HTML仪表板(Web应用程序)。
最好的例子是每次有新用户登陆您的网站时Google Analytics(分析)实时仪表板的更改方式。
PS。我知道我应该共享一些代码,但是我所拥有的一切都与我的实际需求无关。希望这很清楚,但是如果您需要任何人查看我的代码/表,我很乐意创建一个虚拟版本。
最佳答案
您需要使用:google.script.run.withSuccessHandler
是JavaScript异步Client-side API,可让您与服务器端功能进行交互(可以在here中找到引用)。setInterval
函数以您认为合适的频率调用上述客户端API
到目前为止,我一直使用3000/3500毫秒,而service quotas并没有特别谈论其局限性
服务器端
这几乎是在脚本的code.gs部分中编写的代码。所有功能都驻留在其中的位置,这些功能可能与电子表格交互或充当Webhook
客户端
那是从您的* .html文件运行的代码,并在加载后在您的Web浏览器上运行。这是您使用“异步” API的地方
例
在我的dummy setup中,我-
从thesimpsonsquoteapi获取随机报价
显示一个每秒变化的计时器
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 ms)获取一次随机报价
<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 ms)提取一次时间
<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>
您可以在my github repository或make a copy from the original script上访问整个脚本。
输出量
这里的图像应该每10秒更改一次,计时器每1秒更改一次
可以在此处查看浏览器控制台日志-
几周前,我写了this article,概述了到目前为止每个人都在回答/评论的大部分内容,但是我希望我的解释也能有所帮助。
关于google-apps-script - 使用Google Apps脚本构建实时仪表板,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58270885/