postMessage API

All output events use the builtin postMessage({}) function.

Event Structure

Every postMessage should follow this structure:

{
  type: string; // The event type being sent out
  payload: any; // Event-specific data
}

Event Types

Different event types are identified through the type string. This determines the event as well as what the payload should look like.

broadcast: Send data out to all connected players.
consolelog: Writes a string to the codetoy console.

Broadcast Event

Send data out to all connected players

{
  type: "broadcast",
  payload: any,
}

Console Event

Writes a string to the codetoy console.

{
  type: "consolelog",
  payload: string,
}

Basic Usage Example

main.ts

// log to Console
function log(message: string) {
  if (!message) return;
  postMessage({ type: "consolelog", payload: message });
}

let canvas;
let sessionId;

addEventListener("message", ({ data: { type, payload } }) => {
  if (type === "oncanvas") {
    canvas = payload.canvas;
    sessionId = payload.sessionId;

    log("Hello console!");
    postMessage({
      type: "broadcast",
      payload: "Hello everyone! from " + sessionId,
    });
  } else if (type === "onlisten") {
    log("onlisten payload: " + JSON.stringify(payload));
  } else if (type === "onsync") {
    log("onsync sessions are: " + JSON.stringify(payload));
  } else if (type === "onkeydown") {
    log("onkeydown: " + JSON.stringify(payload));
  } else if (type === "onkeyup") {
    log("onkeyup: " + JSON.stringify(payload));
  }
});