Pusher : Implémentation d'une communication en temps réel dans vos applications web

1// Installation: npm install pusher
2const Pusher = require('pusher');
3
4// Initialisation avec vos identifiants
5const pusher = new Pusher({
6  appId: 'YOUR_APP_ID',
7  key: 'YOUR_APP_KEY',
8  secret: 'YOUR_APP_SECRET',
9  cluster: 'YOUR_APP_CLUSTER',
10  useTLS: true // Recommandé pour la sécurité
11});
12
13// Exemple de route Express pour envoyer un message
14app.post('/messages', async (req, res) => {
15  try {
16    const { channel, event, message } = req.body;
17    
18    // Déclencher un événement sur un canal
19    await pusher.trigger(channel, event, {
20      message: message,
21      timestamp: new Date().toISOString(),
22      sender: req.user.username // Supposons que l'utilisateur est authentifié
23    });
24    
25    res.status(200).json({ success: true });
26  } catch (error) {
27    console.error('Pusher trigger error:', error);
28    res.status(500).json({ error: 'Failed to send message' });
29  }
30});
31
32// Exemple d'authentification pour les canaux privés
33app.post('/pusher/auth', (req, res) => {
34  const socketId = req.body.socket_id;
35  const channel = req.body.channel_name;
36  
37  // Vérifier si l'utilisateur a le droit d'accéder à ce canal
38  if (isAuthorized(req.user, channel)) {
39    const auth = pusher.authenticate(socketId, channel);
40    res.send(auth);
41  } else {
42    res.status(403).send({ error: 'Unauthorized' });
43  }
44});

1// HTML : Inclure la bibliothèque Pusher
2// <script src="https://js.pusher.com/8.0/pusher.min.js"></script>
3
4// Initialisation du client Pusher
5const pusher = new Pusher('YOUR_APP_KEY', {
6  cluster: 'YOUR_APP_CLUSTER',
7  encrypted: true
8});
9
10// S'abonner à un canal public
11const channel = pusher.subscribe('public-channel');
12
13// Écouter un événement spécifique sur ce canal
14channel.bind('new-message', function(data) {
15  console.log('Received message:', data);
16  
17  // Ajouter le message à l'interface utilisateur
18  addMessageToUI(data.message, data.sender, data.timestamp);
19});
20
21// S'abonner à un canal privé (nécessite une authentification)
22const privateChannel = pusher.subscribe('private-user-123');
23
24// Écouter des événements sur le canal privé
25privateChannel.bind('new-notification', function(data) {
26  showNotification(data.title, data.message);
27});
28
29// Gérer les erreurs de connexion
30pusher.connection.bind('error', function(err) {
31  console.error('Pusher connection error:', err);
32});
33
34// Fonction pour envoyer un message (qui déclenchera un événement Pusher via l'API)
35async function sendMessage(message) {
36  try {
37    const response = await fetch('/messages', {
38      method: 'POST',
39      headers: {
40        'Content-Type': 'application/json'
41      },
42      body: JSON.stringify({
43        channel: 'public-channel',
44        event: 'new-message',
45        message: message
46      })
47    });
48    
49    if (!response.ok) {
50      throw new Error('Failed to send message');
51    }
52    
53    return await response.json();
54  } catch (error) {
55    console.error('Error sending message:', error);
56    throw error;
57  }
58}

