Clustering WebSockets on Wildfly

Architecture set-up

1. We only need to expose the public IP address of the httpd server, thus we don't need to get a public IP for any of the WildFly instances.
2. We can add or remove more WildFly servers to the cluster if needed and not have to worry about the public facing IP address of the application.
3. Since there is one application running, we don't need to run the server in domain mode, and standalone is sufficient.

WildFly clustering configuration

• On EC2, and other similar cloud providers, UDP multicast is disabled. Enabling multicast on a public cloud would mean a significantly higher number of messages being sent across the cloud infrastructure, resulting in a large performance hit to the service being provided. As a result, for the JGroups configuration on WildFly, we will use the TCP stack by default, and configure TCPPING.
• To configure TCPPING, we would need to add in the IP addresses of the Wildfly instances that will be present on start-up. This way we can allow for members to join the cluster. We also specify the port to be 7600.
• Finally, add in the number of initial members to 2.

WebSocket application

<!-- Input form -->
<form>
<fieldset>
<label>Store:</label>
<inputid="putKey"type="text">
<inputid="putValue"type="text">
<inputtype="submit"id="store"value="StoreMe">
</fieldset>
</form>

<h4>Result from the submit operation:</h4>
<spanid="result"></span>


<br/>
<br/>
<!-- Get form -->
<form>
<fieldset>
<label>Get:</label>
<inputid="getKey"type="text">
<inputtype="submit"id="getValue"value="GetMe">
</fieldset>
</form>

<h4>Result from the get operation:</h4>
<spanid="getResult"></span>

• Create two different WebSocket objects; one for storing and one for getting. These will have different endpoints associated with them - i.e. one has the resource 'store' and the other has 'getter'.
• Take the input from the forms, and then send that input using the WebSockets to the backend.
• Take the output from the server, and attach that message to the HTML. (See ws.onmessage and wsGet.onmessage)

<script>
var port = "";
var storerUrl = 'ws://' + window.location.host + port + window.location
        .pathname + 'store';
var ws = new WebSocket(storerUrl);

var getterUrl = 'ws://' + window.location.host + port + window
        .location.pathname + 'getter'
var wsGet = new WebSocket(getterUrl);

        ws.onconnect = function(e) {
          console.log("Connected up!");
        };

        ws.onerror = function(e) {
          console.log("Error somewhere: " + e);
        };

        ws.onclose = function(e) {
          console.log("Host has closed the connection");
          console.log(e);
        };

        ws.onmessage = function(e) {
document.getElementById("result").innerHTML = e.data;
        };

        wsGet.onconnect = function(e) {
            console.log("Connected up!");
        };

        wsGet.onerror = function(e) {
          console.log("Error somewhere: " + e);
        };

        wsGet.onclose = function(e) {
          console.log("Host has closed the connection");
          console.log(e);
        };

        wsGet.onmessage = function(e) {
          console.log("Received message from WebSocket backend");
document.getElementById("getResult").innerHTML = e.data;
        };



document.getElementById("store").onclick = function(event){
          event.preventDefault();
var key = document.getElementById("putKey").value;
var value = document.getElementById("putValue").value;
var objToSend = '{"key": ' + key + ', "value": ' + value + '}';
          ws.send(objToSend);
        };

document.getElementById("getValue").onclick = function(event) {
            event.preventDefault();
var key = document.getElementById("getKey").value;
var objToGet = '{"key": ' + key + '}';
            wsGet.send(objToGet);
        };

</script>

@ServerEndpoint("/store")
publicclassStorer {

privatestatic Logger storerLogger = Logger.getLogger(Storer.class.getName());

/**
    * Method that will store some basic data using the application platform's
    * clustered caching mechanism.
    *
    * @param data - The information, as a JSON from the js/html front-end.
    * @param client - the client session
    */
@OnMessage
publicvoidstore(String data, Session client) {
      String returnText = null;

// Let's get the Json object first.
      JsonParserFactory factory = JsonParserFactory.getInstance();
      JSONParser parser = factory.newJsonParser();
      Map jsonMap = parser.parseJson(data);

if (jsonMap.containsKey("key") && jsonMap.containsKey("value")) {
// Store the data in the cache now that we have validated it.
         String key = (String) jsonMap.get("key");
         String value = (String) jsonMap.get("value");
// TODO: Not actually storing anything yet!

// Creating some string returns to go back to the front-end along
// with some logging statements.
         StringBuilder sb = new StringBuilder();
         sb.append("Well done. We now have your data!");
         storerLogger.info("Going to store key " + key + " and value " +
               value + ".");
         sb.append(" Key: ").append(key).append(" Value: ").append(value)
               .append(". ");
         sb.append(" Stored at date: ").append(buildDate()).append(".");


         returnText = sb.toString();
      } else {
// Failed the validation check. So we are now going to log some
// information to the server and return some information to the
// front-end as well.

         storerLogger.info("Seems to be a problem with the input. Cannot find" +
" the appropriate \'key\' and \'value\' string keys.");
         returnText = "Problem with the input that you sent in. Are they just" +
" the default values?";
      }

// Send to client.
      client.getAsyncRemote().sendText(returnText);
   }

private String buildDate() {
returnnewSimpleDateFormat("HH:mm dd/MM/yy").format(Calendar
            .getInstance().getTime());
   }

}

• The @ServerEndpoint class level annotation tells the application container, Wildfly in this case, that this class will be dealing with WebSocket messages to the endpoint '/store'. Going back a little bit, in our HTML form, when we submit the key and value that we want to store, that input will be taken by this Java class.
• A method with the @OnMethod annotation will be called when a WebSocket sends a message to this endpoint. Any class which has a @ServerEndpoint annotation can only have one @OnMessage annotation. This method will take in a String parameter (our input) and a javax.websocket.Session object.
• In this case, we are using a simple JSON parser available here. It will parse our input into a Map object and then we can take out the keys and values which we require (as long as they exist!).
• After storing the key/value pair, we can then return back to the front-end.
• We use the Session object to send a message back to the front-end using the same WebSocket connection.
• WE ARE NOT ACTUALLY STORING ANYTHING IN THIS CLASS AS YET.

@ServerEndpoint("/getter")
publicclassGetter {

static Logger getterLogger = Logger.getLogger(Getter.class.getName());

/**
    * Method that will attempt to get a value for a given key.
    *
    * @param data - A String that is the key
    * @param client - the client session
    */
@OnMessage
publicvoidgetValue(String data, Session client) {
      getterLogger.info("Getting key: " + data);

      String returnText = "{No value found for key " + data + "}.";
try {
         returnText = getValueFromCache(data);
      } catch (Exception e) {
         returnText = e.getMessage();
         getterLogger.log(Level.WARNING, e.getMessage());
         e.printStackTrace();
      }

      client.getAsyncRemote().sendText(returnText);
   }

• The getValueFromCache() method is a dud here and doesn't do anything yet.

And that's it!