使用 Javascript 输出更新 Shiny UI 布局答案

【问题标题】：Update Shiny UI layout with Javascript output使用 Javascript 输出更新 Shiny UI 布局
【发布时间】：2021-08-11 12:20:26
【问题描述】：

我有一个在云上运行的 shinyApp，运行时间很长（大量计算大约需要 25 分钟）导致超时。但是，如果我在应用程序运行时继续与页面交互（例如，导航导航栏或移动滑块..），则不会发生超时。一个可能的解决方案是通过每 5 秒左右更新当前页面上的值来保持 web-socket 处于活动状态。我在这里借用了这个想法https://community.rstudio.com/t/keep-shiny-app-running-in-shiny-server-no-greying-out/27784/4。

ui <- fluidPage(
  "Am I losing connection?",
  tags$div(style = "position: absolute; top: -100px;",
    textOutput("clock")
  )
)
server <- function(input, output) {
  output$clock <- renderText({
    invalidateLater(5000)
    Sys.time()
  })
}
shinyApp(ui = ui, server = server)

但是，这也会失败，因为当应用在后台运行时，UI 值似乎不会更新或刷新，直到它完成当前任务。因此，似乎在 server.R 块中执行此操作不是解决方案。

我后来尝试通过包含可以在应用程序在后台运行时更新或刷新 UI 的 JS 代码来做不同的事情。我想出的是这个......

function time_function(){
var today1 = new Date();
var hr = today1.getHours();
var mn = today1.getMinutes();
var ss = today1.getSeconds();

if (hr.toString().length <2 ){hr = '0' + hr;} 
if (mn.toString().length <2 ){mn = '0' + mn;}
if (ss.toString().length <2 ){ss = '0' + ss;}

console.log(hr + ':' + mn + ':' + ss);

}

setInterval(time_function,5000)

... 鉴于我可以每 5 秒在闪亮的 UI 上更新 textOutput("time_display") 以保持页面处于活动状态并防止丢失与 websocket 的连接。这正是我卡住的地方，因为我无法获得 textOutput("time_display") 到更新 JS 函数 time_function() 的刷新值。

感谢您提供的所有帮助。谢谢！

【问题讨论】：

标签： javascript r shiny

【解决方案1】：

我设法找到了一种解决方法，即使在 server.R 中运行密集型工作负载时也可以保持 R/Shiny 网页处于活动状态。我想分享我的工作解决方案。

第一步是在shiny 的UI，fluidPage() 部分中创建一个div 标签或对象。我为它分配了一个“time_stamp”ID。

ui<-fluidPage(
  
titlePanel(" Testing 5 sec display of clock"),

HTML('<div id="time_stamp"></div>'), // comment: new object created. We write to it using js code.

br(),

tags$script(src = "time_print.js")
)
//server.R

server = function(input,output,session){

// do some complex tasks..

}

tags$script 位是读取 .js 文件的位置。为此，我将 time_print.js 文件保存在名为 www 的目录中，该目录与我们的 shinyApp.R 文件位于同一目录中。 .js 文件中的代码如下所示：

function js_print_time(){

var today1 = new Date();
var hr = today1.getHours();
var mn = today1.getMinutes();
var ss = today1.getSeconds();

if (hr.toString().length <2 ){hr = '0' + hr;} 
if (mn.toString().length <2 ){mn = '0' + mn;}
if (ss.toString().length <2 ){ss = '0' + ss;}

var pstamp = hr + ':' + mn + ':' + ss;  

document.getElementById("time_stamp").textContent = "";       //clear current div object contents.

document.getElementById("time_stamp").textContent += pstamp;  // Append pstamp to current value of div object, "". I thank Jesus!

}


setInterval(one_time_print,5000);

它的作用是每 5000 毫秒（5 秒）将 javascript js_print_time() 函数的输出打印到闪亮的网页（在“time_stamp”div 上），无论闪亮应用的服务器中是否正在运行繁重的任务。R .

【讨论】：