1// Côté serveur : Authentification pour un canal de présence (Node.js)
2app.post('/pusher/auth', (req, res) => {
3  const socketId = req.body.socket_id;
4  const channel = req.body.channel_name;
5  
6  // Pour les canaux de présence, nous devons fournir des données utilisateur
7  if (channel.startsWith('presence-')) {
8    // Récupérer l'utilisateur actuellement connecté
9    const user = req.user;
10    
11    // Créer les données utilisateur à envoyer avec l'authentification
12    const userData = {
13      user_id: user.id.toString(),
14      user_info: {
15        name: user.name,
16        avatar: user.avatarUrl
17      }
18    };
19    
20    // Authentifier avec les données utilisateur
21    const auth = pusher.authenticate(socketId, channel, userData);
22    res.send(auth);
23  } else {
24    // Authentification standard pour les canaux privés
25    const auth = pusher.authenticate(socketId, channel);
26    res.send(auth);
27  }
28});
29
30// Côté client : S'abonner à un canal de présence
31const presenceChannel = pusher.subscribe('presence-room-123');
32
33// Événement déclenché lorsque l'abonnement au canal réussit
34presenceChannel.bind('pusher:subscription_succeeded', (members) => {
35  console.log('Membres actuels du canal:', members.count);
36  
37  // Itérer sur tous les membres actuels
38  members.each((member) => {
39    addUserToOnlineList(member.id, member.info);
40  });
41});
42
43// Événement déclenché lorsqu'un nouvel utilisateur rejoint le canal
44presenceChannel.bind('pusher:member_added', (member) => {
45  console.log('Utilisateur connecté:', member.info.name);
46  addUserToOnlineList(member.id, member.info);
47  showNotification(`${member.info.name} a rejoint le salon`);
48});
49
50// Événement déclenché lorsqu'un utilisateur quitte le canal
51presenceChannel.bind('pusher:member_removed', (member) => {
52  console.log('Utilisateur déconnecté:', member.info.name);
53  removeUserFromOnlineList(member.id);
54  showNotification(`${member.info.name} a quitté le salon`);
55});
56
57// Vous pouvez aussi envoyer des événements spécifiques aux canaux de présence
58presenceChannel.bind('user-typing', (data) => {
59  showTypingIndicator(data.user_id, data.user_info.name);
60});

1// Côté client : Envoyer un événement client pour indiquer que l'utilisateur est en train de taper
2const privateChannel = pusher.subscribe('private-chat-123');
3
4// Attendre que l'abonnement soit réussi avant d'envoyer des événements clients
5privateChannel.bind('pusher:subscription_succeeded', () => {
6  console.log('Abonnement au canal privé réussi, peut envoyer des événements clients');
7});
8
9// Fonction pour envoyer un indicateur de frappe
10function sendTypingIndicator(isTyping) {
11  try {
12    privateChannel.trigger('client-typing', {
13      user: currentUser.id,
14      name: currentUser.name,
15      typing: isTyping
16    });
17  } catch (error) {
18    console.error('Erreur lors de l\'envoi de l\'indicateur de frappe:', error);
19  }
20}
21
22// Écouter les indicateurs de frappe des autres utilisateurs
23privateChannel.bind('client-typing', (data) => {
24  if (data.user !== currentUser.id) { // Ne pas réagir à ses propres événements
25    if (data.typing) {
26      showTypingIndicator(data.name);
27    } else {
28      hideTypingIndicator(data.name);
29    }
30  }
31});
32
33// Attacher des événements aux champs de texte
34document.getElementById('message-input').addEventListener('keydown', () => {
35  sendTypingIndicator(true);
36  
37  // Effacer l'indicateur après un délai
38  clearTimeout(typingTimer);
39  typingTimer = setTimeout(() => sendTypingIndicator(false), 3000);
40});

1// Exemple de gestionnaire de webhook Pusher avec Express (Node.js)
2const bodyParser = require('body-parser');
3const crypto = require('crypto');
4
5// Middleware pour vérifier la signature Pusher
6function verifyPusherWebhook(req, res, next) {
7  const signature = req.headers['x-pusher-signature'];
8  const body = JSON.stringify(req.body);
9  
10  const expectedSignature = crypto
11    .createHmac('sha256', 'YOUR_APP_SECRET')
12    .update(body)
13    .digest('hex');
14  
15  if (signature === expectedSignature) {
16    next();
17  } else {
18    res.status(401).send('Invalid signature');
19  }
20}
21
22// Route pour recevoir les webhooks
23app.post('/pusher/webhooks',
24  bodyParser.json(),
25  verifyPusherWebhook,
26  async (req, res) => {
27    try {
28      const webhook = req.body;
29      
30      console.log('Webhook received:', webhook);
31      
32      // Traiter différents types d'événements
33      switch (webhook.name) {
34        case 'channel_occupied':
35          // Un canal auparavant vide a maintenant au moins un abonné
36          await updateChannelStatus(webhook.channel, true);
37          break;
38          
39        case 'channel_vacated':
40          // Un canal n'a plus d'abonnés
41          await updateChannelStatus(webhook.channel, false);
42          break;
43          
44        case 'member_added':
45          // Un membre a été ajouté à un canal de présence
46          await updateUserOnlineStatus(webhook.user_id, true);
47          break;
48          
49        case 'member_removed':
50          // Un membre a été retiré d'un canal de présence
51          await updateUserOnlineStatus(webhook.user_id, false);
52          break;
53      }
54      
55      res.status(200).send('Webhook processed');
56    } catch (error) {
57      console.error('Error processing webhook:', error);
58      res.status(500).send('Error processing webhook');
59    }
60  }
61);

