After the article
An introduction on HTML5 WebSocket, this one will explain the use of WebSocket with an example in which we have combined TWaver HTML5: the background provides the topological data which is sent to every client-side through WebSocket in the form of JSON and after it is received by them it will be shown on the interface by the Network components in TWaver HTML5. The elements can be handled at the client-sides, the results of which are sent to the background through WebSocket, and then the background server will renew and notify all client-sides to refresh their interfaces. After that, there will also be alarms appearing constantly in the background server which will be sent to the client-sides to refresh their interfaces.
General structures
Preparations
You can download jetty and twaver html5 which are necessary in this example.
jetty：
http://www.eclipse.org/jetty/
The Directory Structure of Jetty
The following structure is what jetty is decompressed. Run start.jar（java -jar start.jar） to start jetty server（java -jar start.jar）and web items can be put into the catalogue “/webapps”, such as “/webapps/alarm/” in this example.
The Background
Jetty is used at the background whose style is the same as the api of servlet. It can be used according to the use and deployment of Servlet. There are three classes needed to be used in this example.
- WebSocketServlet-WebSocket Service Class
- WebSocket–corresponding to a WebSocket client-side
- WebSocket.Conllection–stands for a WebSocket connection
WebSocketServlet
The full name is org.eclipse.jetty.websocket.WebSocketServlet which is used to provide websocket service. It inherits from HttpServlet and the method public WebSocket doWebSocketConnect(HttpServletRequest request, String protocol) has been added. This method is called when the client-side asks for websocket connection for the first time. If it is allowed to establish a connection, then returns a WebSocket instance object. Otherwise returns null.
In this example, we will define an AlarmServlet class which inherits from WebSocketServlet to realize the method "doWebSocketConnect"and returns an "AlarmWebSocket" instance which stands for a client-side.
AlarmServlet
There is a “clients” property in AlarmWebSocket which is used to maintain a client-side (AlarmWebSocket) list. When establishing a connection with the client-side, the corresponding AlarmWebSocket instance of the client-side will be added to the list; when the client-side is closed, it will be deleted from the list.
public class AlarmServlet extends org.eclipse.jetty.websocket.WebSocketServlet {
private final Set<AlarmWebSocket> clients;//to save the client-side list
public AlarmServlet() {
initDatas();//to initialize the data
}
@Override
public WebSocket doWebSocketConnect(HttpServletRequest request, String protocol) {
return new AlarmWebSocket();
}
//...
}
AlarmWebSocket
Let’s see AlarmWebSocket. Here an Inner Class has been defined to realize the three methods of the interface org.eclipse.jetty.websocket.WebSocket.OnTextMessage: onOpen/onMessage/onClose which are called back when establishing connections, receiving messages from client-sides and closing connections respectively. If you have the need to send messages to the client-sides, you can call the method Connection#sendMessage(…) .(The message should all be JSON.)
class AlarmWebSocket implements org.eclipse.jetty.websocket.WebSocket.OnTextMessage
{
WebSocket.Connection connection;
@Override
public void onOpen(Connection connect) {
this.connection = connect;
clients.add(this);
sendMessage(this, "reload", loadDatas());
}
@Override
public void onClose(int code, String message) {
clients.remove(this);
}
@Override
public void onMessage(String message) {
Object json = JSON.parse(message);
if(!(json instanceof Map)){
return;
}
//to analyze the message: the json data in jetty will be analyzed into map objects
Map map = (Map)json;
//to renew the data model at the background through the information in the massages
...
//to process the messages to notify other client-sides
for(AlarmWebSocket client : clients){
if(this.equals(client)){
continue;
}
sendMessage(client, null, message);
}
}
}
private void sendMessage(AlarmWebSocket client, String action, String message){
try {
if(message == null || message.isEmpty()){
message = "\"\"";
}
if(action != null){
message = "{\"action\":\"" + action + "\", \"data\":" + message + "}";
}
client.connection.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
}
}
Background Configuration
The background configuration is the same as serlvet. Set the url as /alarmServer.
<?xml version="1.0" encoding="UTF-8"?>
<web-app
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
metadata-complete="false"
version="3.0">
<servlet>
<servlet-name>alarmServlet</servlet-name>
<servlet-class>web.AlarmServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>alarmServlet</servlet-name>
<url-pattern>/alarmServer</url-pattern>
</servlet-mapping>
</web-app>
The foreground part
Let’s have a look at the general structure of foreground. Now we can create “websocket” connection to listen to the related events like “onmessage” event. Thus we can receive the massage sent from the background (JSON) and renew it to the interface after analysis.
function init(){
window.WebSocket = window.WebSocket || window.MozWebSocket;
if (!window.WebSocket){
alert("WebSocket not supported by this browser");
return;
}
var websocket = new WebSocket("ws://127.0.0.1:8080/alarm/alarmServer");
websocket.onopen = onopen;
websocket.onclose = onclose;
websocket.onmessage = onmessage;
...
}
function onmessage(evt){
var data = evt.data;
if(!data){
return;
}
data = stringToJson(data);
if(!data){
return;
}
...
}
function jsonToString(json){
return JSON.stringify(json);
}
function stringToJson(str){
try{
str = str.replace(/\'/g, "\"");
return JSON.parse(str);
}catch(error){
console.log(error);
}
}
Websocket foreground-background process
Business Realization
Data Model
There are three business types to be used in this example: node, link and alarm. The background has provided implementation class and defined properties like name, position and line-width. In addition, the export of json data has also been available.
interface IJSON{
String toJSON();
}
class Data{
String name;
public Data(String name){
this.name = name;
}
}
class Node extends Data implements IJSON{
public Node(String name, double x, double y){
super(name);
this.x = x;
this.y = y;
}
double x, y;
public String toJSON(){
return "{\"name\":\"" + name + "\", \"x\":\"" + x + "\",\"y\":\"" + y + "\"}";
}
}
class Link extends Data implements IJSON{
public Link(String name, String from, String to, int width){
super(name);
this.from =from;
this.to = to;
this.width = width;
}
String from;
String to;
int width = 2;
public String toJSON(){
return "{\"name\":\"" + name + "\", \"from\":\"" + from + "\", \"to\":\"" + to + "\", \"width\":\"" + width + "\"}";
}
}
class Alarm implements IJSON{
public Alarm(String elementName, String alarmSeverity){
this.alarmSeverity = alarmSeverity;
this.elementName = elementName;
}
String alarmSeverity;
String elementName;
@Override
public String toJSON() {
return "{\"elementName\": \"" + elementName + "\", \"alarmSeverity\": \"" + alarmSeverity + "\"}";
}
}
Three lists of data have been maintained in the background to save nodes, links and alarms respectively. Furthermore, it is easy to quickly find nodes since keys are named after node names in elementMap.
Map<String, Data> elementMap = new HashMap<String, AlarmServlet.Data>();
List<Node> nodes = new ArrayList<AlarmServlet.Node>();
List<Link> links = new ArrayList<AlarmServlet.Link>();
List<Alarm> alarms = new ArrayList<AlarmServlet.Alarm>();
To Initialize Data
In servlet construction, we have added some simulated data. When client-side makes connections (AlarmWebSocket#onOpen(Connection connection)), the background will send the information on nodes, links and alarms to the foreground in the form of JSON （sendMessage(this, “reload”, loadDatas());）.
public AlarmServlet() {
initDatas();
...
}
public void initDatas() {
int i = 0;
double cx = 350, cy = 230, a = 250, b = 180;
nodes.add(new Node("center", cx, cy));
double angle = 0, perAngle = 2 * Math.PI/10;
while(i++ < 10){
Node node = new Node("node_" + i, cx + a * Math.cos(angle), cy + b * Math.sin(angle));
elementMap.put(node.name, node);
nodes.add(node);
angle += perAngle;
}
i = 0;
while(i++ < 10){
Link link = new Link("link_" + i, "center", "node_" + i, 1 + random.nextInt(10));
elementMap.put(link.name, link);
links.add(link);
}
}
private String loadDatas(){
StringBuffer result = new StringBuffer();
result.append("{\"nodes\":");
listToJSON(nodes, result);
result.append(", \"links\":");
listToJSON(links, result);
result.append(", \"alarms\":");
listToJSON(alarms, result);
result.append("}");
return result.toString();
}
class AlarmWebSocket implements org.eclipse.jetty.websocket.WebSocket.OnTextMessage
{
...
@Override
public void onOpen(Connection connect) {
this.connection = connect;
clients.add(this);
sendMessage(this, "reload", loadDatas());
}
...
}
To Show the Initial data in the Foreground
The initial data is sent to the client-side by the method sendMessage(…) from the background and received through the call-back function onmessage by the client-side. In this example, we use components in twaver html5 to show them. The use flow of Twaver components is as usual: first convert the data, that is, to switch JSON data to the element types of TWaver; then fill them to ElementBox; at last relate them to the network components. Here is the code:
public AlarmServlet() {
initDatas();
...
}
public void initDatas() {
int i = 0;
double cx = 350, cy = 230, a = 250, b = 180;
nodes.add(new Node("center", cx, cy));
double angle = 0, perAngle = 2 * Math.PI/10;
while(i++ < 10){
Node node = new Node("node_" + i, cx + a * Math.cos(angle), cy + b * Math.sin(angle));
elementMap.put(node.name, node);
nodes.add(node);
angle += perAngle;
}
i = 0;
while(i++ < 10){
Link link = new Link("link_" + i, "center", "node_" + i, 1 + random.nextInt(10));
elementMap.put(link.name, link);
links.add(link);
}
}
private String loadDatas(){
StringBuffer result = new StringBuffer();
result.append("{\"nodes\":");
listToJSON(nodes, result);
result.append(", \"links\":");
listToJSON(links, result);
result.append(", \"alarms\":");
listToJSON(alarms, result);
result.append("}");
return result.toString();
}
class AlarmWebSocket implements org.eclipse.jetty.websocket.WebSocket.OnTextMessage
{
...
@Override
public void onOpen(Connection connect) {
this.connection = connect;
clients.add(this);
sendMessage(this, "reload", loadDatas());
}
...
}
The effect
The Background Sends Alarms and the Foreground Instantly Renews
Add the code for sending alarms at the background: Here we have made a timer which generates a random alarm every two seconds or clear all the alarms and send the information to all client-sides.
The background code:
public AlarmServlet() {
...
Timer timer = new Timer();
timer.schedule(new TimerTask() {
@Override
public void run() {
if(random.nextInt(10) == 9){
alarms.clear();
sendMessage ("alarm.clear", "");
return;
}
sendMessage("alarm.add", randomAlarm());
}
}, 0, 2000);
}
public void sendMessage(String action, String message) {
for(AlarmWebSocket client : clients){
sendMessage(client, action, message);
}
}
private Random random = new Random();
private Data getRandomElement(){
if(random.nextBoolean()){
return nodes.get(random.nextInt(nodes.size()));
}
return links.get(random.nextInt(links.size()));
}
String[] alarmSeverities = new String[]{"Critical", "Major", "Minor", "Warning", "Indeterminate"};
private String randomAlarm(){
Alarm alarm = new Alarm(getRandomElement().name, alarmSeverities[random.nextInt(alarmSeverities.length)]);
alarms.add(alarm);
return alarm.toJSON();
}
The foreground code:
There should be the corresponding operations when the client-side has received the messages: add the operations to messages like “alarm.clear” and “alarm.add”. In this way alarms can instantly refresh themselves.
function onmessage(evt){
...
if(action == "alarm.clear"){
box.getAlarmBox().clear();
return;
}
data = data.data;
if(!data){
return;
}
...
if(action == "alarm.add"){
newAlarm(data)
return;
}
...
}
Dragging Nodes at a Client-side to Synchronize to Others
At last, add drag synchronization and listen to the element-dragged events. At the end of dragging an element, the position of the node will be sent to the background.
Foreground code:
network.addInteractionListener(function(evt){
var moveEnd = "MoveEnd";
if(evt.kind.substr(-moveEnd.length) == moveEnd){
var nodes = [];
var selection = box.getSelectionModel().getSelection();
selection.forEach(function(element){
if(element instanceof twaver.Node){
var xy = element.getCenterLocation();
nodes.push({name: element.getName(), x: xy.x, y: xy.y});
}
});
websocket.send(jsonToString({action: "node.move", data: nodes}));
}
});
When the background has received the position of the node, the background data (the position of the node) will first be renewed, which will then be sent to other client-side, hence the simultaneous operation among client-sides.
Background code:
class AlarmWebSocket implements org.eclipse.jetty.websocket.WebSocket.OnTextMessage
{
...
@Override
public void onMessage(String message) {
Object json = JSON.parse(message);
if(!(json instanceof Map)){
return;
}
Map map = (Map)json;
Object action = map.get("action");
Object data = map.get("data");
if("node.move".equals(action)){
if(!(data instanceof Object[])){
return;
}
Object[] nodes = (Object[])data;
for(Object nodeData : nodes){
if(!(nodeData instanceof Map) || !((Map)nodeData).containsKey("name") || !((Map)nodeData).containsKey("x") || !((Map)nodeData).containsKey("y")){
continue;
}
String name = ((Map)nodeData).get("name").toString();
Data element = elementMap.get(name);
if(!(element instanceof Node)){
continue;
}
double x = Double.parseDouble(((Map)nodeData).get("x").toString());
double y = Double.parseDouble(((Map)nodeData).get("y").toString());
((Node)element).x = x;
((Node)element).y = y;
}
}else{
return;
}
for(AlarmWebSocket client : clients){
if(this.equals(client)){
continue;
}
sendMessage(client, null, message);
}
}
}
Structure:
