In this chapter, we haven't yet picked up security. That will be covered in Chapter 9, Securing Your App with Spring Boot. For now, we need something to take its place.

As a workaround, we can introduce the concept of the user entering his or her own username and sending it with the HTTP-based request used to create the WebSocket.

To offer the user a place to enter their username, we can put this at the top of the Thymeleaf template:

    <input id="username" type="text" /> 
    <button id="connect">Connect</button> 
    <button id="disconnect" style="display: none">Disconnect</button> 

There is a both a Connect and a Disconnect button to analogously log in/log out of the WebSocket session.

Now we can wire it so that clicking the Connect button, actually creates the WebSocket connection:

    document.getElementById('connect') 
     .addEventListener('click', function () { 
       document.getElementById('connect').style.display = 'none'; 
       document.getElementById('disconnect').style.display = 'inline'; 
 
       var usernameInput = document.getElementById('username'); 
 
       document.getElementById('chatBox').style.display = 'inline'; 

This is what happens when Connect is clicked:

• The connect button is hidden while the disconnect button is shown
• We get hold of the username input
• The chatBox is switched from hidden to displayed

From here, the rest of the flow of creating a WebSocket is followed, including the extra user parameter supplied by the userInput input as we subscribe for /topic/chatMessage.new:

    inboundChatMessages = 
      new WebSocket( 
        'ws://localhost:8200/topic/chatMessage.new?user=' 
        + usernameInput.value); 
    inboundChatMessages.onmessage = function (event) { 
      console.log('Received ' + event.data); 
      var chatDisplay = document.getElementById('chatDisplay'); 
      chatDisplay.value = chatDisplay.value + event.data + '
'; 
    }; 

This preceding subscription code for incoming chat messages works as follows:

• We again create a JavaScript WebSocket, but it has an extra query argument, user, populated with the usernameInput value
• The route we subscribe to is /topic/chatMessage.new, the same one that OutboundChatService publishes to
• The onmessage handler is assigned a function that updates the chatDisplay textarea with the new event's data

To wrap things up, we add the following event listener in case Disconnect is clicked:

    document.getElementById('disconnect') 
     .addEventListener('click', function () { 
       document.getElementById('connect').style.display = 'inline'; 
       document.getElementById('disconnect').style.display = 'none'; 
       document.getElementById('chatBox').style.display = 'none'; 
 
       if (newComments != null) { 
         newComments.close(); 
       } 
       if (outboundChatMessages != null) { 
         outboundChatMessages.close(); 
       } 
       if (inboundChatMessages != null) { 
         inboundChatMessages.close(); 
       } 
    }); 

This last code nicely does the following things:

• It hides the Disconnect button and the chat box while showing the Connect button
• It closes all the WebSockets