!7

cm ScribbleDemo > DynPrintLog {
  !include #1029545 // API for Eleu

  transient Set<virtual WebSocket> webSockets = syncWeakHashSet();

  O html(virtual Request request) {
    S uri = cast get(request, 'uri);
    SS params = cast get(request, 'params);

    if (eq(uri, "/script")) 
      ret subBot_serveJavaScript(linesLL(
        "document.body.innerHTML += " + jsQuote(mainElements()) + ";",
        "document.body.innerHTML += " + jsQuote(mainCSS()) + ";",
        loadSnippet(#1013374), // ReconnectingWebSocket
        loadSnippet(#1029696), // scribble.js
        mainJSCode()
      ));

    if (eq(uri, "/scriptTest"))
      ret hhtml(hhead(
        htitle("Scribble Embed Test")
        + loadJQuery())
        + hbody(hjavascript_src("https://www.actualbackground.website/script")));

    ret hhtml(hhead(htitle("Scribble")
      + loadJQuery()
      + hreconnectingWebSockets()
      + mainCSS())
      + hbody(
        hfulltag canvas("", id := "scribble")
        + div("?", id := "scribblePeopleCounter")
        + hjssnippet(#1029696)
        + hjs(mainJSCode())
      ));
  }

  S mainElements() {
    ret hfulltag canvas("", id := "scribble")
      + div("?", id := "scribblePeopleCounter");
  }

  S mainCSS() {
    ret hcss([[
      /*body { margin: 0 !important; padding: 0 !important; }*/
      
      #scribble {
        position: absolute;
        top: 0; left: 0;
        z-index: 100;
      }
      
      #scribblePeopleCounter {
        position: absolute;
        top: 10px; right: 10px;
        width: 100px;
        text-align: right;
        z-index: 101;
        pointer-events: none;
        color: white;
      }
    ]]);
  }

  S mainJSCode() {
    ret [[
      function resized() {
        canvas.width = document.body.clientWidth;
        canvas.height = document.body.clientHeight;
      }
      resized();
      $(window).bind("resize", resized);
    
      // JavaScript WebSocket handling
      var wsReady = false;
      var ws = new ReconnectingWebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/");
      //var ws = new ReconnectingWebSocket("wss://www.actualbackground.website");
      ws.onopen = function(event) { wsReady = true; };
      ws.onmessage = function(event) {
        var data = JSON.parse(event.data);
        if (data.counter)
          $("#scribblePeopleCounter").html(data.counter);
        else
          drawStroke(data.x1, data.y1, data.x2, data.y2, data.mouseDown);
      };
      sendStroke = function(data) {
        //console.log(data);
        if (wsReady)
          ws.send(JSON.stringify(data));
      };
    ]];
  }
  
  void handleWebSocket(virtual WebSocket ws) {
    set(ws, onClose := r { webSockets.remove(ws); wsCounterUpdate(); });
    
    setFieldToIVF1Proxy(ws, onMessage := msg -> { temp enter(); pcall {
      S data = rcall_string getTextPayload(msg);
      distributeEvent(data, ws);
    }});

    set(ws, onOpen := rEnter {  
      print("WebSocket opened!");
      webSockets.add(ws); wsCounterUpdate();
    });
  }

  void wsCounterUpdate {
    distributeEvent(jsonEncode(litmap(counter := nUsers(webSockets) + " online")));
  }

  void distributeEvent(S data, virtual WebSocket sendingWebSocket default null) {
    L<virtual WebSocket> sockets = cloneList(webSockets);
    print("Distributing event to " + n2(sockets, "web socket") + ": " + data);
    for (virtual WebSocket ws : sockets) pcall {
      if (ws == sendingWebSocket) continue;
      try {
        call(ws, "send", data);
      } catch e {
        print("Removing faulty WebSocket");
        webSockets.remove(ws); wsCounterUpdate();
        call(ws, "close");
      }
    }
  }

  void cleanMeUp_webSockets {
    for (virtual WebSocket ws : cloneAndClearList(webSockets)) {
      print("Closing WebSocket");
      close((AutoCloseable) ws);
    }
  }
}

Began life as a copy of #1010027