WebSocket Chat Application: User Not Connecting and Messages Not Displaying

Question

I am working on a WebSocket chat application using Spring Boot and STOMP over SockJS. I am facing an issue where the user is not being added to the chat, and the messages are not being displayed. The error message remains visible, indicating that the connection is not established properly.

Here is the relevant code for the client-side JavaScript and the Spring Boot WebSocket controller:

Java Script Code

var socket = new SockJS('/ws');
var stompClient = Stomp.over(socket);

stompClient.connect({}, onConnected, onError);

function onConnected() {
    // Subscribe to the Public Topic
    stompClient.subscribe('/topic/public', onMessageReceived);

    // Tell your username to the server
    stompClient.send("/app/chat.addUser",
        {},
        JSON.stringify({sender: 'Username', type: 'JOIN'})
    );

    document.querySelector('.connecting').classList.add('hidden');
}

function onError(error) {
    document.querySelector('.connecting').textContent = 'Could not connect to WebSocket server. Please refresh this page to try again!';
    document.querySelector('.connecting').style.color = 'red';
}

function sendMessage(event) {
    var messageContent = document.querySelector('#message').value.trim();

    if(messageContent && stompClient) {
        var chatMessage = {
            sender: 'Username', 
            content: messageContent,
            type: 'CHAT'
        };

        stompClient.send("/app/chat.sendMessage", {}, JSON.stringify(chatMessage));
        document.querySelector('#message').value = '';
    }
    event.preventDefault();
}

function onMessageReceived(payload) {
    var message = JSON.parse(payload.body);

    var messageElement = document.createElement('li');

    if(message.type === 'JOIN') {
        messageElement.classList.add('event-message');
        message.content = message.sender + ' joined!';
    } else if (message.type === 'LEAVE') {
        messageElement.classList.add('event-message');
        message.content = message.sender + ' left!';
    } else {
        messageElement.classList.add('chat-message');

        var avatarElement = document.createElement('i');
        var avatarText = document.createTextNode(message.sender[0]);
        avatarElement.appendChild(avatarText);
        messageElement.appendChild(avatarElement);

        var usernameElement = document.createElement('span');
        var usernameText = document.createTextNode(message.sender);
        usernameElement.appendChild(usernameText);
        messageElement.appendChild(usernameElement);
    }

    var textElement = document.createElement('p');
    var messageText = document.createTextNode(message.content);
    textElement.appendChild(messageText);

    messageElement.appendChild(textElement);

    document.querySelector('#messageArea').appendChild(messageElement);
    document.querySelector('#messageArea').scrollTop = document.querySelector('#messageArea').scrollHeight;
}

document.querySelector('#messageForm').addEventListener('submit', sendMessage, true);

Websocket Controller:

@Controller
public class WebSocketController {

    private static final Logger logger = LoggerFactory.getLogger(WebSocketController.class);

    @Autowired
    private SimpMessagingTemplate messagingTemplate;

    @Autowired
    private MessageRepository messageRepository;

    @MessageMapping("/chat.sendMessage")
    public void sendMessage(@Payload Message message) {
        try {
            Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
            String currentUserName = authentication.getName();
            message.setSender(currentUserName); // Set sender to logged-in user

            logger.info("Sending message to recipient: {}", message.getRecipient());
            messageRepository.save(message); // Save message to database
            messagingTemplate.convertAndSendToUser(message.getRecipient(), "/queue/messages", message);
        } catch (Exception e) {
            logger.error("Error sending message", e);
        }
    }

    @MessageMapping("/chat.addUser")
    public void addUser(@Payload Message message, SimpMessageHeaderAccessor headerAccessor) {
        try {
            Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
            String currentUserName = authentication.getName();
            message.setSender(currentUserName); // Set sender to logged-in user

            logger.info("Adding user: {}", message.getSender());
            headerAccessor.getSessionAttributes().put("username", message.getSender());
            messagingTemplate.convertAndSend("/topic/public", message);
        } catch (Exception e) {
            logger.error("Error adding user", e);
        }
    }
}

HMTL-Code:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <title>Spring Boot WebSocket Chat Application</title>
  <link rel="stylesheet" href="css/MessageWindowStyle.css" />
</head>
<body>
<noscript>
  <h2>Sorry! Your browser doesn't support Javascript</h2>
</noscript>

<div id="chat-page">
  <div class="chat-container">
    <div class="chat-header">
      <h2>Verkaufschat </h2>
    </div>
    <div class="connecting">
      Connecting...
    </div>
    <ul id="messageArea">
    </ul>
    <form id="messageForm" name="messageForm">
      <div class="form-group">
        <div class="input-group clearfix">
          <input type="text" id="message" placeholder="Type a message..." autocomplete="off" class="form-control"/>
          <button type="submit" class="primary">Send</button>
        </div>
      </div>
    </form>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.4/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
<script src="JS/MessageHandler.js"></script>
</body>
</html>```

Issues:

1. The user does not seem to connect properly as the error Message "Could not connect to WebSocket server. Please refresh this page to try again!" is displayed in the chat window.
2. Messages are not being displayed in the chat area.

Steps I've Tried:

1. Verified that the fetchUsername function correctly retrieves usernames from the server.
2. Confirmed that the backend controller methods are being invoked.

Questions:

1. What could be causing the user not to connect properly and the error?

Any help or suggestions would be greatly appreciated!