Using Atmosphere in JBoss AS 7 to push data to your HTML web page

Atmosphere is an asynchronous WebSocket/Comet framework for J2EE based Application Servers. In short, Atmosphere allows to push data to the web browser on near-real time fashion. For example, you could use such tool do develop a web based chat application or a stock market application that receives the new quotes as soon as they become available.

Unless WebSockets are used (a different protocol than HTTP), Atmosphere will work by having the server side intercepting the web call and keep the connection open. Like this, the client will be the one responsible for shutting the connection down and, by leaving this connection open, the server can now push data through that connection.

In addition, Atmosphere framework also provides:
1. A JQuery Plugin that, if used, highly simplifies the development of the client side.
2. A replacement for JAX-RS – not used in example because JBoss provides RESTEasy (note that RESTEasy can be substituted in favor of Atmosphere REST services if desired)

During my little experiments I’ve noticed that currently Atmosphere only allows the client to maintain one connection per page loaded.

Here is a presentation on Atmosphere:

Comet / WebSocket Web Applications

View more presentations from Codemotion

The following example was successfully executed and tested JBoss AS 7.1 and you can download the example from github here.

The example works by having a web page loaded from the server. Once loaded the JQuery plugin will connect to the Atmosphere Servlet using a HTTP GET request that will override the default connection handler and keep the connection alive. To broadcast/push a message to a subscribed browser web connection simply do an HTTP POST to the desired subscription.

package crazypenguin.servlets;

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.atmosphere.cpr.ApplicationConfig;
import org.atmosphere.cpr.AtmosphereResource;
import org.atmosphere.cpr.Broadcaster;
import org.atmosphere.cpr.BroadcasterFactory;
import org.atmosphere.cpr.HeaderConfig;
import org.atmosphere.handler.AbstractReflectorAtmosphereHandler;
import org.atmosphere.websocket.WebSocketEventListenerAdapter;

public class PubSubAtmosphereHandler extends AbstractReflectorAtmosphereHandler {

	@Override
	public void onRequest(AtmosphereResource<HttpServletRequest, HttpServletResponse> event) throws IOException {
	
	  HttpServletRequest req = event.getRequest();
	  HttpServletResponse res = event.getResponse();
	  String method = req.getMethod();
	
	  // Suspend the response.
	  if ("GET".equalsIgnoreCase(method)) {
		  
		  // Log all events on the console, including WebSocket events.
          event.addEventListener(new WebSocketEventListenerAdapter());
          
	      res.setContentType("text/html;charset=ISO-8859-1");
	      
	      Broadcaster b = lookupBroadcaster(req.getPathInfo());
	      event.setBroadcaster(b);
	
	      String atmoTransport = req.getHeader(HeaderConfig.X_ATMOSPHERE_TRANSPORT);
	      
	      if (atmoTransport != null && !atmoTransport.isEmpty() && 
	    		  atmoTransport.equalsIgnoreCase(HeaderConfig.LONG_POLLING_TRANSPORT)) {
	    	  
	          req.setAttribute(ApplicationConfig.RESUME_ON_BROADCAST, Boolean.TRUE);
	          event.suspend(-1, false);
	          
	      } else {
	          event.suspend(-1);
	      }
	  } else if ("POST".equalsIgnoreCase(method)) {
	      Broadcaster b = lookupBroadcaster(req.getPathInfo());
	
	      String message = req.getReader().readLine();
	
	      if (message != null && message.indexOf("message") != -1) {
	          b.broadcast(message.substring("message=".length()));
	      }
	  }
	}
	
	@Override
	public void destroy() {
		// empty
	}
	
	Broadcaster lookupBroadcaster(String pathInfo) {
		String[] decodedPath = pathInfo.split("/");
		Broadcaster b = BroadcasterFactory.getDefault().lookup(decodedPath[decodedPath.length - 1], true);
		return b;
	}

}

RESTEasy example call when called from the web page button will, within the server side broadcast a message to all subscribed connections.

package crazypenguin.rest;

