Anzeigen der Nachrichtenhistorie
Sie möchten, dass Ihre Benutzer die Ereignisse in der Konversation sehen. Sie können nach der Art des Ereignisses filtern, um zu bestimmen, wie das Ereignis formatiert werden soll, damit es dem Nachrichten-Feed hinzugefügt wird. Hinzufügen eines handleEvent Funktion mit diesem Code zu 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;
}
In diesem Beispiel werden Sie die Identität des Benutzers verwenden, um zwischen den von ihm gesendeten und den von anderen Benutzern empfangenen Nachrichten zu unterscheiden, indem Sie sie in einer anderen Farbe anzeigen lassen. Erstellen Sie eine formatMessage Funktion zu verwenden, indem Sie den folgenden Code in 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 />";
}
Schließlich müssen Sie einen Ereignis-Listener für alle neu eingehenden Ereignisse einrichten. Sie können dies tun, indem Sie auf conversationEvent auf dem Client. Fügen Sie Folgendes am Ende der Datei run Funktion:
client.on("conversationEvent", (event) => {
handleEvent(event);
});
Erstellen einer webbasierten Chat-Anwendung
Erstellen einer Webanwendung, mit der sich Benutzer gegenseitig Nachrichten schicken können