1// CÔTÉ SERVEUR (Node.js avec Express)
2const express = require('express');
3const Pusher = require('pusher');
4const bodyParser = require('body-parser');
5const session = require('express-session');
6
7const app = express();
8
9// Configuration de Pusher
10const pusher = new Pusher({
11  appId: 'YOUR_APP_ID',
12  key: 'YOUR_APP_KEY',
13  secret: 'YOUR_APP_SECRET',
14  cluster: 'YOUR_APP_CLUSTER',
15  useTLS: true
16});
17
18// Middleware
19app.use(bodyParser.json());
20app.use(bodyParser.urlencoded({ extended: false }));
21app.use(session({
22  secret: 'chat-session-secret',
23  resave: false,
24  saveUninitialized: true
25}));
26app.use(express.static('public'));
27
28// Routes pour l'authentification simplifiée
29app.post('/login', (req, res) => {
30  const { username } = req.body;
31  
32  if (!username || username.trim() === '') {
33    return res.status(400).json({ error: 'Username is required' });
34  }
35  
36  // Stocker l'utilisateur dans la session
37  req.session.user = {
38    id: Date.now().toString(),
39    username: username.trim()
40  };
41  
42  res.json({ success: true, user: req.session.user });
43});
44
45// Route pour envoyer un message
46app.post('/chat/messages', (req, res) => {
47  // Vérifier si l'utilisateur est connecté
48  if (!req.session.user) {
49    return res.status(401).json({ error: 'Not authenticated' });
50  }
51  
52  const { message, roomId } = req.body;
53  
54  if (!message || !roomId) {
55    return res.status(400).json({ error: 'Message and roomId are required' });
56  }
57  
58  // Créer l'objet message
59  const chatMessage = {
60    id: Date.now().toString(),
61    user: req.session.user,
62    message: message.trim(),
63    timestamp: new Date().toISOString()
64  };
65  
66  // Déclencher l'événement Pusher
67  pusher.trigger(`chat-room-${roomId}`, 'new-message', chatMessage);
68  
69  res.json({ success: true, message: chatMessage });
70});
71
72// Route pour l'authentification Pusher
73app.post('/pusher/auth', (req, res) => {
74  if (!req.session.user) {
75    return res.status(401).json({ error: 'Not authenticated' });
76  }
77  
78  const socketId = req.body.socket_id;
79  const channel = req.body.channel_name;
80  
81  // Pour les canaux de présence
82  if (channel.startsWith('presence-')) {
83    const presenceData = {
84      user_id: req.session.user.id,
85      user_info: {
86        username: req.session.user.username
87      }
88    };
89    
90    const auth = pusher.authenticate(socketId, channel, presenceData);
91    res.json(auth);
92  } else {
93    // Pour les canaux privés
94    const auth = pusher.authenticate(socketId, channel);
95    res.json(auth);
96  }
97});
98
99app.listen(3000, () => {
100  console.log('Server running on port 3000');
101});
102
103// CÔTÉ CLIENT (JavaScript)
104// HTML minimal requis :
105/*
106<!DOCTYPE html>
107<html>
108<head>
109  <title>Chat en temps réel avec Pusher</title>
110  <script src="https://js.pusher.com/8.0/pusher.min.js"></script>
111</head>
112<body>
113  <div id="login-form" class="container">
114    <h2>Connexion</h2>
115    <input type="text" id="username" placeholder="Votre nom d'utilisateur" />
116    <button id="login-button">Se connecter</button>
117  </div>
118  
119  <div id="chat-container" class="container" style="display: none;">
120    <h2>Chat Room: <span id="room-name">Général</span></h2>
121    
122    <div id="online-users">
123      <h3>Utilisateurs en ligne</h3>
124      <ul id="users-list"></ul>
125    </div>
126    
127    <div id="messages-container">
128      <div id="messages"></div>
129      
130      <div id="typing-indicator"></div>
131      
132      <div id="message-form">
133        <input type="text" id="message-input" placeholder="Votre message..." />
134        <button id="send-button">Envoyer</button>
135      </div>
136    </div>
137  </div>
138  
139  <script src="app.js"></script>
140</body>
141</html>
142*/
143
144// app.js
145document.addEventListener('DOMContentLoaded', () => {
146  let currentUser = null;
147  let pusher = null;
148  let currentRoom = 'general';
149  let typingTimer = null;
150  
151  // Éléments du DOM
152  const loginForm = document.getElementById('login-form');
153  const chatContainer = document.getElementById('chat-container');
154  const usernameInput = document.getElementById('username');
155  const loginButton = document.getElementById('login-button');
156  const messageInput = document.getElementById('message-input');
157  const sendButton = document.getElementById('send-button');
158  const messagesContainer = document.getElementById('messages');
159  const typingIndicator = document.getElementById('typing-indicator');
160  const usersList = document.getElementById('users-list');
161  
162  // Événements
163  loginButton.addEventListener('click', login);
164  sendButton.addEventListener('click', sendMessage);
165  messageInput.addEventListener('keydown', handleTyping);
166  messageInput.addEventListener('keyup', (e) => {
167    if (e.key === 'Enter') sendMessage();
168  });
169  
170  // Fonction de connexion
171  async function login() {
172    const username = usernameInput.value.trim();
173    
174    if (!username) {
175      alert('Veuillez entrer un nom d\'utilisateur');
176      return;
177    }
178    
179    try {
180      const response = await fetch('/login', {
181        method: 'POST',
182        headers: { 'Content-Type': 'application/json' },
183        body: JSON.stringify({ username })
184      });
185      
186      const data = await response.json();
187      
188      if (data.success) {
189        currentUser = data.user;
190        initializePusher();
191        
192        // Afficher l'interface de chat
193        loginForm.style.display = 'none';
194        chatContainer.style.display = 'block';
195      }
196    } catch (error) {
197      console.error('Login error:', error);
198      alert('Erreur de connexion. Veuillez réessayer.');
199    }
200  }
201  
202  // Initialiser Pusher
203  function initializePusher() {
204    pusher = new Pusher('YOUR_APP_KEY', {
205      cluster: 'YOUR_APP_CLUSTER',
206      authEndpoint: '/pusher/auth',
207      encrypted: true
208    });
209    
210    // S'abonner au canal de chat public
211    const publicChannel = pusher.subscribe(`chat-room-${currentRoom}`);
212    
213    publicChannel.bind('new-message', (data) => {
214      addMessageToUI(data);
215    });
216    
217    // S'abonner au canal de présence
218    const presenceChannel = pusher.subscribe(`presence-chat-room-${currentRoom}`);
219    
220    presenceChannel.bind('pusher:subscription_succeeded', (members) => {
221      // Vider la liste des utilisateurs
222      usersList.innerHTML = '';
223      
224      // Ajouter tous les membres actuels
225      members.each((member) => {
226        addUserToList(member.id, member.info.username);
227      });
228    });
229    
230    presenceChannel.bind('pusher:member_added', (member) => {
231      addUserToList(member.id, member.info.username);
232      showSystemMessage(`${member.info.username} a rejoint la conversation`);
233    });
234    
235    presenceChannel.bind('pusher:member_removed', (member) => {
236      removeUserFromList(member.id);
237      showSystemMessage(`${member.info.username} a quitté la conversation`);
238    });
239    
240    // Indicateurs de frappe
241    presenceChannel.bind('client-typing', (data) => {
242      if (data.user.id !== currentUser.id) {
243        if (data.typing) {
244          typingIndicator.textContent = `${data.user.username} est en train d'écrire...`;
245        } else {
246          typingIndicator.textContent = '';
247        }
248      }
249    });
250  }
251  
252  // Envoyer un message
253  async function sendMessage() {
254    const message = messageInput.value.trim();
255    
256    if (!message) return;
257    
258    try {
259      const response = await fetch('/chat/messages', {
260        method: 'POST',
261        headers: { 'Content-Type': 'application/json' },
262        body: JSON.stringify({
263          message,
264          roomId: currentRoom
265        })
266      });
267      
268      // Effacer le champ de saisie après l'envoi
269      messageInput.value = '';
270      
271      // Indiquer que l'utilisateur a arrêté de taper
272      sendTypingIndicator(false);
273    } catch (error) {
274      console.error('Error sending message:', error);
275      alert('Erreur lors de l\'envoi du message. Veuillez réessayer.');
276    }
277  }
278  
279  // Gérer l'indicateur de frappe
280  function handleTyping() {
281    sendTypingIndicator(true);
282    
283    // Effacer l'indicateur après un délai
284    clearTimeout(typingTimer);
285    typingTimer = setTimeout(() => sendTypingIndicator(false), 3000);
286  }
287  
288  // Envoyer l'état de frappe
289  function sendTypingIndicator(isTyping) {
290    const presenceChannel = pusher.channel(`presence-chat-room-${currentRoom}`);
291    
292    if (presenceChannel) {
293      presenceChannel.trigger('client-typing', {
294        user: currentUser,
295        typing: isTyping
296      });
297    }
298  }
299  
300  // Ajouter un message à l'interface
301  function addMessageToUI(message) {
302    const messageElement = document.createElement('div');
303    messageElement.classList.add('message');
304    
305    // Déterminer si c'est notre message ou celui d'un autre utilisateur
306    const isOwnMessage = message.user.id === currentUser.id;
307    messageElement.classList.add(isOwnMessage ? 'own-message' : 'other-message');
308    
309    // Formater l'heure
310    const timestamp = new Date(message.timestamp).toLocaleTimeString();
311    
312    messageElement.innerHTML = `
313      <div class="message-header">
314        <span class="username">${message.user.username}</span>
315        <span class="timestamp">${timestamp}</span>
316      </div>
317      <div class="message-content">${message.message}</div>
318    `;
319    
320    messagesContainer.appendChild(messageElement);
321    
322    // Faire défiler vers le bas pour voir le nouveau message
323    messagesContainer.scrollTop = messagesContainer.scrollHeight;
324  }
325  
326  // Afficher un message système
327  function showSystemMessage(text) {
328    const systemMessage = document.createElement('div');
329    systemMessage.classList.add('system-message');
330    systemMessage.textContent = text;
331    
332    messagesContainer.appendChild(systemMessage);
333    messagesContainer.scrollTop = messagesContainer.scrollHeight;
334  }
335  
336  // Ajouter un utilisateur à la liste des utilisateurs en ligne
337  function addUserToList(userId, username) {
338    // Vérifier si l'utilisateur est déjà dans la liste
339    if (document.getElementById(`user-${userId}`)) {
340      return;
341    }
342    
343    const userItem = document.createElement('li');
344    userItem.id = `user-${userId}`;
345    userItem.textContent = username;
346    
347    // Mettre en évidence l'utilisateur actuel
348    if (userId === currentUser.id) {
349      userItem.classList.add('current-user');
350      userItem.textContent += ' (vous)';
351    }
352    
353    usersList.appendChild(userItem);
354  }
355  
356  // Supprimer un utilisateur de la liste
357  function removeUserFromList(userId) {
358    const userItem = document.getElementById(`user-${userId}`);
359    if (userItem) {
360      userItem.remove();
361    }
362  }
363});

