client/server interaction with shiny - part 3 (separate JS file)

mycode.js

// Execute function body when the HTML document is ready
$(document).ready(function() {
  
    // javascript code to send data to shiny server
    document.getElementById("mydiv").onclick = function() {
        var number = Math.random();
        Shiny.onInputChange("mydata", number);
    };
  
  // handler to receive data from server
    Shiny.addCustomMessageHandler("myCallbackHandler",     
        function(color) {
          document.getElementById("mydiv").style.backgroundColor = color;
        }
    );

});

server.R

library(shiny)

shinyServer( function(input, output, session) {
  
  output$results <- renderPrint({
    input$mydata
  })
  
  # observer if value of the data sent from the client changes
  # if yes generate a new random color and send it back to 
  # the client callback handler
  observe({
    input$mydata
    color <- rgb(runif(1),runif(1),runif(1))  
    session$sendCustomMessage(type='myCallbackHandler', color) 
  })
})

ui.R

library(shiny)

shinyUI( bootstrapPage( 
  
  # include the js code
  includeScript("mycode.js"),
  
  # a div named mydiv
  tags$div(id="mydiv", 
           style="width: 50px; height :50px; left: 100px; top: 100px;
           background-color: gray; position: absolute"),
  
  # an element for unformatted text
  verbatimTextOutput("results")
))