hello_party

This example shows how to use the partyDisconnect() function to create functionality similar to the "disconnect others" button in the info panel.

click to disconnect all other clients

Try this example in two browser windows at once!

index.js

let myClientId = Math.random(); // generate a unique ID for this client

let shared;
let me;
let guests;

function preload() {
  // connect to the party server
  partyConnect("wss://demoserver.p5party.org", "disconnect_others");

  // begin loading shared object with count property
  shared = partyLoadShared("shared", { count: 0 });
  // load "my" shared object with a placeholder so it will be listed in guests
  me = partyLoadMyShared({ placeholder: true });
  guests = partyLoadGuestShareds();
}

function setup() {
  createCanvas(400, 400);
  noStroke();
  textAlign(CENTER, CENTER);
  partyToggleInfo(true);

  // subscribe to the disconnectOthers event
  partySubscribe("disconnectOthers", (data) => {
    console.log("disconnectOthers event received", data);
    // only disconnect if we're not the sender
    if (data.sender !== myClientId) partyDisconnect();
  });
}

function mousePressed() {
  // emit a disconnectOthers event with our ID as the sender
  partyEmit("disconnectOthers", {
    sender: myClientId,
  });
}

function draw() {
  background("#ffcccc");

  // update the count every 60 frames if we're the host
  if (partyIsHost() && frameCount % 60 === 0) {
    shared.count++;
  }

  // display the count
  fill("#000066");
  textSize(32);
  text("Count: " + shared.count, width / 2, height / 2);

  // display the guest count
  textSize(16);
  text("Guests: " + guests.length, width / 2, height / 2 + 40);
}

index.html

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <main></main>

    <div id="readme"></div>

    <h2>index.js</h2>
    <div id="source-javascript"></div>

    <h2>index.html</h2>
    <div id="source-html"></div>

    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
    <script src="/dist/p5.party.js"></script>
    <script src="index.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
    <link rel="stylesheet" href="/examples.css" />
    <script src="/examples.js" type="module"></script>
  </body>
</html>