View Confetti Example (Glimesh Interactive)

view.js

// Confetti by https://www.npmjs.com/package/canvas-confetti

let ws = new WebSocket("ws://localhost:4000/api/graph/websocket?vsn=2.0.0&client_id=CLIENTID");

// When connection is open...
ws.addEventListener("open", () => {
 // Send hello message
    ws.send('["1","1","__absinthe__:control","phx_join",{}]');
    // Ask to be notified when an interactive message is sent
    ws.send(`["1",
        "1",
        "__absinthe__:control",
        "doc",
        {
          "query": "subscription{ interactive(session: 1) { data, eventName } }",
          "variables": {}
        }
      ]`);

    // Every 30 second tell glimesh that we are still alive
    setInterval(() => {
        ws.send('["1","1","phoenix","heartbeat",{}]')
    }, 30000);
})

// When a message happens...
ws.addEventListener("message", (data) => {
    try {
        // Make it readable
        let json = JSON.parse(data.data);
        // Check if we should do confetti!
        if (json[4].result.data.interactive.data.confetti) {
            // Woooo confetti!
            confetti({
                particleCount: 777,
                spread: 120
            })
            // Wait a little...
            setTimeout(() => {
                // Woooo confetti!
                confetti({
                    particleCount: 400,
                    angle: 10
                })
                // wait a little...
                setTimeout(() => {
                    // Woooo confetti!
                    confetti({
                        particleCount: 777,
                        spread: 120,
                        angle: 90
                    })
                    // Woooo confetti!
                    confetti({
                        particleCount: 500,
                        spread: 150,
                        angle: -100,
                        drift: -5
                    })
                }, 400);
            }, 700);
        }
    } catch (e) {
        // Oh no something went terrible wrong :(
    }
})

ws.addEventListener("closed", (reason, code) => {
    console.log("closed", reason, code)
})

ws.addEventListener("error", (reason, code) => {
    console.log("error", reason, code)
})