function init() {
  const body = document.querySelector("body");
  const socket = new WebSocket("ws://localhost:8080/connect");

  function createElement(m) {
    var e = document.createElement(m.tag);
    e.style.position = "absolute";
    e.style.left = m.x - 10;
    e.style.top = m.y - 10;
    e.style.border = "10px solid black";
    e.style.width = 0;
    e.style.height = 0;
    e.style.borderRadius = "10px";
    body.appendChild(e);
    console.log("drew shape " + m.tag + " " + m.x + " " + m.y);
  }

  socket.addEventListener("open", function (event) {
    console.log("socket open");
    socket.addEventListener("message", function drawFromServer(event) {
      try {
        console.log(event);
        var msg = JSON.parse(event.data);
        console.log("received");
        console.log(msg);
        createElement(msg);
      } catch (e) {
        console.log(event);
      }
    });
    body.addEventListener("click", function bodyLis(event) {
      var item = { tag: "div", x: event.clientX, y: event.clientY };
      var str = JSON.stringify(item);
      console.log("send " + str);
      socket.send(str);
      createElement(item);
    });
  });
}

document.addEventListener("DOMContentLoaded", init);