From 25caaedcddf23314543e6d116bc2fa153473d420 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vojt=C4=9Bch=20K=C3=A1n=C4=9B?= Date: Fri, 21 Jun 2019 20:39:58 +0200 Subject: [PATCH] Implement controller and viewer communication using WebSockets --- controller/controller.js | 21 +++++++++++- main.go | 69 ++++++++++++++++++++++++++++++++++++++++ main.js | 10 +++++- 3 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 main.go diff --git a/controller/controller.js b/controller/controller.js index fb48f28..fb1839d 100644 --- a/controller/controller.js +++ b/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(); @@ -47,4 +49,21 @@ document.addEventListener("touchmove", (e) => { slingshot.style.width = distance({x: cursorX, y: cursorY}, {x: window.innerWidth/2, y: window.innerHeight/2}) + "px"; 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)"; -}); \ No newline at end of file +}); + +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) + }); +} diff --git a/main.go b/main.go new file mode 100644 index 0000000..3fd8fe0 --- /dev/null +++ b/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)) +} diff --git a/main.js b/main.js index c5bd0ef..28a56e7 100644 --- a/main.js +++ b/main.js @@ -129,4 +129,12 @@ document.addEventListener("DOMContentLoaded", () => { document.addEventListener("mousemove", (e) => { cursorX = e.pageX; cursorY = window.innerHeight - e.pageY; -}); \ No newline at end of file +}); + +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); + }); +});