1// CÔTÉ SERVEUR (Node.js)
2const express = require('express');
3const Pusher = require('pusher');
4const cron = require('node-cron');
5
6const app = express();
7
8// Configuration de Pusher
9const pusher = new Pusher({
10  appId: 'YOUR_APP_ID',
11  key: 'YOUR_APP_KEY',
12  secret: 'YOUR_APP_SECRET',
13  cluster: 'YOUR_APP_CLUSTER',
14  useTLS: true
15});
16
17// Fonction simulant la récupération de données métier
18async function fetchBusinessMetrics() {
19  // Dans un environnement réel, ces données viendraient d'une base de données
20  // ou d'une API externe
21  return {
22    salesToday: Math.floor(Math.random() * 10000),
23    newUsers: Math.floor(Math.random() * 100),
24    activeUsers: Math.floor(Math.random() * 1000),
25    conversionRate: (Math.random() * 10).toFixed(2),
26    averageOrderValue: (Math.random() * 200 + 50).toFixed(2),
27    timestamp: new Date().toISOString()
28  };
29}
30
31// Planifier une mise à jour toutes les minutes
32cron.schedule('* * * * *', async () => {
33  try {
34    const metrics = await fetchBusinessMetrics();
35    
36    // Publier les données sur Pusher
37    pusher.trigger('dashboard', 'metrics-update', metrics);
38    
39    console.log('Metrics published:', metrics);
40  } catch (error) {
41    console.error('Error publishing metrics:', error);
42  }
43});
44
45// Endpoint pour récupérer les données initiales
46app.get('/api/metrics', async (req, res) => {
47  try {
48    const metrics = await fetchBusinessMetrics();
49    res.json(metrics);
50  } catch (error) {
51    console.error('Error fetching metrics:', error);
52    res.status(500).json({ error: 'Failed to fetch metrics' });
53  }
54});
55
56app.use(express.static('public'));
57
58app.listen(3000, () => {
59  console.log('Server running on port 3000');
60});
61
62// CÔTÉ CLIENT (JavaScript avec Chart.js)
63// HTML de base:
64/*
65<!DOCTYPE html>
66<html>
67<head>
68  <title>Tableau de bord en temps réel</title>
69  <script src="https://js.pusher.com/8.0/pusher.min.js"></script>
70  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
71</head>
72<body>
73  <div class="dashboard">
74    <h1>Tableau de bord des ventes</h1>
75    <p>Dernière mise à jour: <span id="last-update">-</span></p>
76    
77    <div class="metrics-grid">
78      <div class="metric-card">
79        <h3>Ventes aujourd'hui</h3>
80        <div class="metric-value" id="sales-today">-</div>
81      </div>
82      
83      <div class="metric-card">
84        <h3>Nouveaux utilisateurs</h3>
85        <div class="metric-value" id="new-users">-</div>
86      </div>
87      
88      <div class="metric-card">
89        <h3>Utilisateurs actifs</h3>
90        <div class="metric-value" id="active-users">-</div>
91      </div>
92      
93      <div class="metric-card">
94        <h3>Taux de conversion</h3>
95        <div class="metric-value" id="conversion-rate">-</div>
96      </div>
97    </div>
98    
99    <div class="charts-container">
100      <div class="chart-card">
101        <h3>Tendance des ventes</h3>
102        <canvas id="sales-chart"></canvas>
103      </div>
104    </div>
105  </div>
106  
107  <script src="dashboard.js"></script>
108</body>
109</html>
110*/
111
112// dashboard.js
113document.addEventListener('DOMContentLoaded', () => {
114  // Éléments du DOM
115  const lastUpdateEl = document.getElementById('last-update');
116  const salesTodayEl = document.getElementById('sales-today');
117  const newUsersEl = document.getElementById('new-users');
118  const activeUsersEl = document.getElementById('active-users');
119  const conversionRateEl = document.getElementById('conversion-rate');
120  
121  // Initialiser le graphique
122  const salesChartCtx = document.getElementById('sales-chart').getContext('2d');
123  const salesChart = new Chart(salesChartCtx, {
124    type: 'line',
125    data: {
126      labels: [],
127      datasets: [{
128        label: 'Ventes (€)',
129        data: [],
130        borderColor: 'rgb(75, 192, 192)',
131        tension: 0.1,
132        fill: false
133      }]
134    },
135    options: {
136      scales: {
137        y: {
138          beginAtZero: true
139        }
140      },
141      animation: {
142        duration: 500
143      }
144    }
145  });
146  
147  // Données historiques pour le graphique
148  const salesHistory = [];
149  const timeLabels = [];
150  
151  // Limiter l'historique à 30 points
152  const MAX_HISTORY_POINTS = 30;
153  
154  // Initialiser Pusher
155  const pusher = new Pusher('YOUR_APP_KEY', {
156    cluster: 'YOUR_APP_CLUSTER',
157    encrypted: true
158  });
159  
160  // S'abonner au canal du tableau de bord
161  const dashboardChannel = pusher.subscribe('dashboard');
162  
163  // Écouter les mises à jour de métriques
164  dashboardChannel.bind('metrics-update', (data) => {
165    updateDashboard(data);
166  });
167  
168  // Charger les données initiales
169  fetchInitialData();
170  
171  // Fonction pour charger les données initiales
172  async function fetchInitialData() {
173    try {
174      const response = await fetch('/api/metrics');
175      const data = await response.json();
176      
177      updateDashboard(data);
178    } catch (error) {
179      console.error('Error fetching initial data:', error);
180    }
181  }
182  
183  // Fonction pour mettre à jour le tableau de bord
184  function updateDashboard(data) {
185    // Mettre à jour les compteurs
186    salesTodayEl.textContent = `${data.salesToday} €`;
187    newUsersEl.textContent = data.newUsers;
188    activeUsersEl.textContent = data.activeUsers;
189    conversionRateEl.textContent = `${data.conversionRate}%`;
190    
191    // Mettre à jour l'horodatage
192    const updateTime = new Date(data.timestamp).toLocaleTimeString();
193    lastUpdateEl.textContent = updateTime;
194    
195    // Ajouter des données au graphique
196    addDataPoint(data.salesToday, updateTime);
197    
198    // Animation subtile pour montrer que les données sont fraîches
199    animateUpdate();
200  }
201  
202  // Ajouter un point de données au graphique
203  function addDataPoint(value, label) {
204    // Ajouter les nouvelles données
205    salesHistory.push(value);
206    timeLabels.push(label);
207    
208    // Limiter l'historique
209    if (salesHistory.length > MAX_HISTORY_POINTS) {
210      salesHistory.shift();
211      timeLabels.shift();
212    }
213    
214    // Mettre à jour le graphique
215    salesChart.data.labels = timeLabels;
216    salesChart.data.datasets[0].data = salesHistory;
217    salesChart.update();
218  }
219  
220  // Animation pour les mises à jour
221  function animateUpdate() {
222    const elements = document.querySelectorAll('.metric-value');
223    
224    elements.forEach(el => {
225      el.classList.add('updated');
226      
227      setTimeout(() => {
228        el.classList.remove('updated');
229      }, 1000);
230    });
231  }
232});

