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 distinguir entre los mensajes enviados por él y los recibidos de otros usuarios mostrándolos en un color diferente. Cree un formatMessage 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, es necesario configurar un receptor de eventos para cualquier nuevo evento entrante. Puedes hacerlo escuchando 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
Crear una aplicación web que permita a los usuarios enviarse mensajes entre sí