cdez/CS460-Projects
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix the webclient rendering the message.

Browse source
This commit is contained in:
Charles Descamps 2025-03-28 21:16:45 -07:00
parent 4b7fe624bb
commit 1c185b309f
1 changed files with 14 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

16
chatserver/templates/index.html
View file

@ -199,8 +199,13 @@
// Listen for messages from the server // Listen for messages from the server
socket.on('message', (data) => { socket.on('message', (data) => {
const messageElement = document.createElement('div'); const messageElement = document.createElement('div');
// Create a span for the metadata (timestamp, username, chat room)
const metadataSpan = document.createElement('span');
const timestamp = data.timestamp ? `[${data.timestamp}]` : ''; const timestamp = data.timestamp ? `[${data.timestamp}]` : '';
const chatRoomInfo = data.chat_room ? `(${data.chat_room})` : ''; const chatRoomInfo = data.chat_room ? `(${data.chat_room})` : '';
metadataSpan.textContent = `${timestamp} ${data.username || 'Server'} ${chatRoomInfo}: `;
metadataSpan.style.fontWeight = 'bold'; // Optional: Make metadata bold
// Render the message as HTML using marked.js // Render the message as HTML using marked.js
const renderedMessage = marked.parse(data.message); const renderedMessage = marked.parse(data.message);
@ -208,8 +213,15 @@
// Sanitize the HTML using DOMPurify // Sanitize the HTML using DOMPurify
const sanitizedMessage = DOMPurify.sanitize(renderedMessage); const sanitizedMessage = DOMPurify.sanitize(renderedMessage);
// Set the inner HTML of the message element // Create a span for the message content
messageElement.innerHTML = `${timestamp} ${data.username || 'Server'} ${chatRoomInfo}: ${sanitizedMessage}`; const messageContentSpan = document.createElement('span');
messageContentSpan.innerHTML = sanitizedMessage;
// Append the metadata and message content to the message element
messageElement.appendChild(metadataSpan);
messageElement.appendChild(messageContentSpan);
// Append the message element to the chat div
chatDiv.appendChild(messageElement); chatDiv.appendChild(messageElement);
chatDiv.scrollTop = chatDiv.scrollHeight; // Auto-scroll to the bottom chatDiv.scrollTop = chatDiv.scrollHeight; // Auto-scroll to the bottom
}); });