draw-wip

views/draw.html

@@ -0,0 +1,93 @@
+{{block "draw" .}}
+<canvas
+  id="drawCanvas"
+  width="500"
+  height="500"
+  style="border: 1px solid black"
+></canvas>
+<canvas
+  id="receiveCanvas"
+  width="500"
+  height="500"
+  style="border: 1px solid black"
+></canvas>
+
+<script>
+  const canvas = document.getElementById("drawCanvas");
+  const ctx = canvas.getContext("2d");
+  ctx.lineWidth = 2;
+  ctx.lineCap = "round";
+
+  let drawing = false;
+  let lineId = 0;
+
+  const drawSocketUrl =
+    (window.location.protocol.startsWith("https") ? "wss://" : "ws://") +
+    window.location.host +
+    "/draw/ws";
+
+  let drawSocket = new WebSocket(drawSocketUrl);
+
+  drawSocket.onerror = (e) => {
+    console.log("error", e);
+  };
+  drawSocket.onclose = (e) => {
+    console.log("closed", e);
+  };
+
+  setTimeout(() => {
+    drawSocket.send("ping");
+  }, 200);
+
+  const sendMessage = (id, x, y) => {
+    if (drawSocket.readyState !== drawSocket.OPEN) {
+      drawSocket = new WebSocket(drawSocketUrl);
+    }
+
+    drawSocket.send(id + "," + x + "," + y);
+  };
+
+  canvas.addEventListener("mousedown", () => {
+    ctx.beginPath();
+    lineId++;
+    drawing = true;
+  });
+  canvas.addEventListener("mouseup", () => {
+    drawing = false;
+    ctx.closePath();
+  });
+  canvas.addEventListener("mousemove", (e) => {
+    if (!drawing) return;
+    ctx.lineTo(e.offsetX, e.offsetY);
+    sendMessage(lineId, e.offsetX, e.offsetY);
+    ctx.stroke();
+  });
+
+  const receiveCanvas = document.getElementById("receiveCanvas");
+  const recCtx = receiveCanvas.getContext("2d");
+  recCtx.lineWidth = 2;
+  recCtx.lineCap = "round";
+
+  let receiveLineId = 0;
+
+  drawSocket.addEventListener("message", function (event) {
+    const parts = event.data.split(",");
+    if (parts[0] != receiveLineId) {
+      recCtx.closePath();
+      recCtx.beginPath();
+      receiveLineId = parts[0];
+      recCtx.moveTo(parts[1], parts[2]);
+    } else {
+      recCtx.lineTo(parts[1], parts[2]);
+      recCtx.stroke();
+    }
+  });
+
+  setInterval(() => {
+    if (drawSocket.readyState !== drawSocket.OPEN) {
+      drawSocket = new WebSocket(drawSocketUrl);
+    }
+    drawSocket.send("ping");
+  }, 10000);
+</script>
+{{end}}