Mostrar o histórico de mensagens
Você quer que seus usuários vejam os eventos na Conversação. É possível filtrar com base no tipo de evento para determinar como formatar o evento a ser adicionado ao feed de mensagens. Adicione um handleEvent função com 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;
}
Neste exemplo, você usará a identidade do usuário para diferenciar as mensagens enviadas por ele das recebidas de outros usuários, exibindo-as em uma cor diferente. Crie um formatMessage função para isso, adicionando o seguinte 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 fim, é preciso configurar um ouvinte de eventos para quaisquer novos eventos recebidos. Você pode fazer isso monitorando conversationEvent no cliente. Adicione o seguinte ao final do arquivo run função:
client.on("conversationEvent", (event) => {
handleEvent(event);
});
Criação de um aplicativo de bate-papo na web
Crie um aplicativo web que permita que os usuários troquem mensagens entre si