11527 sujets

JavaScript, DOM et API Web HTML5

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 côté 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",
});
}
})

Modifié par parsimonhi (10 Dec 2024 - 11:18)
Modérateur
Bonjour,

Déjà, il manque un ">" après "required" dans le html du <textarea>.

À corriger avant d'aller plus loin.

Amicalement,
Meilleure solution
Bonjour Parsimonhi

je l'ai rajouté

<div class="mb-3">
                    <textarea
                      class="form-control"
                      id="postAllprofilesMessage"
                      name="message"
                      rows="3"
                      placeholder="Ecrire un message...."
                      required
                    ></textarea>

Par contre j'ai toujours le même problème
Modifié par gcyrillus (10 Dec 2024 - 19:28)
Modérateur
Bonjour,

1) C'est quoi côté serveur ? Node.js ?

2) Et est-ce que tu testes sur la même machine que celle où est le serveur, ou bien le serveur est-il une autre machine ?

EDIT: et pour tes messages d'erreurs, ils commencent tous par la même phrase. Mets des petites différences (par exemple "Erreur 1 lors de la publication des messages", "Erreur 2 lors de la publication des messages", etc) pour savoir quelle ligne de code a provoqué l'emission d'une erreur.

Amicalement,
Modifié par parsimonhi (13 Dec 2024 - 19:06)