This tutorial shows you how to create an application that uses the WebSocket API for real-time communication between a client and a server.
Time to Complete
Approximately 1 hour
Modern web applications require more interactivity than ever before fo client/server communications. HTTP, however, wasn't built to deliver the kind of interactivty needed today. "Push" or Comet techniques, such as long-polling, emerged as a way to allow a server to push data to a browser. Because these techniques usually rely on HTTP, they present some disadvantages to client/server communications, such as HTTP overhead. These disadvantages results in less efficient communication between the server and the web browser, especially for real-time applications.
WebSocket provides an alternative to this limitation by providing bi-directional, full-duplex, real-time, client/server communications. The server can send data to the client at any time. Because WebSocket runs over TCP, it also reduces the overhead of each message. WebSocket also provides greater scalability for message-intensive applications because only one connection per client is used (whereas HTTP creates one request per message). Finally, WebSocket is part of Java Plaform, Enterprise Edition 7 (Java EE 7), so you can use other technologies of the Java EE 7 stack.
In this tutorial, you create a sticker story web application that children can use to create a story collaboratively by dragging images into a book or canvas. When an image sticker is dragged and dropped onto the canvas, the sticker is rendered in all other Web browsers that are connected to a server.
The following software requirements are needed for this tutorial:
- Download and install the Java EE 7 software development kit (SDK) from http://www.oracle.com/technetwork/java/javaee/downloads/index.html
- Download and install the Java NetBeans 7.3.1 integrated development environment (IDE) from http://www.netbeans.org/downloads/index.html
- Download and install Oracle GlassFish Server 4.0 from http://www.oracle.com/technetwork/middleware/weblogic/downloads/index.html
Before starting this tutorial, you should have:
- Knowledge of the Java programming language.
- Basic knowledge of Java EE 7.
Introduction to WebSocket in Java EE 7
Here are some of the benefits of WebSocket:
- Full duplex client-server communication.
- Integration with other Java EE technologies. You can inject objects and Enterprise JavaBeans (EJB) by using components such as Contexts and Dependency Injection (CDI).
- Low-level communication (works on the underlying TCP/IP connection).
- Low latency communication.
Creating a WebSocket Server Endpoint
In this section, you create a Java EE 7 web application on which you’ll build the sticker story application.
Creating a Java EE 7 Project
Creating the Sticker Class
In this section, you create the Sticker class, which contains the constructor, getters, and setters for the sticker object.
Declaring, Defining, and Configuring the WebSocket Actions
You have successfully created and configured a WebSocket server endpoint.
Creating the JSON Encoder and Decoder
The sticker story application uses the Java API for JSON Processing (JSR 353), which is part of Java EE 7. This API allows a client and a WebSocket server to communicate using JSON objects. To accomplish this, the WebSocket server encodes the text sent to the client into objects and serializes them. Once received, the client decodes these objects and converts them back into text. In this section, you create a JSON encoder and decoder for the Sticker class that you created.
Creating the JSON Encoder
In this section, you create the StickerEncoder class that encodes a Sticker object and sends it to the WebSocket server by writing it to the stream.
Creating the JSON Decoder
In this section, you create the StickerDecoder class so that you can read data from the WebSocket stream by using the Decoder.TextStream interface. This interface allows you to read data from the socket by using a JsonReader object, constructed by using a Reader class, and to transform data the JSON object sent by the client back into text.
You have successfully created a WebSocket decoder.
Creating the WebSocket Client Endpoint
In this section, you create the client that interacts with the WebSocket server.
Importing the Graphics Resources
In this section, you import the resources needed to render the user interface of the project.
You successfully imported the resource files into the StickerStory project in NetBeans.
Configuring the Client Endpoint
In this section, you configure the WebSocket client endpoint controls. You create a new connection to the WebSocket server endpoint and then you specify a callback function that executes when a message is received.
Rendering the StickerStory Application
In this section you create the index page that pulls the previously created elements together.
In this tutorial you learned how to create an application that features real-time, full-duplex communication between a client and a server by using the WebSocket API.
You also learned how to:
- Create and configure a WebSocket server endpoint using the WebSocket API
- Create a JSON encoder and decoder to read and write data from a socket stream
For more information about the topics in this tutorial, see:
- Java EE 7 Tutorial
- The Java EE 7 Tutorial chapter on WebSocket
- The Java EE 7 Tutorial chapter on JSON
- The Aquarium Blog
- JSR 353: Java API for JSON Processing
- JSR 356: Java API for WebSocke
- WebSocket.org - A WebSocket Community
- "Java EE7 - Embracing HTML5" article on Java Magazine
- To learn more about Java EE 7, refer to additional OBEs in the Oracle Learning Library.
- Lead Curriculum Developer: Miguel Salazar
- Other Contributors: Eduardo Moranchel, Edgar Martinez
To help navigate this Oracle by Example, note the following:
- Hiding Header Buttons:
- Click the Title to hide the buttons in the header. To show the buttons again, simply click the Title again.
- Topic List Button:
- A list of all the topics. Click one of the topics to navigate to that section.
- Expand/Collapse All Topics:
- To show/hide all the detail for all the sections. By default, all topics are collapsed
- Show/Hide All Images:
- To show/hide all the screenshots. By default, all images are displayed.
- To print the content. The content currently displayed or hidden will be printed.
To navigate to a particular section in this tutorial, select the topic from the list.