Partage
  • Partager sur Facebook
  • Partager sur Twitter

chat en temp réel dans espace membre php+mysql

Sujet résolu
4 mai 2016 à 16:19:44

bonjour

je viens de finir le chapitre sur "concevez votre site avec php et mysql" sur openclassrooms

je me suis fait un espace membre, que j'ai essayer d'améliorer avec un système de messagerie privée entre membres.

bien évidemment, chaque message ne s'affiche sur l'ordi de l'autre membre, que lorsqu'il actualise sa page. c'est plutôt limite!!!!

j'ai donc regarder du coté de node.js, mai j'ai encore pas tout compris, j'arrive à faire un chat (en local, en lançant mon appli dans mon terminal : node app.js), mais je n'imagine pas comment écouter mon server php qui est hébergé sur un serveur mutualité. (enfin je patauge), et surtout comment couplé node.js avec mon appli php et ma base de données mysql.

est ce que node.js est une bonne solution à mon appli?

merci de votre aide.

sandrine

  • Partager sur Facebook
  • Partager sur Twitter
4 mai 2016 à 16:36:33

Salut,

Il me semble (pas sûr) que NodeJS dois être installer sur la machine, donc type Serveur dédié ou vps

  • Partager sur Facebook
  • Partager sur Twitter
4 mai 2016 à 16:52:16

Je vais te donner une astuce qui te permettra de rafraichir automatiquement le contenu d'une "div" en faisant appel à un fichier PHP (qui peut tout à fait récupérer les messages et envoyer la réponse).

1. Préparation de la "zone de réception"

Tu l'auras compris, pour pouvoir modifier un morceau d'une page web déjà chargée, il va falloir prévoir un endroit où les informations récupérées pourront atterrir. Le plus simple, c'est de prévoir une "div" avec une propriété "id" définie, afin qu'on puisse par la suite la "cibler", c'est à dire écrire du code qui ne va s'adresser qu'à elle pour la modifier.

<div id="discussion"></div>

2. Préparation des outils nécessaires pour que la suite soit possible

On a désormais un endroit où envoyer des informations. Il faut donc avoir l'outil qui va nous permettre de récupérer les informations à afficher. Pour cela on va utiliser un peu de JavaScript, qui va demander au navigateur de l'utilisateur de poser une question au serveur (en PHP), d'attendre la répondre, puis de l'afficher à l'endroit où on le souhaite.

Pour que ce soit plus simple et facile, on utilise jQuery, une librairie qu'il va donc falloir charger avant de l'utiliser si on veut qu'elle fonctionne :

Quelque part dans la balise HTML "head" de ta page, il faut donc prévoir :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

3. Le code qui va permettre d'interroger le serveur en PHP

Maintenant que jQuery est chargé, on peut s'en servir. Je te propose donc ce code tout simple, que tu peux mettre toute à la fin de la partie HTML de ta page :

<script type="text/javascript">

var auto_refresh = setInterval(
function ()
{$('#discussion').load('lapagedemarequete.php').fadeIn("slow");}, 3000); 
// Le réglage est ici sur 3000 milliseconds soit 3 secondes

</script>

Quelques éléments d'explication :

  • On créé un script javascript qui va être exécuté toutes les X millisecondes. Ici, c'est 3000 qui est indiqué mais on met ce qu'on veut.
  • Attention toutefois à ne pas choisir un délai trop court pour deux raisons : d'une part parce que chaque utilisateur qui va être sur sa page membre à un instant T sera à l'origine de centaines de requêtes vers ton serveur PHP (1 pour 3 secondes, 10 pour 30 secondes, 20 par minutes, 200 pour 10 minutes, 1200 pour une heure... à multiplier par le nombre d'utilisateurs concernés) et d'autre part parce que si la requête est demandée avec un intervalle trop rapproché, alors elle ne laissera pas le temps au serveur d'envoyer la réponse...
  • La partie $('#discussion') sert à cibler la div qui a été mise en place pour recevoir le contenu de tes discussions
  • Tu auras deviné que lapagedemarequete.php est l'adresse du script PHP qui sera chargé d'aller chercher les discussions et de les afficher
  • fadeIn("slow") est très optionnel, c'est la manière donc l'affichage doit se modifier quand il se modifie.

4. Le code du fichier PHP qui sera chargé de fabriquer la réponse

Tu peux y mettre tout ce que tu veux à l'intérieur... la seule contrainte est de faire en sorte que ce fichier une fois exécuté affiche bien la réponse. (Quand on fait un copier/coller de la requête SQL qu'on a prévu pour l'affichage "normal" de la page, on peut parfois oublier qu'on envoyait le résultat dans une variable au lieu de faire un "echo" par exemple). 

5. Tout de même prévoir un "plan B" si le javascript ne fonctionne pas

