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.

About these ads

5 thoughts on “Websocket using Glassfish

    1. mjtoolbox Post author

      As you can see from the source code, I don’t have build.xml. Running application within the eclipse environment. You’ll have to create your own build.xml to deploy outside of the Eclipse env.

      Reply
  1. Saggi

    still getting 404…http://localhost:8080/WebsocketDemo/
    INFO: WEB0169: Created HTTP listener [http-listener-1] on host/port [0.0.0.0:8080]
    INFO: WEB0169: Created HTTP listener [http-listener-2] on host/port [0.0.0.0:8181]
    INFO: WEB0169: Created HTTP listener [admin-listener] on host/port [0.0.0.0:4848]

    INFO: WEB0171: Created virtual server [server]
    INFO: WEB0171: Created virtual server [__asadmin]

    INFO: WEB0172: Virtual server [server] loaded default web module []

    INFO: Initializing Mojarra 2.1.6 (SNAPSHOT 20111206) for context ‘/WebsocketDemo’

    INFO: Monitoring jndi:/server/WebsocketDemo/WEB-INF/faces-config.xml for modifications
    INFO: ***MyWebSocketApplication registered successfully in the Servlet***
    INFO: WEB0671: Loading application [WebsocketDemo] at [/WebsocketDemo]

    Reply
  2. Vasil Georgiev

    Thanks for the code. I’ve been struggling with WebSockets for a while now and it just turns out that each time I forget to override one of the methods.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s