Messages éphémères qui s'affichent à l'écran

Bonsoir,

Pour mon cours d'informatique nous devons créer une "expérience fun et interactive", dans le langage de notre choix. Je souhaiterais mettre en place une page web sur laquelle les visiteurs pourraient afficher à l'écran un message éphémère de quelques secondes. Pour cela il faudrait simplement une zone de saisie de texte en bas de la page, avec un bouton "envoyer". Les messages s'afficheraient alors au centre de l'écran, avec une jolie police, puis disparaitraient au bout de quelques secondes. Avec plusieurs visiteurs au même moment on peut envisager que les messages soient de différentes couleurs, et positionnés à des endroits différents de l'écran.

Je précise que mes connaissances en développement se limitent au html et css mais je suis capable de me débrouiller en javascript pour des actions relativement simples.

Est-ce que l'un d'entre vous pourrait m'indiquer comment coder ce projet ? Je pense que ce code sera assez simple, mais suffisant pour ce cours. (Je suis en école de management, ces cours d'informatique sont en option).

Bonne soirée à vous et merci !

Quelques questions de base pour creuser ton sujet :
- si ces messages sont partagés entre les utilisateurs, ce qu'il m'a semblé comprendre, as-tu prévu de les stocker quelque-part et si oui, où ?
- est-ce que les messages partent et arrivent en temps réel, sans rechargement de la page ?
- est-ce que les utilisateurs sont répartis en "groupes" ou "salles", ou est-ce que le monde entier voit les messages de tous ?

- si ces messages sont partagés entre les utilisateurs, ce qu'il m'a semblé comprendre, as-tu prévu de les stocker quelque-part et si oui, où ?

Les messages s'affichent durant 4 ou 5 secondes puis s'effacent avec une sorte d'effet "fade out". Donc pas de gros stockage. Cette page serait testée par une vingtaine de personnes seulement, durant le cours, donc pas vraiment de gros trafic.

- est-ce que les messages partent et arrivent en temps réel, sans rechargement de la page ?
Oui, sans rechargement.

- est-ce que les utilisateurs sont répartis en "groupes" ou "salles", ou est-ce que le monde entier voit les messages de tous ?
Seuls les gens de mon cours iront sur l'url, donc la question ne se pose pas ici. C'est simplement une petite page fun, pas prise de tête.


Est ce qu'il est facile de coder une telle page ?

Voilà très grossièrement le rendu souhaité :

http://img4.hostingpics.net/pics/614784image770.jpg

Chaque message entré s'efface au bout de quelques secondes, donc les messages peuvent se chevaucher, se toucher, etc, et sont affiché à chaque fois à un endroit différent de l'écran.

Citation:

---

Envoyé par Start-App

Les messages s'affichent durant 4 ou 5 secondes puis s'effacent avec une sorte d'effet "fade out". Donc pas de gros stockage.

---

pas de gros stockage, mais du stockage quand même. Réfléchis à où tu veux les stocker: dans la mémoire vive du serveur, sur un fichier ou une base de données...

- est-ce que les messages partent et arrivent en temps réel, sans rechargement de la page ?

Citation:

---

Envoyé par Start-App

Oui, sans rechargement.

---

dans ce cas les deux meilleurs choix techniques sont 1) les websockets 2) les Servent Sent Events et une soumission en AJAX du formulaire

Citation:

---

Envoyé par Start-App

Est ce qu'il est facile de coder une telle page ?

---

Tout dépend de ton niveau de connaissances initial, mais si tu maîtrises bien les différentes technos, deux heures peuvent suffire.

Bon, déjà moi je dis c'est tout con mais c'est hyper intéressant comme projet. Après du coup, je te le dis direct, c'est intéressant parce que techniquement ça va faire appel à plein de choses, par contre forcément niveau facilité, c'est pas forcément le plus évident.

Citation:

---

Les messages s'affichent durant 4 ou 5 secondes puis s'effacent avec une sorte d'effet "fade out". Donc pas de gros stockage

---

Stockage court mais stockage quand même ! Donc, normalement, il te faut une bdd, après il faudra voir au niveau temps accès et de réponse si c'est jouable, sinon tu pourras utiliser un moteur de cache.

Citation:

---

- est-ce que les messages partent et arrivent en temps réel, sans rechargement de la page ?
Oui, sans rechargement.

---

Il va te falloir utiliser l'AJAX à gogo.

En gros, comment je vois le truc, sans tenir compte des temps d'accès (qui peuvent éventuellement posé problèmé :

Que se passe t-il quand tu écris et envoie un message ?

- Requête ajax qui envoies ton message.
- Ton script (côté serveur), disons php, enregistre ce message en bdd et lui met une date d'expiration situé à quelques secondes (allez disons 5s).
- Le message est directement affiché côté client et est indiqué comme lu (cette fois-ci côté client !)

Comment récupère t-on les messages ?

- Une requête ajax est envoyé toutes les 2s (par exemple) pour récupérer tous les nouveaux messages non lus.
- Le script côté serveur renvoies messages qui doivent être affichés (et supprime les anciens par la même occasion, qui sont devenus complètement useless).
- Les messages sont reçus par le client, il vérifie que les messages n'ont pas déjà été affiché, si non les affiche et les indique comme affiché, sinon ne fait rien.

Voilà, c'est une petite réflexion rapide, qui peut peut-être (sans doute) être amélioré, mais le principe est là.

A noter aussi, ce qui serait parfait pour ton projet serait l'utilisation d'un Websocket mais c'est encore plus coton techniquement (il y a une étape de compréhension en plus).

Bon, eh bien je ne pense pas être en mesure de réaliser ce projet. Mes connaissances s'arrêtent au Html/css, donc à moins que l'un d'entre vous se dévoue pour travailler avec moi, je crains que cette idée reste au placard ! Merci à vous pour votre aide en tout cas.