Je te recommande de faire en sorte que le code de ton espace membre affiche lui-même pour une première fois le contenu qui doit être affiché dans l'espace de discussion, accompagné d'un texte du style "Si vous voyez ce texte affiché, la mise à jour automatique de cette fenêtre de discussion est désactivée. Merci de réactualiser la page pour afficher les nouveaux messages". (Comme ça doit être le cas actuellement, il te suffit juste d'enfermer l'endroit où arrivent les messages dans une DIV avec le nom choisi pour pouvoir la cibler ensuite).

Si tout fonctionne normalement, dès qu'on atteint 3 secondes (dans notre cas de figure), le script Javascript prend le relais et remplace le contenu de ta div par le résultat de sa propre requête (qui n'affichera donc pas cet "avertissement"). Par contre, si le javascript ne s'active pas, l'utilisateur aura quand même les messages, et saura qu'il faut actualiser la page pour les mettre à jour.

6. Si on veut être perfectionniste...

Il ne faut pas hésiter à doter le script PHP qui répond à la demande javascript des mêmes mécanismes de protection qu'une page du site (par exemple vérifier que la session est démarrée et que l'utilisateur est bien connecté). En effet, n'importe quel utilisateur ayant accès à la page de l'espace membre peut en voir le code Javascript, et en déduire qu'il existe une page lapagedemarequete.php

Rien ne l'empêche alors de l'appeler directement par son adresse. Si aucune protection n'est prévue (par exemple la vérification de la session), alors n'importe qui ayant cette adresse pourra l'appeler dans son navigateur et alors avoir à l'écran le même résultat que ce qui sera affiché dans la DIV. (Certes, ce n'est pas toute la page de l'espace membre, mais une discussion entre membres est censée rester entre membres...)

Voilà... Bons tests. Je reste disponible si tu rencontres des soucis ou si j'ai pas été clair sur certaines choses, ce qui est fort possible :D

-
Edité par Nicolas B 15 mai 2016 à 10:08:25

  • Partager sur Facebook
  • Partager sur Twitter
Nicolas - Développeur PHP qui bricole pas mal, utilisant Bootstrap, Materialize, MySQL et quelques astuces piochées par ci par là. Codeigniter a changé ma vie de codeur :D
5 mai 2016 à 8:56:54

Coll

merci pour ta réponse très detailler

je teste ceci ce matin

par contre si je comprend, on ne peux pas faire de websocket sur un serveur mutualisé?

  • Partager sur Facebook
  • Partager sur Twitter
5 mai 2016 à 14:23:00

Aucune idée... je te donne une méthode que j'ai déjà testée... Il y en a sûrement de nombreuses autres...
  • Partager sur Facebook
  • Partager sur Twitter
Nicolas - Développeur PHP qui bricole pas mal, utilisant Bootstrap, Materialize, MySQL et quelques astuces piochées par ci par là. Codeigniter a changé ma vie de codeur :D
5 mai 2016 à 15:21:02

encore merci pour ton aide, ça fonctionne, super!!!

merci encore

sandrine:ange:

  • Partager sur Facebook
  • Partager sur Twitter
5 octobre 2018 à 6:14:37

Bonsoir, 

J'ai ajouté une petite optimisation, car il etait impossible de regarder l'historique des messages (avec un scroll) quand celui ci s'actualise toutes les 2secondes:

Un deuxieme fichier php (apellé toutes les 1secondes) qui compare le dernier message de la page avec le dernier message en date dans la bdd. Si celui ci est different, le fichier 'lapagedemarequete.php' est rechargé

  • Partager sur Facebook
  • Partager sur Twitter
13 janvier 2019 à 16:31:33

Patoumpalou a écrit:

Bonsoir, 

J'ai ajouté une petite optimisation, car il etait impossible de regarder l'historique des messages (avec un scroll) quand celui ci s'actualise toutes les 2secondes:

Un deuxieme fichier php (apellé toutes les 1secondes) qui compare le dernier message de la page avec le dernier message en date dans la bdd. Si celui ci est different, le fichier 'lapagedemarequete.php' est rechargé

Bien réfléchi sur ça, mais moi j'suis actuellement à ce même stade, j'arrrive pas à scroller pour voir l'historique vu que la page se charge toutes les 3 secondes.

Est-ce que tu peux montrer ton code concernat ta soulution.

Merci d'avance.

  • Partager sur Facebook
  • Partager sur Twitter
20 janvier 2020 à 17:20:46

bonjour suite au message que j'ai lu en haut j'ai le meme problème actuellement sauf j'ai essayer le code (Nicolas B ) haut moi ça marche toujours pas si quelquan peut me donner un coup de main merci

  • Partager sur Facebook
  • Partager sur Twitter
Agentcherif
25 mai 2023 à 16:14:57 - Message modéré pour le motif suivant : Message complètement hors sujet


25 mai 2023 à 16:22:54

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.

Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)