1

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.

Improve this question
9
  • You're supposed to change the HTML on the page based on data. For instance like this: if (data.lanup) document.getElementById("lanstate").style.color = "green"; The exact code depends on the format of the server's reply, and how you're displaying the state of each interface. Commented Nov 27, 2018 at 1:14
  • Hi, I understand about finding something in the DOM and changing it - once I can extract the data. Not sure what form the data will come back to me in? But firstly, how to make that call to ajax please? Do I put that code in the javascript function called from the button's onclick event? Commented Nov 27, 2018 at 2:10
  • Yes, exactly. Ideally, the GO server sends back JSON. Something like { "lanup": true, "wifiup": true, "threegup": true }. As for $.ajax, that's jQuery. It also has a simpler way: $.getJSON, but you can also use the native fetch(), that way you don't have to include jQuery in your project. Commented Nov 27, 2018 at 2:18
  • you can simply use Ajax to do the same with ease. Commented Nov 27, 2018 at 4:37
  • Why not run all tests at the same time, then you only wait 3 seconds, instead of 10-15. Commented Nov 27, 2018 at 6:37

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Hi, OK, can I ask why the url is a json file? I'd need to have my Go function fill in that json file right? But how does that happen? I also don't really understand how to make that ajax call. Is it in the javascript function called by the button's onclick event?
Actually I just re-read your answer, I understand a bit more. With the lanStatus function, can I just pop that $.ajax bit into it somewhere?
You need to have your goserver serve an http api. Javascript (ajax) is going to communicate with that http api.
reddit.com/r/golang/comments/2tmllh/… good bones to get you started

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.