Daniel
85 lines
3.0 KiB
HTML
85 lines
3.0 KiB
HTML
<!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 = "FG8kCsp87EDChgdFMLG9WZriBszYCRTP"; // 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.Xu3kSu5qiAq1DZhyxCKGhTXy6JxBCnG3dbO1x59zSW0";
|
|
|
|
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
|
|
});
|
|
*/
|
|
const centrifuge = new Centrifuge('ws://localhost: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> |