Implement controller and viewer communication using WebSockets

controller/controller.js

@@ -10,10 +10,12 @@ document.onmouseup = function(e) {
     if (e.button === 0) {
         mouseDown = false;
         document.getElementById("slingshot").classList.add("ungrabbed");
+        sendNudge(-Math.floor(e.pageX - window.innerWidth / 2), Math.floor(e.pageY - window.innerHeight / 2));
     }
 };
 document.ontouchend = function(e) {
     document.getElementById("slingshot").classList.add("ungrabbed");
+    sendNudge(-Math.floor(e.touches[0].clientX - window.innerWidth / 2), Math.floor(e.touches[0].clientY - (window.innerHeight / 2)));
 };
 document.ontouchstart = function(e) {
     e.preventDefault();
@@ -48,3 +50,20 @@ document.addEventListener("touchmove", (e) => {
     const angle = cursorX >= window.innerWidth/2 ? -Math.atan((window.innerHeight/2 - cursorY)/(window.innerWidth/2 - cursorX)) : (-Math.atan((window.innerHeight/2 - cursorY)/(window.innerWidth/2 - cursorX)) - Math.PI);
     slingshot.style.transform = "rotate(" + angle + "rad)";
 });
+
+function sendNudge(x, y) {
+    fetch("http://localhost:8080", {
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        referrer: "no-referrer",
+        body: JSON.stringify([x, y])
+    })
+        .then((response) => {
+            if (![200, 201, 204].includes(response.status)) {
+                throw new Error("Nudge request failed with http status: " + response.status)
+            }
+        })
+        .catch((e) => {
+            console.log("Failed to send nudge request " + e)
+        });
+}

main.go

@@ -0,0 +1,69 @@
+package main
+
+import (
+	"encoding/json"
+	"github.com/gorilla/websocket"
+	"log"
+	"net/http"
+)
+
+var upgrader = websocket.Upgrader{
+	WriteBufferSize: 4096,
+	ReadBufferSize:  0,
+	CheckOrigin: func(r *http.Request) bool {
+		return true
+	},
+}
+
+func main() {
+	var nudges = make(chan [2]int)
+
+	go func() {
+		mux := http.NewServeMux()
+		mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+			w.Header().Add("Access-Control-Allow-Origin", "*")
+			w.Header().Add("Access-Control-Allow-Headers", "*")
+			w.Header().Add("Access-Control-Allow-Methods", "*")
+			switch r.Method {
+			case "OPTIONS":
+				w.WriteHeader(http.StatusNoContent)
+				return
+			case "POST":
+				var nudge [2]int
+				switch r.Header.Get("Content-Type") {
+				case "application/json":
+					var decoder = json.NewDecoder(r.Body)
+					if err := decoder.Decode(&nudge); err != nil {
+						log.Println(err)
+						w.WriteHeader(http.StatusBadRequest)
+						return
+					}
+				default:
+					w.WriteHeader(http.StatusBadRequest)
+					return
+				}
+				nudges <- nudge
+				w.WriteHeader(http.StatusNoContent)
+			default:
+				w.WriteHeader(http.StatusMethodNotAllowed)
+			}
+		})
+		log.Println(http.ListenAndServe(":8080", mux))
+	}()
+
+	mux := http.NewServeMux()
+	mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		con, err := upgrader.Upgrade(w, r, nil)
+		if err != nil {
+			log.Println(err)
+		}
+		for n := range nudges {
+			log.Println(n)
+			err := con.WriteJSON(n)
+			if err != nil {
+				log.Println(err)
+			}
+		}
+	})
+	log.Println(http.ListenAndServe("127.0.0.1:8081", mux))
+}

main.js

@@ -130,3 +130,11 @@ document.addEventListener("mousemove", (e) => {
     cursorX = e.pageX;
     cursorY = window.innerHeight - e.pageY;
 });
+
+document.addEventListener("DOMContentLoaded", () => {
+    let webSocket = new WebSocket("ws://localhost:8081");
+    webSocket.addEventListener("message", (e) => {
+        let nudgeReq = JSON.parse(e.data);
+        n.nudge(nudgeReq[0] / 10, nudgeReq[1] / 10);
+    });
+});