There is quite a lot of code in this section doing quite a lot of different things, so we'll step through each chunk in turn:

<script type="text/javascript"> 
  // Shiny function to receive messages 
  Shiny.addCustomMessageHandler("sendMessage", 
    function(message) { 
      // call this before modifying the DOM 
      Shiny.unbindAll(); 

The first part carries out two functions; Shiny.addCustomMessageHandler("sendMessage", function(message){...}) registers the message-handler with Shiny. The "sendMessage" name was defined in the server.R function in the session$sendCustomMessage(type = 'sendMessage', message = theNumber) call. This is the first step in receiving and processing messages from the server.

The second part begins the process of reading and writing to the DOM. Whenever you are going to modify the DOM in JavaScript, you should call Shiny.unbindAll() first and then Shiny.bindAll() at the end; we will come across the latter function later in this section:

      /* delete the dropdown if it already 
      exists which it will the second 
      time this function is called */ 
 
      // get the dropdown and assign to element 
      var element = document.getElementById('mySelect'); 
 
      // if it already exists delete it 
      if (element !== null) { 
        element.parentNode.removeChild(element); 
      } 

In this section, we check to see whether the dropdown has already been drawn (which it will be the second time this function is called), and if it has, we delete it in order to redraw it with the new number of options:

      // Create empty array to store the options 
      var theNumbers = []; 
 
      // add ascending numbers up to the 
      // value of the message 
      for (var i = 1; i <= message; i++) { 
        theNumbers.push(i); 
      } 
 
      // grab the div ready to write to it 
      var theDiv = document.getElementById("output"); 

Now, we create an array and fill it with the numbers from 1 to the value of message, which is the random number that the server picked and passed to this function:

      // create a new dropdown 
      var selectList = document.createElement("select"); 
 
      // give it a name and write it to the div 
      selectList.setAttribute("id", "mySelect"); 
      theDiv.appendChild(selectList); 
 
      // add the options 
      for (var n = 0; n < theNumbers.length; n++) { 
        var option = document.createElement("option"); 
        option.setAttribute("value", theNumbers[n]); 
        option.text = theNumbers[n]; 
        selectList.appendChild(option); 
      } 

Next, we create the drop-down list and add the options to it using the array of numbers created immediately before:

      // add an onchange function to call shinyRules 
      // every time this input changes 
      selectList.onchange = shinyRules; 
 
      // add class to style nicely in Bootstrap 
      selectList.className += "form-control"; 
 
      // call this when you've finished modifying the DOM 
      Shiny.bindAll(); 
    } 
  ); 

Finally, we add on onchange property to the dropdown so that it will call the shinyRules() function every time it is changed, add the form-control class to render the dropdown nicely in Bootstrap, and call the Shiny.bindAll() function necessary when we have finished writing the DOM:

  shinyRules = function(){ 
    // define text array and pick random element 
    var textArray = ['JavaScript Rules!', 'Shiny Rules!']; 
    var randomNumber = Math.floor(Math.random()*textArray.length); 
 
    // whenever this input changes send a message to the server 
   Shiny.onInputChange("JsMessage", textArray[randomNumber]); 
  } 
</script> 

This last piece of code defines the shinyRules() function, which, as in the preceding code, will be called each time the dropdown is changed. It sets up a text array, picks a random element from it, and then uses the Shiny.onInputChange (...) function to send this element to the server. As you can see, the function takes two arguments in this case: "JsMessage" and textArray[randomNumber].

The first of these arguments gives the message a name, so it can be picked up by the server.R file. This is the part of the server.R file that we saw before that reads input$JsMessage, so the input is accessed using the standard Shiny notation of input$xxx that we are used to seeing. If you go back to look at the server.R file, you can see a call to renderText() that returns input$JsMessage, ready to be written straight to the output panel of the interface.