Hello,

Je n'arrive pas à formuler correctement ma question et cela me freine dans mes recherches pour me documenter sur le sujet.

En faite, j'aimerais savoir, prenons un contexte quelconque un chat sur mon forum (le réaliser de A à Z).

Je stock mes messages dans une base de données, cependant si nous souhaitons voir les nouveaux messages, il faut rafraîchir la page. Et je n'aimerais pas que mes utilisateurs doivent recharger la page toutes les minutes pour voir s'il y a un nouveau message.

On peut prendre https://web.whatsapp.com/ comme exemple, ou bien http://www.chatango.com/

Comment est-ce que cela fonctionne ? Comment ce procédé s'appelle ?

Moi je pensais faire une manipulation directe avec la base de données via JavaScript mais il semble qu'on ne peut pas d'après mes recherches.

Merci beaucoup d'avance et bonne journée !

Bonjour,

J'imagine que tu utilises PHP comme langage de développement ?

Pour ce qui est chat en temps réel, tu verras que le terme de sockets revient souvent. Mais sinon, tu peux utiliser des requêtes AJAX pour mettre à jour tes données sans rechargement de la page.

Je pense qu'avec ces deux termes, tu devrais trouver ce que tu cherches.

Je connais AJAX JS PHP HTML CSS, c'est juste que je vois mal comment avec des requêtes AJAX, je vais afficher sans rafraîchir la page pour avoir les messages des autres.. Il faut une méthode planifié qui fait une requête ajax get d'une page qui stock les messages ?

-
Edité par ShidomaruLega 21 juillet 2017 à 19:47:13

Tu pourrais t'inspirer de cette trame pour comprendre un peu comment faire pour créer le dynamisme d'un chat instantané :

"use strict";

const get = (url, data) => {
  // La fonction de récupération des messages en base de données
};

const post = (url, data) => {
  // La fonction d'envoi des messages en base de données
};

// Exécute les instructions lorsque la page a fini de charger
window.addEventListener("load", () => {
  // Le formulaire contenant input[name="message"] et input[type="submit"]
  const form = document.forms.namedItem("chatForm");
  // Récupère les message du chat toutes les secondes
  setTimeout(() => {
    get("http://local.dev/chat");
  }, 1000);
  form.addEventListener("submit", event => {
    // Empêche le formulaire de recharger la page
    event.preventDefault();
    // Le contenu du message à envoyer
    const message = event.target.message.value;
    // On envoi le message à enregistrer en base de données
    post("http://local.dev/chat", message);
    // On récupère tout de suite les message pour ne pas qu'il y ait de délai d'attente détectable
    get("http://local.dev");
  });
});

L'avantage, c'est que si tu connais déjà le JavaScript et l'AJAX, tu ne devrais pas trop t'y perdre et en réalité c'est très simple à mettre en place. L'inconvénient c'est que ce n'est pas optimisé vraiment optimisé (même si le moteur de rendu le fait en réalité pour toi) au niveau performance, de la bande passante et de la mémoire du fait des appels inutiles qui seront fait (même si personne n'envoi de message mais que tout le monde est connecté).

La clé dans ce modèle c'est de bien séparer la fonction qui va venir récupérer les messages de la base de données de celle qui va envoyer les données, sinon tu te retrouveras avec du code en doublon et difficilement lisible. En parlant de lisibilité, si tu t'es intéressé aux promesses, et que tu utilises déjà un environnement de développement sous Node, tu peux t'aider du module Axios qui te permet d'utiliser les appels asynchrones très facilement.

-
Edité par Walter O'Brien 21 juillet 2017 à 21:02:06

C'est vachement intéressant, merci beaucoup

Cependant c'est quoi ce 

"use strict";

À la première ligne :x

-
Edité par ShidomaruLega 22 juillet 2017 à 11:14:32

ShidomaruLega a écrit:

C'est vachement intéressant, merci beaucoup

Cependant c'est quoi ce 

"use strict";

À la première ligne :x

-
Edité par ShidomaruLega il y a environ 1 heure

Je t'invite à consulter cette page : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Strict_mode

-
Edité par Raulel 22 juillet 2017 à 13:31:33

Merci beaucoup, je suis aux anges de découvrir autant de chose intéressante 

Bonjour, si tu tournes en Php, regardes du côté de Rachet qui te permet de gérer les sockets. L'avantage des sockets, c'est que tu renvoies les données qu'il faut et quand il le faut. En effet, le plus gros défaut d'une boucle en Ajax, c'est que tu fais vite monter la charge sur un serveur.

Intéressant, merci

Walter O'Brien a écrit:

Tu pourrais t'inspirer de cette trame pour comprendre un peu comment faire pour créer le dynamisme d'un chat instantané :

"use strict";

const get = (url, data) => {
  // La fonction de récupération des messages en base de données
};

const post = (url, data) => {
  // La fonction d'envoi des messages en base de données
};

// Exécute les instructions lorsque la page a fini de charger
window.addEventListener("load", () => {
  // Le formulaire contenant input[name="message"] et input[type="submit"]
  const form = document.forms.namedItem("chatForm");
  // Récupère les message du chat toutes les secondes
  setTimeout(() => {
    get("http://local.dev/chat");
  }, 1000);
  form.addEventListener("submit", event => {
    // Empêche le formulaire de recharger la page
    event.preventDefault();
    // Le contenu du message à envoyer
    const message = event.target.message.value;
    // On envoi le message à enregistrer en base de données
    post("http://local.dev/chat", message);
    // On récupère tout de suite les message pour ne pas qu'il y ait de délai d'attente détectable
    get("http://local.dev");
  });
});

L'avantage, c'est que si tu connais déjà le JavaScript et l'AJAX, tu ne devrais pas trop t'y perdre et en réalité c'est très simple à mettre en place. L'inconvénient c'est que ce n'est pas optimisé vraiment optimisé (même si le moteur de rendu le fait en réalité pour toi) au niveau performance, de la bande passante et de la mémoire du fait des appels inutiles qui seront fait (même si personne n'envoi de message mais que tout le monde est connecté).

La clé dans ce modèle c'est de bien séparer la fonction qui va venir récupérer les messages de la base de données de celle qui va envoyer les données, sinon tu te retrouveras avec du code en doublon et difficilement lisible. En parlant de lisibilité, si tu t'es intéressé aux promesses, et que tu utilises déjà un environnement de développement sous Node, tu peux t'aider du module Axios qui te permet d'utiliser les appels asynchrones très facilement.

-
Edité par Walter O'Brien 21 juillet 2017 à 21:02:06

Je me demande actuellement, est-ce possible avec deux requêtes AJAX sur ma page chat.php

Une requête POST et une autre requête GET, je peux faire et comment la distinction des résultats à rendre en fonction du type de requête sur ma page chat.php ? 

-
Edité par ShidomaruLega 23 juillet 2017 à 16:46:29