Web Page for System Message Pump
This post talks about the additional use of the message pump. You should understand how the message pump works before continuing. Please make sure you read the Message Pump Overview first.
We can take the Message Pump sample one step further. We can incorporate real-time web page communication. The web server supports WebSockets. WebSockets allow for real-time bidirectional communication. We can leverage this feature and put these messages on the Message Pump so our Java application can get them. This facilitates full-stack applications on the JNIOR.
The procedure looks like this:
- Web Page sends a “Post Message” message with a Number, or APP_ID, that the Java application defines as well as some content.
- JANOS places that content on the message pump along with the APP_ID
- Java application consumes the message and can respond by placing a new message on the message pump with the same APP_ID.
- JANOS takes the message for the APP_ID and sends a “Reply Message” to any connected Websocket that has previously sent a “Post Message” to the APP_ID. For a web application to get unsolicited messages from a Java application, it must have previously sent a “Post Message” to that application by using the associated APP_ID.
Our web page for the example looks like this.
We have a button handler in the code that will send the JSON-formatted message to the web server.
// register an onclick method so that we can post a message to get a random number from our
// sample java application.
document.getElementById('random-number-button').onclick = function (e) {
var getUpdates = {
Message: "Post Message",
Number: 2000,
Content: "get-random-number"
};
_comm.sendJson(getUpdates);
};A full listing of the web page is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/messagepumpsample/">
<title>Message Pump Web Interface</title>
<script src="comm.js" type="text/javascript"></script>
<script src="md5.js" type="text/javascript"></script>
<style>
body { padding: 5px; }
</style>
</head>
<body>
<div>
<h1>Message Pump Web Interface</h1>
<button id="random-number-button">Get Random Number</button>
<p style="width: 600px;">
Clicking the button above will cause a message to get sent to the Web Server. The Web Server
then places it in the System Message Pump. Our sample Java application will then receive it and
for the sake of the sample will respond with a random number. By placing the random number in a
message and back on to the System Message Pump with the same message type that it received, the
Operating System knows to send it back to the Web Server and in turn back to the sending Web
Socket connection.
</p>
</div>
<script type="text/javascript">
// our websocket communication object
var _comm;
var _loggedIn = false;
// method called when the connection is successfully opened
var onopen = function () {
console.log("comm opened");
};
// method called when our websocket object receives a message from the web server
var onmessage = function (evt) {
var json = JSON.parse(evt.data);
console.log(json);
if (json.Message === "Monitor") {
if (!_loggedIn) {
}
_loggedIn = true;
}
//
else if (json.Message === "Reply Message") {
if (2000 === json.Number) {
alert("Your Random Number is " + json.Content);
}
}
};
// instantiate our websocket communications object and wire up some methods. lastly call connect!
_comm = new Comm();
_comm.onopen = onopen;
_comm.onmessage = onmessage;
_comm.connect();
// register an onclick method so that we can post a message to get a random number from our
// sample java application.
document.getElementById('random-number-button').onclick = function (e) {
var getUpdates = {Message: "Post Message", Number: 2000, Content: "get-random-number"};
_comm.sendJson(getUpdates);
};
</script>
</body>
</html>To accomplish this we created a class to handle the get-random-number request. We could have handled this in our Main class but hey I like modularity.
package com.integpg.messagepumpsample;
import com.integpg.system.SystemMsg;
import java.util.Random;
public class RandomNumberMessageHandler implements MessagePumpListener {
@Override public void messageReceived(SystemMsg systemMsg) {
// this sample uses message type 2000
if (2000 == systemMsg.type) {
String content = new String(systemMsg.msg);
System.out.println("content: " + content);
Random rand = new Random();
int randomNumber = rand.nextInt();
SystemMsg responseMsg = new SystemMsg();
responseMsg.type = 2000;
responseMsg.msg = String.valueOf(randomNumber).getBytes();
MessagePumpEngine.postMessage(responseMsg);
}
}
}We also had to modify our init() method to attach our MessagePumpHandler.
package com.integpg.messagepumpsample;
import com.integpg.system.SystemMsg;
import java.util.Random;
public class RandomNumberMessageHandler implements MessagePumpListener {
@Override
public void messageReceived(SystemMsg systemMsg) {
// this sample uses message type 2000
if (2000 == systemMsg.type) {
String content = new String(systemMsg.msg);
System.out.println("content: " + content);
// get a random number
Random rand = new Random();
int randomNumber = rand.nextInt();
// build our response
SystemMsg responseMsg = new SystemMsg();
responseMsg.type = 2000;
responseMsg.msg = String.valueOf(randomNumber).getBytes();
MessagePumpEngine.postMessage(responseMsg);
}
}
}Almost immediately upon clicking the button, we get our response.
As you can see here the web page gives you an amazing ability to communicate with a Java application in real-time.