Provide example front end code
This commit is contained in:
parent
2658b18797
commit
86ffcb6f3b
35
README.md
35
README.md
@ -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>
|
||||||
|
```
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user