With everything configured on the server, it's time to wire things up in the client. Because JavaScript has a WebSocket API, and we aren't using subprotocols such as Simple (or Streaming) Text Oriented Message Protocol (STOMP), we don't need any extra libraries.

So we can augment our Thymeleaf template, index.html. It's important to point out that our template is in the images microservice, not the chat microservice we just created. Add the following chunk of code toward the bottom of the HTML:

    <script th:inline="javascript"> 
        /*<![CDATA[*/ 
        (function() { 
            ... custom JavaScript code here... 
        })(); 
        /*]]>*/ 
    </script> 

This preceding chunk of code can be explained as follows:

• The HTML <script> tag combined with th:inline="javascript" allows Thymeleaf to process it.
• To avoid HTML parsing in various browsers as well as our IDE, the entire code is wrapped with CDATA tags.
• To ensure our JavaScript code doesn't litter the global namespace, we have enclosed it in an immediately-invoked function expression (IIFE) (function() { /* code */ })();. The code inside this block cannot be reached from anywhere outside, and this is a Good Thing™. There is no chance we'll run into anyone else's variables without deliberate action.

To repeat this point--we write any JavaScript used to send and receive messages over the WebSocket in the images microservice. That's because it's where our Thymeleaf template is served from. To actually send and receive WebSocket messages, it will connect to the chat microservice.

To subscribe to WebSocket messages, we need to subscribe as follows:

    var socket = new WebSocket(
      'ws://localhost:8200/topic/comments.new'); 
    socket.onopen = function(event) { 
      console.log('Connected to chat service!'); 
      console.log(event); 
    } 
    socket.onmessage = function(event) { 
      console.log('Received ' + event.data + '!'); 
      var parsedMessage = JSON.parse(event.data); 
      var ul = document.getElementById( 
        'comments-' + parsedMessage.imageId); 
      var li = document.createElement('li'); 
      li.appendChild( 
        document.createTextNode(parsedMessage.comment)); 
      ul.appendChild(li); 
    } 

The last code can be described as follows:

• We start by creating a WebSocket connection at ws://localhost:8200/topic/comments.new.
• With a JavaScript WebSocket object assigned to our socket variable, we then assign event handlers to onopen and onmessage.
• The onopen handler is processed when a connection is first opened on the server. In this case, it merely logs that we have connected.
• The onmessage handler is processed everytime a message is issued from the server. In this case, we log the event's data, parse it (assuming it's JSON), construct an HTML LI, and append it to the page's already existing UL based on the comment's imageId.