Afficher l'historique des messages
Vous voulez que vos utilisateurs voient les événements dans la conversation. Vous pouvez filtrer en fonction du type d'événement pour déterminer comment formater l'événement à ajouter au flux de messages. Ajouter un handleEvent avec ce code pour chat.js:
function handleEvent(event) {
let formattedMessage;
switch (event.kind) {
case "member:invited":
formattedMessage = `${event.body.user.name} was invited.<br/>`;
break;
case "member:joined":
formattedMessage = `${event.body.user.name} joined.<br/>`;
break;
case "member:left":
formattedMessage = `${event.body.user.name} left.<br/>`;
break;
case "message:text":
const sender = {
displayName: event.from.displayName,
memberId: event.from.memberId,
userName: event.from.user.name,
userId: event.from.user.id,
};
formattedMessage = formatMessage(sender, event);
break;
}
messageFeed.innerHTML = messageFeed.innerHTML + formattedMessage;
}
Dans cet exemple, vous utiliserez l'identité de l'utilisateur pour distinguer les messages qu'il a envoyés de ceux reçus d'autres utilisateurs en les affichant dans une couleur différente. Créez un formatMessage en ajoutant le code suivant à la fonction chat.js:
function formatMessage(sender, message) {
const rawDate = new Date(Date.parse(message.timestamp));
const options = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric",
};
const formattedDate = rawDate.toLocaleDateString(undefined, options);
let text = "";
if (message.from.memberId !== myMember.id) {
text = `<span style="color:red">${sender.userName.replace(/</g,"<")} (${formattedDate}): <b>${message.body.text.replace(/</g,"<")}</b></span>`;
} else {
text = `me (${formattedDate}): <b>${message.body.text.replace(/</g,"<")}</b>`;
}
return text + "<br />";
}
Enfin, vous devez mettre en place un récepteur d'événements pour tout nouvel événement entrant. Vous pouvez le faire en écoutant conversationEvent sur le client. Ajoutez ce qui suit au bas de la page run fonction :
client.on("conversationEvent", (event) => {
handleEvent(event);
});
Création d'une application de chat en ligne
Créer une application web qui permet aux utilisateurs de s'envoyer des messages.