Système d'alertes déclenchées sur la date et l'heure

**feelwatt** · 06/12/2019, 11h06

Bonjour,
je réfléchis actuellement à un système de gestion d'alertes,
qui seraient gérées par le client donc en js.

L'utilisateur créer des alertes avec un titre, un texte, une date et une heure.
> c'est enregistré en Base de données.
au chargement de la page on charge toutes les alertes.
Et lorsque vient la date et l'heure d'une alerte elle s'affiche (ex: dans un modal de bootstrap).

**NoSmoking** · 06/12/2019, 12h02

Bonjour,
je serais tenté de dire ... c'est bien ... oui ... et alors ?

Tiens je l'ai dit !

**feelwatt** · 06/12/2019, 12h08

Bien dit Mec

L'idée serait-elle de parcourir un array (Json) toutes les minutes ?

**SpaceFrog** · 06/12/2019, 12h35

pourquoi charger toutes les alertes ?

Autant avoir un ajax qui interroge ta table des alertes avec un paramètre date/heure .

Tu le lances au chargement puis toutes les minutes si besoin ...

**feelwatt** · 06/12/2019, 15h24

Ouais bonne idée,
Je vais voir ca...

**psychadelic** · 06/12/2019, 15h47

il y a aussi ça: https://developer.mozilla.org/fr/doc...er-sent_events

**feelwatt** · 07/12/2019, 00h35

Ok merci de l'idée Psychadelic

il y a aussi ça: https://developer.mozilla.org/fr/doc...er-sent_events

J'ai regardé ca, c'est intérressant
Par contre coté compatibilité des navigateurs, je crains d'avoir des utilisateurs Edge et IE,
(je sais ca craint).

**feelwatt** · 07/12/2019, 04h21

Salut,
Pour ce système d'alerte je vais utiliser le time stamp,
aussi je galère un peu (beaucoup, passionnément...)
entre le format php et le format js
ca n'a pas l'air d'être les même formats, non ?

Je fait

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

time_js=Math.round(time_php/1000);

Puis

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var date = new Date(time_js); 
            var heure = date.getHours(); if (heure<10) {heure='0'+heure;}
            var minute = date.getMinutes(); if (minute<10) {minute='0'+minute;}
            var jour = date.getDay(); if (jour<10) {jour='0'+jour;}
            var mois = date.getMonth(); if (mois<10) {mois='0'+mois;}
            var annee = date.getFullYear();
            console.log(heure+' '+minute+' '+jour+' '+mois+' '+annee);

**NoSmoking** · 07/12/2019, 13h01

Envoyé par feelwatt

L'idée serait-elle de parcourir un array (Json) toutes les minutes ?

J'ai du mal à comprendre la démarche dans le sens où si l'on sait^(*) qu'une alarme va se déclencher dans 1H pourquoi interroger toutes les minutes.
^(*) cela se calcule aisément.

Envoyé par SpaceFrog

pourquoi charger toutes les alertes ?

Sauf s'il existe 10⁶ alarmes, tout charger, sous forme JSON par exemple, limitera au final le flux transmis.

Je partirais sur quelque chose comme

Chargement des alarmes et initialisation ;
Lancement d'un setTimeout avec comme délai la différence entre l'heure présumée des alarmes et l'heure de l'initialisation de la page ;
Lorsque la limite est atteinte, on affiche et on supprime l'alarme de la liste à traiter.

Voilà en substance ce que cela pourrait donner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// exemple format des alarmes
const dataAlarmes = [
  {"date": "", "time": 0, "mess": "Il est l'heure de se réveiller !"},
  {"date": "", "time": 0, "mess": "Ton petit déjeuner t'attend !"},
  {"date": "", "time": 0, "mess": "La brosse à dents s'impatiente !"},
  {"date": "", "time": 0, "mess": "Comme d'hab tu es en retard !"},
  {"date": "", "time": 0, "mess": "Oups !! sorry on est dimanche !"}
];
/**
 * Affichage écran du message
 */
function showAlarm(data) {
  const oDest = document.getElementById("alarm");
  const codeHTML  = "<p><i><sup>" + data.date.toLocaleString() + "</sup></i><br>" + data.mess;
  oDest.insertAdjacentHTML("beforeend",codeHTML)  
}
/**
 * Une façon de gérer les alarmes
 */
function getAlarm() {
  const time = new Date().getTime();
  dataAlarmes.forEach((al, ind) => {
    const alarmTime = al.time;
    if (time >= alarmTime) {
      // affichage écran
      showAlarm(al);
      // supprime de la liste
      dataAlarmes.splice(ind, 1);
    }
    else {
      // supprime timer en cours
      if (al.timer) clearTimeout(al.timer);
      // relance la demande
      const delai = (alarmTime - time);
      al.timer = setTimeout(getAlarm, delai);
    }
  });
}
// initialisation data pour test
dataAlarmes.forEach((al, ind) => {
  const date = new Date();
  date.setTime(date.getTime() + (3000 * (ind + 1)));
  al.date = date;
  al.time = date.getTime();
});
// lance l'action
getAlarm();

Il va de soit que le formatage des alarmes est à aménager suivant le besoin, mais l'idée est là.

La gestion est bien sûr améliorable, puisque dans le code ci-dessus il n'y en a pas, notamment en ce qui concerne, la saisie d'une nouvelle alarme ou la suppression d'une alarme en cours, mais je pense que la trame resterait la même.

Par contre coté compatibilité des navigateurs, je crains d'avoir des utilisateurs Edge et IE,

Dans ce cas les corrections du code seraient minimes.