Mostrar el historial de mensajes
Quieres que tus usuarios vean los eventos en la Conversación. Puedes filtrar en función del tipo de evento para determinar cómo dar formato al evento que se añadirá al feed de mensajes. Añadir un handleEvent con este código para 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;
}
En este ejemplo, utilizarás la identidad del usuario para diferenciar los mensajes enviados por él de los recibidos de otros usuarios, mostrándolos en un color diferente. Crea un formatMessage función para ello, añadiendo el siguiente código a 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 />";
}
Por último, debes configurar un detector de eventos para cualquier evento nuevo que se produzca. Para ello, puedes detectar conversationEvent en el cliente. Añada lo siguiente al final del run función:
client.on("conversationEvent", (event) => {
handleEvent(event);
});
Crear una aplicación de chat basada en web
Crea una aplicación web que permita a los usuarios enviarse mensajes entre sí.