1// Exemple de gestion de connexion/déconnexion propre
2
3// Initialisation
4const pusher = new Pusher('YOUR_APP_KEY', {
5  cluster: 'YOUR_APP_CLUSTER',
6  enabledTransports: ['ws', 'wss'], // Préférer WebSocket
7});
8
9// Gestion de la connexion
10pusher.connection.bind('connected', () => {
11  console.log('Connecté à Pusher!');
12  // Réabonnez-vous aux canaux si nécessaire après une reconnexion
13});
14
15pusher.connection.bind('disconnected', () => {
16  console.log('Déconnecté de Pusher');
17});
18
19pusher.connection.bind('error', (err) => {
20  console.error('Erreur Pusher:', err);
21});
22
23// Déconnexion propre lorsque l'utilisateur quitte
24window.addEventListener('beforeunload', () => {
25  pusher.disconnect();
26});
27
28// Gestion de la visibilité de la page
29document.addEventListener('visibilitychange', () => {
30  if (document.hidden) {
31    // L'utilisateur a changé de page, vous pouvez opter pour une déconnexion
32    // ou maintenir la connexion selon vos besoins
33    // pusher.disconnect();
34  } else {
35    // L'utilisateur est revenu sur la page
36    if (pusher.connection.state !== 'connected') {
37      pusher.connect();
38    }
39  }
40});