import org.atmosphere.cpr.Broadcaster;
import org.atmosphere.cpr.BroadcasterFactory;

import javax.ejb.LocalBean;
import javax.ejb.Stateless;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.core.Response;

@Path("/control")
@Stateless
@LocalBean //Note: @javax.ejb.Local(WindowingResource.class) does not work on AS 7!
public class AtmosphereTestBean implements AtmosphereTest {
	
	private boolean m_visible = false;
	
	@POST
	@Path("/toggle")
	@Override
	public Response toggle(String xml) {
		m_visible = !m_visible;
		notifySubscribers(m_visible ? "ON" : "OFF");
		return Response.ok().build();
	}
	
	private void notifySubscribers(String state) {
		Broadcaster broadcaster = BroadcasterFactory.getDefault().lookup("control", true);
		if (broadcaster != null) broadcaster.broadcast(state);
	}
}

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	
	<meta charset="UTF-8">
	<title>Atmosphere Test</title>

</head>

<body>
	<input type="button" value="POST to server..." onclick="post()"/>

	<div class="controlPanel">
		<div id="cp-1"  class="cpitem"><img src="img/remoting.png"/></div>
	</div>	

<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="js/jquery.atmosphere.js" type="text/javascript"></script>
<script src="js/jquery.url.js" type="text/javascript"></script>
<script src="js/atmo.js" type="text/javascript"></script>
  
</body>
</html>

Simple JavaScript object responsible for subscribing to server broadcasts and calling the registered message handler methods.

var cm;
var cm_actions = {
	'ON':['showItem', '#cp-1'], 
	'OFF':['hideItem', '#cp-1'],
};

$(document).ready(function(){
	$('#cp-1').hide();
	
	cm = new ControlManager();
 });

function controlConnect() {
	controlUnsubscribe();
    controlSubscribe();
}

// jquery.atmosphere.response
function callback(response) {
	// Websocket events.
	$.atmosphere.log('info', ["response.state: " + response.state]);
	$.atmosphere.log('info', ["response.transport: " + response.transport]);
	$.atmosphere.log('info', ["response.status: " + response.status]);

	if (response.transport != 'polling' && response.state == 'messageReceived') {
		$.atmosphere.log('info', ["response.responseBody: " + response.responseBody]);
		if (response.status == 200) {
			var data = response.responseBody;
			if (data.length > 0) {
				for (var cmd in cm.actions) {
					if (data === cmd) {
						var m = window[cm.actions[cmd][0]];
						var ma;
						if (cm.actions[cmd].length > 1) ma = cm.actions[cmd][1];
						if (ma && ma!= '') m(ma);
						else m();
					}
				}
			}
		}
	}
}

function controlSubscribe() {
	if (!this.callbackAdded) {
		var url = $.url();
		var location = url.attr('protocol') + '://' + url.attr('host') + ':' + url.attr('port') + '/atmo/pubsub/control';
		this.connectedEndpoint = $.atmosphere.subscribe(location,
			!callbackAdded ? this.callback : null,
			$.atmosphere.request = { 
				transport: 'websocket' 
			}
		);
		
		this.callbackAdded = true;
	}	
}

function controlUnsubscribe(){
	this.callbackAdded = false;
	$.atmosphere.unsubscribe();
}

function ControlManager() {
	this.suscribe = controlSubscribe;
	this.unsubscribe = controlUnsubscribe;
	this.connect = controlConnect;
	this.callback = callback;
	this.connect();
	this.actions = cm_actions;
}

function showItem(id) {
	$(id).show();
}

function hideItem(id) {
	$(id).hide();
}

function post() {
	
	var request = $.ajax({
		url: 'rest/control/toggle',
		type: 'POST',
		data: '<doc>foo</doc>',
		contentType:"application/xml; charset=utf-8",
	});
				
	request.fail(function(jqXHR, textStatus) {
  		alert( "Request failed: " + textStatus );
	});
}

Atmosphere is a great library and provides many more features. Make sure you explore it deeply since it can really make your Web 2.0 applications much more interesting and responsive.