Category Archives: HTML5

Websocket using Glassfish

This month, I wanted to try out HTML5 Websocket chat application. There are lots of Websocket tutorials out there, but I found different technology combination makes it difficult to have application run.

In my demo, I used below combinations.

* Glassfish 3.1.2

* Eclipse Indigo (OEPE 12.1.1.0.11)

* JQuery 1.7.2

My Websocket project, I started with Dynamic Web Project with Mojarra JSF implementation. In the beginning, I had a difficult time to link the concept with the code. Websocket concept is simple to understand, but coding was little bit confusing.

I was following the example from this tutorial.  After understanding the tutorial, I set up my project with following steps:

1. Add Grizzly Websocket library. Import external jars from C:\glassfish3\glassfish\modules location. I knew Glassfish included Grizzly library, but not sure how it included in the project. I downloaded new 2.2.7 version, but realized that Glassfish 3.1.2 doesn’t work with newer version of Grizzly. Glassfish 3.1.2 supports Grizzly 1.9.46.

2. Create server application, servlet, and socket classes. The example shows in the tutorial uses older version of Grizzly and some method names have been changed. For example,
public class MyWebSocketApplication extends WebSocketApplication
{
public WebSocket createSocket(ProtocolHandler handler,
WebSocketListener... listeners)
{
return new ClientSocket(handler, listeners);
}
@Override
public boolean isApplicationRequest(Request arg0)
{
return true;
}
@Override
public void onConnect(WebSocket socket)
{
super.onConnect(socket);
System.out.println("On Connect.....");
}

3. Create xhtml chat page. One of the tricky part was using JQuery with JSF form element.  For example,  JQuery selector needs to have a Form name prefix with “\\:” before actual form element ID.

$(“#chatForm\\:message”).val(“Hello there”);

<h:form id=”chatForm”>

<h:inputText type=”text” id=”message”></h:inputText>

</h:form>

This threw me off for a while and I found the solution from the internet.

4. websocket instance in the client side javascript needs to point to the Servlet URL.

ws = new WebSocket("ws://localhost:8080/WebsocketDemo/WebSocketServlet/myChat");

Of course, the servlet mapping needs to be done in web.xml. Also, enable Websocket in the Glassfish by executing below command.

asadmin set configs.config.server-config.network-config.
protocols.protocol.http-listener-1.http.websockets-support-enabled=true

My presentation at the Slideshare.

Source code at Github.