From 4ee7e48d7736c1ad3c91b81724c8eae59e0ebc5b Mon Sep 17 00:00:00 2001
From: TriMill <trimil016@gmail.com>
Date: Thu, 30 Jun 2022 23:47:46 -0400
Subject: [PATCH] updated number

---
 flaskr/templates/projects/number/index.html | 30 ++++++++++++---------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/flaskr/templates/projects/number/index.html b/flaskr/templates/projects/number/index.html
index e63285a..b7cddcf 100644
--- a/flaskr/templates/projects/number/index.html
+++ b/flaskr/templates/projects/number/index.html
@@ -2,24 +2,27 @@
 {% extends "/_base.html"%}
 {% block head%}
 <script>
+    const url = "wss://api.trimill.xyz/number";
+    let ws = undefined;
+
     window.onload = () => {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", "https://api.trimill.xyz/number");
-        xhr.send();
-        xhr.onload = () => {
-            document.getElementById("number").innerHTML = xhr.responseText;
-        }
-        xhr.onerror = () => {
-            document.getElementById("number").innerHTML = "Error loading number."
+        try {
+            ws = new WebSocket(url);
+            ws.addEventListener("message", msg => {
+                document.getElementById("error").textContent = "";
+                document.getElementById("number").textContent = msg.data;
+                console.log(msg);
+            });
+        } catch(e) {
+            document.getElementById("error").textContent = "Error connecting to server: " + e.toString();
         }
     }
 
     function makegoup() {
-        var xhr = new XMLHttpRequest();
-        xhr.open("POST", "https://api.trimill.xyz/number");
-        xhr.send();
-        xhr.onload = () => {
-            document.getElementById("number").innerHTML = xhr.responseText;
+        try {
+            ws.send("inc");
+        } catch(e) {
+            document.getElementById("error").textContent = "Error connecting to server: " + e.toString();
         }
     }
 </script>
@@ -29,4 +32,5 @@
 <div>
     <input type="button" value="Make go up" id="button" onclick="makegoup();" />
 </div>
+<div class="error" id="error"></div>
 {% endblock %}