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

Version imprimable

06/12/2019, 10h06
feelwatt

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

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).
06/12/2019, 11h02
NoSmoking

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

Tiens je l'ai dit !
06/12/2019, 11h08
feelwatt

Bien dit Mec ;)

L'idée serait-elle de parcourir un array (Json) toutes les minutes ?
06/12/2019, 11h35
SpaceFrog

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 ...
06/12/2019, 14h24
feelwatt

Ouais bonne idée,
Je vais voir ca...
:pc:
06/12/2019, 14h47
psychadelic

il y a aussi ça: https://developer.mozilla.org/fr/doc...er-sent_events
06/12/2019, 23h35
feelwatt

Ok merci de l'idée Psychadelic

Citation:

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).

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:

time_js=Math.round(time_php/1000);

Puis

Code:

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);

:calim2:

Citation:

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.

Citation:

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:

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 = "" + data.date.toLocaleString() + " " + 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.

Citation:

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

Dans ce cas les corrections du code seraient minimes.

07/12/2019, 13h37
feelwatt

Salut,
Yep noSmoking,

la trame est bonne, super (il faut que je m'y penche).

Citation:

Citation:

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

Dans ce cas les corrections du code seraient minimes.

> C'était pour la proposition de Psychadelic >

Citation:

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

... et la compatibilité des navigateurs

Pour info j'ai vu une différence entre :
getDate > retourne jour
getDay > retourne jour-1

La biz