panbanda · August 15, 2024 20:41 · panbanda · Aug 15, 2024
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centrifugo Connection</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/centrifuge.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #connection-status {
            font-size: 20px;
            margin-bottom: 10px;
        }
        #connection-info {
            font-size: 16px;
            color: #555;
        }
    </style>
 </head>
 <body>
    <h1>Centrifugo Connection</h1>
    <div id="connection-status">Connecting...</div>
    <div id="connection-info"></div>

    <script>
        const wsURL = "wss://host/connection/websocket";
        const token = "jwttoken";

        const centrifuge = new Centrifuge([{ endpoint: wsURL, transport: "websocket" }], {
            debug: true,
            token: token
        });

        const connectionStatusElement = document.getElementById('connection-status');
        const connectionInfoElement = document.getElementById('connection-info');

        // Connection event
        centrifuge.on('connect', function (ctx) {
            connectionStatusElement.textContent = "Connected";
            connectionInfoElement.innerHTML = `
                <strong>Client ID:</strong> ${ctx.client}<br>
                <strong>Transport:</strong> ${ctx.transport}<br>
                <strong>Latency:</strong> ${ctx.latency} ms
            `;
        });

        // Disconnect event
        centrifuge.on('disconnected', function (ctx) {
            connectionStatusElement.textContent = "Disconnected";
            connectionInfoElement.innerHTML = `
                <strong>Reason:</strong> ${ctx.reason}<br>
                <strong>Reconnect after:</strong> ${ctx.reconnect} seconds
            `;
        });

        // Error event
        centrifuge.on('error', function (error) {
            connectionStatusElement.textContent = "Error";
            connectionInfoElement.innerHTML = `<strong>Error Message:</strong> ${error.message}`;
        });

        // Connecting event - triggers when reconnecting or connecting initially
        centrifuge.on('connecting', function (ctx) {
            connectionStatusElement.textContent = "Connecting...";
            connectionInfoElement.innerHTML = `
                <strong>Transport:</strong> ${ctx.transport}<br>
                <strong>Attempts:</strong> ${ctx.attempts}
            `;
        });

        // Publish event - when data is published on a channel
        centrifuge.on('publication', function (ctx) {
            connectionInfoElement.innerHTML += `
                <strong>Publication on channel:</strong> ${ctx.channel}<br>
                <strong>Data:</strong> ${JSON.stringify(ctx.data)}<br>
            `;
        });

        // Subscribed event - when successfully subscribed to a channel
        centrifuge.on('subscribed', function (ctx) {
            connectionInfoElement.innerHTML += `
                <strong>Subscribed to channel:</strong> ${ctx.channel}<br>
            `;
        });

        // Subscribing event - when subscription is in progress
        centrifuge.on('subscribing', function (ctx) {
            connectionInfoElement.innerHTML += `
                <strong>Subscribing to channel:</strong> ${ctx.channel}<br>
            `;
        });

        // Unsubscribed event - when unsubscribed from a channel
        centrifuge.on('unsubscribed', function (ctx) {
            connectionInfoElement.innerHTML += `
                <strong>Unsubscribed from channel:</strong> ${ctx.channel}<br>
            `;
        });

        // Handle RPC responses (Remote Procedure Calls)
        centrifuge.on('rpc', function (ctx) {
            connectionInfoElement.innerHTML += `
                <strong>RPC response:</strong> ${JSON.stringify(ctx.data)}<br>
            `;
        });

        // Handle presence information
        centrifuge.on('presence', function (ctx) {
            connectionInfoElement.innerHTML += `
                <strong>Presence in channel:</strong> ${ctx.channel}<br>
                <strong>Clients:</strong> ${JSON.stringify(ctx.clients)}<br>
            `;
        });

        // Handle presence stats
        centrifuge.on('presence_stats', function (ctx) {
            connectionInfoElement.innerHTML += `
                <strong>Presence stats for channel:</strong> ${ctx.channel}<br>
                <strong>Clients:</strong> ${ctx.numClients}, <strong>Unique users:</strong> ${ctx.numUsers}<br>
            `;
        });

        centrifuge.connect();
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Centrifugo Connection</title>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/centrifuge.js"></script>
	<style>
	body {
	font-family: Arial, sans-serif;
	margin: 20px;
	}
	#connection-status {
	font-size: 20px;
	margin-bottom: 10px;
	}
	#connection-info {
	font-size: 16px;
	color: #555;
	}
	</style>
	</head>
	<body>
	<h1>Centrifugo Connection</h1>
	<div id="connection-status">Connecting...</div>
	<div id="connection-info"></div>

	<script>
	const wsURL = "wss://host/connection/websocket";
	const token = "jwttoken";

	const centrifuge = new Centrifuge([{ endpoint: wsURL, transport: "websocket" }], {
	debug: true,
	token: token
	});

	const connectionStatusElement = document.getElementById('connection-status');
	const connectionInfoElement = document.getElementById('connection-info');

	// Connection event
	centrifuge.on('connect', function (ctx) {
	connectionStatusElement.textContent = "Connected";
	connectionInfoElement.innerHTML = `
	<strong>Client ID:</strong> ${ctx.client}<br>
	<strong>Transport:</strong> ${ctx.transport}<br>
	<strong>Latency:</strong> ${ctx.latency} ms
	`;
	});

	// Disconnect event
	centrifuge.on('disconnected', function (ctx) {
	connectionStatusElement.textContent = "Disconnected";
	connectionInfoElement.innerHTML = `
	<strong>Reason:</strong> ${ctx.reason}<br>
	<strong>Reconnect after:</strong> ${ctx.reconnect} seconds
	`;
	});

	// Error event
	centrifuge.on('error', function (error) {
	connectionStatusElement.textContent = "Error";
	connectionInfoElement.innerHTML = `<strong>Error Message:</strong> ${error.message}`;
	});

	// Connecting event - triggers when reconnecting or connecting initially
	centrifuge.on('connecting', function (ctx) {
	connectionStatusElement.textContent = "Connecting...";
	connectionInfoElement.innerHTML = `
	<strong>Transport:</strong> ${ctx.transport}<br>
	<strong>Attempts:</strong> ${ctx.attempts}
	`;
	});

	// Publish event - when data is published on a channel
	centrifuge.on('publication', function (ctx) {
	connectionInfoElement.innerHTML += `
	<strong>Publication on channel:</strong> ${ctx.channel}<br>
	<strong>Data:</strong> ${JSON.stringify(ctx.data)}<br>
	`;
	});

	// Subscribed event - when successfully subscribed to a channel
	centrifuge.on('subscribed', function (ctx) {
	connectionInfoElement.innerHTML += `
	<strong>Subscribed to channel:</strong> ${ctx.channel}<br>
	`;
	});

	// Subscribing event - when subscription is in progress
	centrifuge.on('subscribing', function (ctx) {
	connectionInfoElement.innerHTML += `
	<strong>Subscribing to channel:</strong> ${ctx.channel}<br>
	`;
	});

	// Unsubscribed event - when unsubscribed from a channel
	centrifuge.on('unsubscribed', function (ctx) {
	connectionInfoElement.innerHTML += `
	<strong>Unsubscribed from channel:</strong> ${ctx.channel}<br>
	`;
	});

	// Handle RPC responses (Remote Procedure Calls)
	centrifuge.on('rpc', function (ctx) {
	connectionInfoElement.innerHTML += `
	<strong>RPC response:</strong> ${JSON.stringify(ctx.data)}<br>
	`;
	});

	// Handle presence information
	centrifuge.on('presence', function (ctx) {
	connectionInfoElement.innerHTML += `
	<strong>Presence in channel:</strong> ${ctx.channel}<br>
	<strong>Clients:</strong> ${JSON.stringify(ctx.clients)}<br>
	`;
	});

	// Handle presence stats
	centrifuge.on('presence_stats', function (ctx) {
	connectionInfoElement.innerHTML += `
	<strong>Presence stats for channel:</strong> ${ctx.channel}<br>
	<strong>Clients:</strong> ${ctx.numClients}, <strong>Unique users:</strong> ${ctx.numUsers}<br>
	`;
	});

	centrifuge.connect();
	</script>
	</body>
	</html>