Partage
  • Partager sur Facebook
  • Partager sur Twitter

Publier un message sur tous les profils

Javascript, HTML, serveur

    8 décembre 2024 à 16:45:00

    Bonjour à tous
    Je dois créer un projet de réseau social équivalent à facebook et je suis en train de publier un message sur le profil de l'administrateur, sur celui de son ami ainsi que sur tous les profils en utilisant boostrap 5 et suite à des consignes qu'on me demande de faire. Là où j'aurai besoin de votre aide c'est lorsqu'a titre d'exemple je veux publier dans le navigateur un "bonjour" sur tous les profils, je reçois un message d'erreur m'indiquant Erreur lors de la publication du message : "Erreur lors de la publication du message" ainsi que POST http://localhost:3000/api/postAllProfiles 500 (Internal Server Error). Je ne sais pas si ça provient de mon scripts en lui même ou bien côté serveur. Pouvez vous m'aider à trouver la solution à mon problème SVP? Merci à vous tous. Voici en premier lieu mon code html pour cette partie 
    <!--publication d'un message sur tous les profils de l'administrateurs-->
    <div class="container mt-5">
    <div class="row">
    <div class="col-md-8 offset-md-2">
    <div class="card">
    <div class="card-body">
    <h5>Publication de message sur tous les profils</h5>
    <form id="postAllProfilesForm">
    <div class="mb-3">
    <textarea
    class="form-control"
    id="postAllprofilesMessage"
    name="message"
    rows="3"
    placeholder="Ecrire un message...."
    required
    
    </textarea>
    </div>
    <button type="submit" class="btn btn-primary">Publier</button>
    </form>
    </div>
    </div>
    </div>
    </div>
    </div>
    <!--Affichage des messages publiés sur tous les profils de l'administrateur-->
    <div class="container mt-5">
    <div class="row">
    <div class="col-md-8 offset-md-2">
    <div class="card">
    <div class="card-body">
    <h5 class="card-title">
    Messages publiés sur tous les profils
    </h5>
    <div id="allProfilesMessagesList" class="list-group"></div>
    </div>
    </div>
    </div>
    </div>
    </div>
    Puis en javascript
    // Formulaire pour publier un message sur tous les profils de l'administrateur.
    
    document.addEventListener("DOMContentLoaded", function () {
    const postAllProfilesForm = document.getElementById("postAllProfilesForm");
    const allProfilesMessagesList = document.getElementById(
    "allProfilesMessagesList"
    );
    
    postAllProfilesForm.addEventListener("submit", async function (event) {
    event.preventDefault();
    const formData = new FormData(postAllProfilesForm);
    const payload = Object.fromEntries(formData.entries());
    
    try {
      const response = await fetch(
        "http://localhost:3000/api/postAllProfiles",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${localStorage.getItem("token")}`,
          },
          body: JSON.stringify(payload),
        }
      );
      const data = await response.json();
      if (response.ok) {
        alert("Message publié avec succès sur tous les profils !");
        postAllProfilesForm.reset();
        loadAllProfilesMessages();
      } else {
        alert("Erreur lors de la publication du message : " + data.message);
      }
    } catch (error) {
      console.error("Erreur lors de la publication du message : ", error);
      alert("Erreur lors de la publication du message : " + error.message);
    }
    });
    
    // Charger les messages lors du chargement de la page
    async function loadAllProfilesMessages() {
    try {
    const response = await fetch(
    "http://localhost:3000/api/allProfilesMessages",
    {
    method: "GET",
    headers: {
    "Content-Type": "application/json",
    Authorization: Bearer ${localStorage.getItem("token")},
    },
    }
    );
    if (!response.ok) {
    throw new Error("Problème pour obtenir les messages");
    }
    const data = await response.json();
    allProfilesMessagesList.innerHTML = ""; // Vider la liste des messages avant de remplir la liste avec les nouveaux messages
    data.messages.forEach((message) => {
    const li = document.createElement("li");
    li.classList.add("list-group-item");
    li.textContent = message.content;
    allProfilesMessagesList.appendChild(li);
    });
    } catch (error) {
    console.error("Erreur lors de la récupération des messages : ", error);
    alert("Erreur lors de la récupération des messages : " + error.message);
    }
    }
    
    // Charger les messages lors du chargement de la page
    loadAllProfilesMessages();
    }); 
    Et sur Serveur 
    / Route pour que l'administrateur puisse publier un message sur tous les profils
    
    app.post("/api/postAllProfiles", async (req, res) => {
    try {
    const { content } = req.body;
    const users = await User.find();
    
    const messages = users.map((user) => ({
      content,
      sender: req.user.id,
      recipient: user._id,
    }));
    await FriendMessage.insertMany(messages);
    res.json({ success: true, message: "Message publié sur tous les profils" });
    } catch (err) {
    console.error("Erreur lors de la publication du message :", err);
    res.status(500).json({
    success: false,
    message: "Erreur lors de la publication du message",
    });
    }
    });
    
    // Route pour récupérer tous les messages publiés
    
    app.get("/api/messages", async (req, res) => {
    try {
    const messages = await messages.find().sort({ createdAt: -1 });
    res.json({ success: true, messages });
    } catch (err) {
    console.error("Erreur lors de la récupération des messages :", err);
    res.status(500).json({
    success: false,
    message: "Erreur lors de la récupération des messages",
    });
    }
    });
    
    // Route pour récupérer tous les messages publiés sur tous les profils
    
    app.get("/api/allProfilesMessages", async (req, res) => {
    try {
    const messages = await FriendMessage.find().sort({ date: -1 });
    res.json({ success: true, messages });
    } catch (err) {
    console.error("Erreur lors de la récupération des messages :", err);
    res.status(500).json({
    success: false,
    message: "Erreur lors de la récupération des messages",
    });
    }
    });

    • Partager sur Facebook
    • Partager sur Twitter
      9 décembre 2024 à 17:23:10

      Certainement côté serveur puisque ça passe dans le `catch`.

      Tu as un log de l'erreur `err` dans la console du serveur, je pense que cela va t'aider à trouver ce qui ne va pas.

      • Partager sur Facebook
      • Partager sur Twitter
        10 décembre 2024 à 8:50:05

        Bonjour Ninjavascript

        Oui effectivement mais là dessus je suis bloqué. Je n'ai pas trouvé de solution. T'en aurais une pour m'aider?

        Merci

        • Partager sur Facebook
        • Partager sur Twitter
          13 décembre 2024 à 13:56:28

          Bonjour à tous


           Dans le navigateur quand j'essaie de publier un "Bonjour" j'ai un message d'erreur m'indiquant POST http://localhost:3000/api/postAllProfiles 403 (Forbidden)
          (anonymes) et Erreur lors de la publication du message : Error: Erreur lors de la publication du message
          at HTMLFormElement.<anonymous. Apparemment mon erreur proviendrait côté scripts.js sur cette partie

          // Formulaire pour publier un message sur tous les profils de l'administrateur.
          document.addEventListener("DOMContentLoaded", function () {
          const postAllProfilesForm = document.getElementById("postAllProfilesForm");
          const allProfilesMessagesList = document.getElementById(
          "allProfilesMessagesList"
          );
          postAllProfilesForm.addEventListener("submit", async function (event) {
          event.preventDefault();
          const message = document.getElementById("postAllprofilesMessage").value;
          try {
          const response = await fetch(
          "http://localhost:3000/api/postAllProfiles",
          {
          method: "POST",
          headers: {
          "Content-Type": "application/json",
          Authorization: Bearer ${localStorage.getItem("token")},
          },
          body: JSON.stringify({ content: message }),
          }
          );
          if (!response.ok) {
          throw new Error("Erreur lors de la publication du message");
          }
          const data = await response.json();
          alert("Message publié avec succès sur tous les profils !");
          postAllProfilesForm.reset();
          loadAllProfilesMessages();
          } catch (error) {
          console.error("Erreur lors de la publication du message : ", error);
          alert("Erreur lors de la publication du message : " + error.message);
          }
          });

          mais je n'arrive pas à trouver ce qui cloche. Pouvez vous m'aider svp à trouver la solution? Merci à tous.


          • Partager sur Facebook
          • Partager sur Twitter

          Publier un message sur tous les profils

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          • Editeur
          • Markdown