Provide example front end code

This commit is contained in:
Steven Polley 2020-06-20 20:42:03 -06:00
parent 2658b18797
commit 86ffcb6f3b

View File

@ -43,8 +43,6 @@ services:
counter: counter:
image: registry.deadbeef.codes/siteviewcounter:latest image: registry.deadbeef.codes/siteviewcounter:latest
restart: always restart: always
depends_on:
- traefik
expose: expose:
- "8080" - "8080"
environment: environment:
@ -67,4 +65,35 @@ services:
- MYSQL_DATABASE=counter - MYSQL_DATABASE=counter
- TZ=America/Edmonton - TZ=America/Edmonton
``` ```
### Example front end usage
You can pretty much implement this in your front end however you want, you just need to make a GET request to whatever endpoint the counter container is running at. This is how I use it though...
```html
<html>
<head>
<script>
var counterReq = new XMLHttpRequest();
counterReq.onreadystatechange = function() {
console.log("counterReq ready state is " + this.readyState);
if (this.readyState == 4) {
console.log("counterReq status is " + this.status);
if (this.status == 200) {
document.getElementById("counter").innerHTML = this.responseText + " unique visitors"
} else { // failed to load
console.log("failed to load counter module")
}
}
}
counterReq.open("GET", "https://counter.example.com", true);
counterReq.send();
</script>
</head>
<body>
<div id="counter"></div>
</body>
</html>
```