WebSockets with Embedding Jetty [step4]

In [step3] we have created Chat WebSocket on server side and start the Jetty server with a Java main by using Embedding Jetty.

In this article we will create a chat WEB Application which hosts chat.html. The chat WEB Application will be started on the 8080 port with Tomcat 6 by using Eclipse WTP Adaptor. This WEB Application will use the javax.servlet.ServletContextListener ChatServerServletContextListener for LifecycleListener :

1. when the WEB Application starts, the Embedding Jetty starts on the 8081 port. Chat WebSocket on server side will be available at ws://localhost:8081/.
2. when the WEB Application stops, the Embedding Jetty stops.

Here a scheme which shows you the architecture of the chat application hosted by Tomcat Server (8080 port) and WebSocket managed with Jetty Server (8081 port) :

This schema shows you that:

• HTTP request will be used on the 8080 port (ex : display the chat.html) to use Tomcat Server which doesn’t support WebSocket.
• WebSocket request will be used on the 8081 port (ex : click on the “Join” button to join the chat) to use Jetty Server which supports WebSocket.

WebSockets with Embedding Jetty [step3]

In [step2] we have implemented our chat application on client side with JavasScript WebSocket component. In this article we will create chat WebSockets on server side with Jetty-WebSocket and start the Jetty Server with Embedding Jetty. We will create a Java main which start a Jetty Server and configure it to manage WebSockets Chat Application on server side.

We will use Eclipse IDE to create a Java Project org.samples.websockets.embeddingjetty (but you can do with another IDE if you wish). At the end of this article our workspace will looks like this:

WebSockets with Embedding Jetty [step2]

In [step1] we have seen how WebSockets could be used in a chat application and introduce WebSockets component on client/server side.

In this article we will create chat application on client side with JavaScript WebSocket component. Google Chrome implements WebSocket so our chat application will be tested with this browser.

Jetty distribution provides a sample with chat.html. This article will explain step by step how to create chat application on client side with chat.html. In the next article [step3], we will create a Jetty server which will start to the 8081 port. The Chat WebSocket server will be available at ws://localhost:8081. You can notice
that URL is ws://localhost:8081/ and not http://localhost:8081/. ws:// is WebSocket protocol. For secured protocol (like https://), wss:// must be used.

Once WebSockets will be finished on client side (explained in this article) and server side (explained in [step3]), chat application will look like this :

WebSockets with Embedding Jetty [step1]

Since several years, WEB Application are more and more improved by using AJAX (Asynchronous JavaScript Technology and XML) to provide the same features than a Fat client (Swing, SWT Application). With AJAX, the client WEB Browser can communicate to server side with Javascript and can refresh only a fragment of the WEB Page and not the all page. A good sample of this feature is the GTalk which is the Google GMail Chat Application.

Chat Application with XMLHttpRequest (AJAX)

AJAX is based on XMLHttpRequest which is W3C specification :

The XMLHttpRequest specification defines an API that provides scripted client functionality for transferring data between a client and a server.

Here a screen which shows you communication between client and server for GTalk Chat Application with AJAX :

This schema shows you that there are 3 communications :

• [1] : Chat Application 1 send hello message.
• [2] : Chat Application 2 poll the server to check if there are received messages.
• [3] : Chat Application 2 receives the message (response of the [2] communication).

You can see that in the Chat Application context with AJAX, there are a lot of communications between client and server side to check if there are received messages ([2] communication). WEB browser client must check every time if there are new received messages by polling the server (ex : the WEB Browser send every 5 seconds a request XMLHttpRequest to the server side to check if new messages are received). This solution can deteriorate the server performance because there are a lot of request just to check if they are new received messages (if they are no received messages, the response of this communication is not used).

Chat Application with WebSockets

To avoid a lot of communications between client and server side, the solution is that server should send a message to the client side as soon as it receives message without the client side polls the server. For his feature, HTML5 specify a new component called WebSockets:

This specification defines an API that enables Web pages to use the WebSocket protocol for two-way communication with a remote host.

Here a screen which shows you communication between client and server for GTalk Chat Application with WebSockets :

This schema shows you that there 3 comunications :

1. [1] : Chat Application 1 send hello message
2. [2] : Chat Application 2 receives the message. The client NOT need to poll the server to check if new messages are received.

Chat Application Implementation

WebSockets features are cool, but how to implement that? I will try to explain step by step how to develop a Chat Application on client/server side which will work in any JEE Server. I will use Google Chrome, a WEB Browser which supports WebSockets, to test the Chat Application.