Compare commits
2 Commits
e182cda4e9
...
2bdf522a5c
| Author | SHA1 | Date | |
|---|---|---|---|
| 2bdf522a5c | |||
| bf54486166 |
+78
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Test Centrifugo</title>
|
||||
<script src="https://unpkg.com/centrifuge@5.2.2/dist/centrifuge.js"></script>
|
||||
<style>
|
||||
body { font-family: monospace; padding: 20px; background: #1e1e1e; color: #d4d4d4; }
|
||||
h2 { color: #569cd6; }
|
||||
#log { background: #252526; padding: 15px; border-radius: 6px; height: 300px; overflow-y: auto; margin-bottom: 15px; }
|
||||
.msg { margin: 4px 0; }
|
||||
.msg.received { color: #4ec9b0; }
|
||||
.msg.system { color: #ce9178; }
|
||||
input { background: #3c3c3c; color: #d4d4d4; border: 1px solid #555; padding: 8px; border-radius: 4px; width: 300px; }
|
||||
button { background: #0e639c; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; margin-left: 8px; }
|
||||
button:hover { background: #1177bb; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>🧪 Test Centrifugo — Canal "chat"</h2>
|
||||
<div id="log"></div>
|
||||
<input id="msgInput" type="text" placeholder="Ton message..." />
|
||||
<button onclick="publier()">Publier</button>
|
||||
|
||||
<script>
|
||||
// ⚠️ En dev on utilise un token généré sans expiry
|
||||
// En prod, ce token viendra de ton backend Go
|
||||
const TOKEN_SECRET = "bADmFI1tcYaMiISB3bJZjVpfTp4cvjUB"; // doit matcher config.json
|
||||
|
||||
// Token JWT simple pour les tests (généré via jwt.io avec secret ci-dessus)
|
||||
// Header: {"alg":"HS256","typ":"JWT"}
|
||||
// Payload: {"sub":"user-test-1"}
|
||||
// Tu peux en générer un sur https://jwt.io avec le secret : mon-secret-jwt-dev-1234
|
||||
const TOKEN = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1c2VyLXRlc3QtMSJ9.HUYh6NE8LsmiBNHCJhk-CRY1MHvaFKFHZsvXw7ZL3Fw";
|
||||
|
||||
const log = document.getElementById('log');
|
||||
|
||||
function addLog(msg, type = 'system') {
|
||||
const div = document.createElement('div');
|
||||
div.className = `msg ${type}`;
|
||||
div.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
|
||||
log.appendChild(div);
|
||||
log.scrollTop = log.scrollHeight;
|
||||
}
|
||||
|
||||
const centrifuge = new Centrifuge('ws://192.168.4.109:8010/connection/websocket', {
|
||||
token: TOKEN
|
||||
});
|
||||
|
||||
centrifuge.on('connected', ctx => addLog('✅ Connecté au serveur Centrifugo'));
|
||||
centrifuge.on('disconnected', ctx => addLog('❌ Déconnecté'));
|
||||
|
||||
const sub = centrifuge.newSubscription('chat');
|
||||
|
||||
sub.on('publication', ctx => {
|
||||
addLog(`📨 Reçu : ${JSON.stringify(ctx.data)}`, 'received');
|
||||
});
|
||||
|
||||
sub.on('subscribed', ctx => addLog('📡 Abonné au canal "chat"'));
|
||||
|
||||
sub.subscribe();
|
||||
centrifuge.connect();
|
||||
|
||||
function publier() {
|
||||
const input = document.getElementById('msgInput');
|
||||
const msg = input.value.trim();
|
||||
if (!msg) return;
|
||||
sub.publish({ text: msg, from: 'user-test-1' });
|
||||
addLog(`📤 Publié : ${msg}`);
|
||||
input.value = '';
|
||||
}
|
||||
|
||||
document.getElementById('msgInput').addEventListener('keypress', e => {
|
||||
if (e.key === 'Enter') publier();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user