Provide example front end code

2020-06-20 20:42:03 -06:00 · 2020-06-20 20:42:03 -06:00 · 86ffcb6f3b
commit 86ffcb6f3b
parent 2658b18797
1 changed files with 32 additions and 3 deletions
--- a/README.md
+++ b/README.md
@ -43,8 +43,6 @@ services:
  counter:
    image: registry.deadbeef.codes/siteviewcounter:latest
    restart: always
-    depends_on:
-      - traefik
    expose:
      - "8080"
    environment:
@ -68,3 +66,34 @@ services:
      - 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>
+```
+