从HTML调用Golang

Question

I'm helping with an open source project. It's a small Go webserver running on a device containing a Raspberry Pi. I want to be able to have a user click a button on an html screen, which calls a routine in Go, which returns 2 values, a boolean and a string.

What we are wanting to do is see which network interfaces are up on the raspberry pi e.g. is the lan connection up?

To do this I really need to ping a site from each interface. This takes a few seconds for each of 3 interfaces: Lan, WiFi, and 3G.

I can do this when the page is requested and fill in an html template as the page loads, but it means waiting maybe 10 to 15 secs for the page to load, so it seems like something is broken.

So I want to be able to list each of the 3 interfaces on the page and have the user click 'test' which then calls a routine in the underlying Go webserver.

I then need to be able to display the results from the call in a couple of text areas for each interface.

What I have tried:

I have tried registering a Go function (in this case IsLANConnectionUp) using funcmap from the net/html package and calling it from the html template from a JavaScript function, like this:

  <button onclick = "getLANStatus()" class="btn btn-primary">Test</button>
 
  <script>
    function getLANStatus() {
        var status = document.getElementById('status');
        {{ if IsLANConnectionUp }}
          status.innerHTML = "Lan is up!"
        {{ else }}
          status.innerHTML = "Lan is down!"
        {{ end }}
    }
  </script>

But having the template code inside the javascript code doesn't seem to work. Also, I'd like the text output from the ping command (which my Go function getLANStatus and I don't know how to extract that data from the function call. The documentation says only one value can be returned.

Searching on StackOverflow I see this: calling Golang functions from within javascript code

$.ajax({
  url: "http://www.example.com/signup",
  data: {username: "whatever"} //If the request needs any data 
}).done(function (data) {
  // Do whatever with returned data
});

But it says things like "// Do whatever with the returned data" I'm new to web programming and so don't know how to use that code. If this is the way to go, could someone please expand on this a little?

Any help would be much appreciated.

</div>

Answer 1

So couple different concepts here.

Render: On the initial request to your html that generates the Test button. Your go server will render that html 1 time and return it to your browser. It does not re-request dynamically unless you wire some stuff up to make the web page change.

Client: So when someone clicks your button, the function getLANStatus will be ran. You will want that function to do a few things

1. Through ajax, communicate with your go server through an api that will return the status of your connections as a json object. Something like

   { "3g": "up", "lan": "down", "wifi": "up" }

2. Second, in the done part of your ajax, you will manipulate something in the DOM in order to convey that the status of the interfaces is what it is. You could do that by finding the element, then changing the text to what is returned by the object.

As a simple first step, you can alert the payload in the function that would look like this

$.ajax({
  url: "http://YOUR_GO_SERVER_IP_OR_DNS:PORT/interfaces_status.json"
}).done(function (data) {
  alert(data);
  console.log(data);
  debugger;
});

Then if you request that with the console open in chrome, you will be able to directly play with the returned data so that you know what all it reponds to.