test

2026-04-25 12:17:00 -04:00
parent a7d330f811
commit bf54486166
1 changed files with 78 additions and 0 deletions
@@ -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>