Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Matrix MQTT</title>
    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
    <style>
        body {
            margin: 0;
            background: black;
            overflow: hidden;
        }

        canvas {
            display: block;
        }
    </style>
</head>

<body>
    <canvas id="matrixCanvas"></canvas>
    <script>
        const MQTT_BROKER = "ws://192.168.1.2:1884";
        const MQTT_TOPIC = "#";
        const fontSize = 16, maxMessages = 100;

        let messages = [], columns, drops;
        const client = mqtt.connect(MQTT_BROKER);
        client.on("connect", () => client.subscribe(MQTT_TOPIC));
        client.on("message", (topic, contents) => {
            const message = ` ${topic}:${contents.toString()} `;
            if (!messages.includes(message)) messages.push(message);
            if (messages.length > maxMessages) messages.shift();
        });

        const canvas = document.getElementById('matrixCanvas');
        const ctx = canvas.getContext('2d');


        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            columns = Math.floor(canvas.width / fontSize);
            drops = Array(columns).fill(1 + (canvas.height / fontSize));
        }

        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        function draw() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            ctx.fillStyle = '#0F0';
            ctx.font = `${fontSize}px monospace`;

            for (message of messages) for (let i = 0; i < drops.length; i++) {
                ctx.fillText(message[drops[i] % message.length], i * fontSize, drops[i] * fontSize);
                if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) drops[i] = 0;
                drops[i]++;
            }
        }

        setInterval(draw, 40);
    </script>
</body>

</html>