felt/static/socket.js

let tableKey = {
  name: "",
  passcode: ""
}

let table = null;

let conn = null;

function dial() {
  // get tableKey from UI
  const tblNameInput = document.getElementById("input_table_name");
  const tblPassInput = document.getElementById("input_table_pass");
  if (tblNameInput && tblPassInput && tblNameInput.value && tblPassInput.value) {
    tableKey.name = tblNameInput.value;
    tableKey.passcode = tblPassInput.value;
    
    conn = new WebSocket(`ws://${location.host}/subscribe`, `${tableKey.name}.${tableKey.passcode}`);
    conn.addEventListener("close", e => {
      if (e.code !== 1001) {
        // TODO: add message to let user know they are reconnecting
        setTimeout(dial, 1000)
      }
    });
    conn.addEventListener("open", e => {
      // TODO: add message to let user know they are at the table
      console.info("socket connected");
    });
    conn.addEventListener("message", e => {
      const data = JSON.parse(e.data);
      if (table == null) {
        // first fetch comes from mongo, so the rolls array in each diceRoll is a byte array and needs to be decoded
        data.diceRolls.forEach(r=>{
          r.roll = Uint8Array.from(atob(r.roll), c => c.charCodeAt(0))
        })
        table = JSON.parse(e.data);
      } else {
        // UPDATE THE TABLE!
      }
      console.log(data);
    });
  }
}

async function publish(msg) {
  msg.key = tableKey;
  const res = await fetch('/publish', {
    method: 'POST',
    body: JSON.stringify(msg)
  });
  if (!res.ok) {
    setErr("Failed to publish message");
  }
}