SignatureCardFrontend/websocket.js

let liveGenWS = new WebSocket("wss://signature.caiu.org/backend/generate/live");

let backgroundLayer = document.getElementById("backgroundLayer");
let loc = document.getElementById("location");
let locationLayer = document.getElementById("locationLayer");
let fullName = document.getElementById("full_name");
let nameLayer = document.getElementById("nameLayer");
let title = document.getElementById("title");
let titleLayer = document.getElementById("titleLayer");
let email = document.getElementById("email");
let emailLayer = document.getElementById("emailLayer");
let extension = document.getElementById("extension");
let directNumber = document.getElementById("directNumber");
let cellNumber = document.getElementById("cellNumber");
let numbersLayer = document.getElementById("numbersLayer");

let dataType = "";

liveGenWS.addEventListener("open", (e) => {
    console.log("Websocket connection opened");
    liveGenWS.send("start;");
}, false);
liveGenWS.addEventListener("message", (e) => {
    const constDataType = dataType;
    if (e.data instanceof ArrayBuffer || e.data instanceof Blob) {
        let blob = e.data;
        if (e.data instanceof ArrayBuffer) {
            blob = new Blob([e.data], { type: "image/png" });
        }
        createImageBitmap(blob, 0, 0, 1080, 602, { resizeWidth: 404, resizeHeight: 225 }).then(img => {
            updateLayer(constDataType, img);
        });
    } else if (typeof e.data === "string") {
        let dataArray = e.data.split(";");
        if (dataArray[0] === "success") {
            console.log(dataArray[1]);
            id = dataArray[1];
        }
        dataType = e.data;
    }
}, false);

function updateLayer(type, img) {
    let workingLayer;
    switch (type) {
        case "location": {
            workingLayer = locationLayer;
            break;
        }
        case "background": {
            workingLayer = backgroundLayer;
            break;
        }
        case "name": {
            workingLayer = nameLayer;
            break;
        }
        case "title": {
            workingLayer = titleLayer;
            break;
        }
        case "email": {
            workingLayer = emailLayer;
            break;
        }
        case "extension":
        case "directNumber": {
            workingLayer = numbersLayer;
            break;
        }
        case "cellNumber": {
            workingLayer = numbersLayer;
            handleUpdate("email", email);
            handleUpdate("location", loc);
        }
    }
    let ctx = workingLayer.getContext("2d");
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.drawImage(img, 0, 0);
}

function handleUpdate(val, elem) {
    liveGenWS.send(val + ";" + elem.value);
}

loc.addEventListener("change", (e) => {
    handleUpdate("location", loc);
    handleUpdate("background", loc);
}, false);
fullName.addEventListener("keyup", (e) => handleUpdate("name", fullName), false);
title.addEventListener("keyup", (e) => handleUpdate("title", title), false);
email.addEventListener("keyup", (e) => handleUpdate("email", email), false);
extension.addEventListener("keyup", (e) => handleUpdate("extension", extension), false);
directNumber.addEventListener("keyup", (e) => handleUpdate("directNumber", directNumber), false);
cellNumber.addEventListener("keyup", (e) => handleUpdate("cellNumber", cellNumber), false);