Receive and Display Messages in the Browser

The server now broadcasts messages using the chat:message event.

The browser needs to listen for that event and update the message container.

Create a reusable function that generates a message element.

Use textContent instead of innerHTML to display user-generated content safely. This prevents message content from being interpreted as HTML.

Prevent Cross-Site Scripting

Never insert untrusted message content directly through innerHTML. Use textContent or a trusted HTML sanitization strategy.

Receive Chat Messages

const messagesContainer = document.getElementById('messages');

socket.on('chat:message', (chatMessage) => {
  const messageElement = document.createElement('div');
  messageElement.className = 'message';

  const usernameElement = document.createElement('strong');
  usernameElement.textContent = `${chatMessage.username}: `;

  const contentElement = document.createElement('span');
  contentElement.textContent = chatMessage.message;

  const timeElement = document.createElement('small');
  timeElement.textContent = ` ${new Date(chatMessage.timestamp).toLocaleTimeString()}`;

  messageElement.append(
    usernameElement,
    contentElement,
    timeElement
  );

  messagesContainer.appendChild(messageElement);
  messagesContainer.scrollTop = messagesContainer.scrollHeight;
});

socket.on('chat:error', (error) => {
  console.error(error.message);
  alert(error.message);
});

Listens for incoming chat messages, creates DOM elements safely, displays the username and message, and scrolls the chat container to the latest message.

Key Takeaways

socket.on() receives server events.
DOM elements can be created dynamically to display messages.
Use textContent for untrusted user-generated content.

Receive and Display Messages in the Browser

STAY UPDATED WITH BYTES!