Using Binary WebSockets With Java EE 7 And JavaFX Clients.

Creating Binary WebSocket Connections with Java EE 7 and JavaFX.
This tutorial covers how to create binary WebSocket connections with Java Platform, Enterprise Edition 7 (Java EE 7) and Wiki.jdata.It JavaFX.
Time to Complete.
Approximately 1 hour.
Introduction.
The WebSocket protocol, which was developed as part of HTML5, enables full-duplex and real-time communication to a Web server. The server and client can send and receive data at any time by using a single connection. WebSocket connections are started by using an HTTP request that enables the connection to change to the WebSocket protocol. These connections take advantage of all features of the HTTP protocol. Switching the connection allows for little overhead communication because only one HTTP handshake is performed for all exchanged messages.
The WebSocket API (JSR 356) is one of the many Java EE 7 technologies, and it is included in Java EE 7 application servers. It was also designed to run as part of a Java Platform, Standard Edition (Java SE) application. Project Tyrus, the reference implementation for WebSocket, includes the libraries required to create WebSocket connections outside a Java EE 7 application server. The required WebSocket libraries are provided in this zip file.
Using WebSocket connections, you can send and receive three kind of messages:
Text-based messages are supported with HTML5 and JavaScript and are commonly used to exchange object data by using JavaScript Object Notation (JSON). Binary messages are used by stand-alone applications to exchange raw binary data, such as images. Ping Pong messages are special messages that the WebSocket protocol uses to keep the connection alive.
Binary WebSocket connections are used by applications to stream binary data from the server to multiple clients. They can be used to create:
Streaming video Multimedia chats Voice over IP conversations Game communication Transport files or any kind of "free-form" data.
Scenario.
In this tutorial, you build an application to exchange images among multiple clients by using binary WebSockets that are connected to a server. You deploy the server in a Java EE7 server, and you create the client as a stand-alone JavaFX application.
Hardware and Software Requirements.
The following is a list of hardware and software requirements:
Download and install the latest version of Java SDK. Download and install NetBeans IDE 7.4 for Java EE, which includes GlassFish 4. During installation, be sure to select the check box to install GlassFish. JUnit is an optional installation and is not required for this tutorial.
Prerequisites.
Before starting this tutorial, you should:
Have installed the required software. Have basic experience with Java SE 7 desktop applications. Have basic experience with Java EE web-based applications.
Creating a Web Application.
In this section, you create a Java EE 7 web application in the NetBeans IDE.
Select File > New Project .
In the New Project dialog box, perform the following steps:
Select Java Web from Categories. Select Web Application from Projects. Click Next .
On the Name and Location page, enter BinaryWebSocketServer as the project name and click Next .
On the Server and Settings page, perform the following steps:
Select GlassFish Server 4.0 from the Server list. Select Java EE 7 Web from the Java EE Version list. Click Finish .
The BinaryWebSocketServer project is created in NetBeans.
Creating the Binary WebSocket Server Endpoint.
In this section, you create the WebSocket server endpoint.
Right-click the BinaryWebSocketServer project and select New > Other .
On the New File page, perform the following steps:
Select the Web category. Select the WebSocket Endpoint file type. Click Next .
On the Create WebSocket Endpoint page, perform the following steps:
Enter BinaryWebSocketServer for the class name. Enter com.demo.websocket for the project name. Enter /images for the WebSocket URI. Click Finish .
Add a static Set of Session objects just below the public class BinaryWebSocketServer.
Add the following imports after the package com.demo.websocket declaration:
Alternatively, you can import the classes by selecting the Fix Imports option.
From the NetBeans menu, select Source > Fix Imports . In the Fix All Imports dialog box, select the classes that you want to import and click OK .
Add the following two methods to add and remove sessions:
Add the following imports:
Modify the onMessage method.
Add the following imports:
Creating the JavaFX Project.
In this section, you create the WebSocket client application.
Select File > New Project .
In the New Project dialog box, perform the following steps:
Select JavaFX from the Categories list. Select JavaFX Application from the Projects list. Click Next .
On the Name and Location page, enter JavaFXBinaryWsClient for the project name and click Finish .
To use WebSocket in Java SE/FX applications, you need additional JAR libraries. This example uses Project Tyrus, which is the reference implementation for Java WebSockets. The required JAR files are provided as part of this tutorial.
Right-click JavaFXBinaryWsClient and select New > Other .
On the Choose File page, perform the following steps:
Select Other from the Categories list. Select Folder from the File Types list. Click Next .
On the Name and Location page, enter lib for the folder name and click Finish .
Add the WebSocket implementation JARs to the project.
Download the WebSocket Client Jars from this zip file. Extract the files to the lib folder of the JavaFXBinaryWsClient project.
You can view the files in NetBeans on the Files tab.
Right-click the JavaFXBinaryWsClient project and select Properties .
Select the Libraries page and click Add JAR/Folder .
In the Add JAR/Folder dialog box, add the unzipped JAR files.
Browse to the lib folder in the JavaFXBinaryWsClient project. Select all of the JAR files. Click Open .
In the Project Properties dialog box, click OK .
If you see a reference warning about the dist.jar file, ignore it. The file is built with the project.
Creating the JavaFX Client.
In this section, you build the JavaFX binary WebSocket client.
Connect to the WebSocket server.
Create a simple JavaFX layout.
Send and receive binary WebSocket messages.
Open the javafxbinarywsclient.JavaFxBinaryWsClient Java class.
Annotate the class with the @javax.websocket.ClientEndpoint annotation.
Add the following imports:
Add the following instance variables:
A private javax.websocket.Session session to communicate messages to the server A private javafx.scene.image.ImageView imageView to display images sent from the server A private static final Logger LOGGER = Logger.getLogger(JavaFXBinaryWsClient.class.getName()); to log messages and errors in the application.
Add the following imports:
Add a method to connect to the WebSocket server.
This method configures the running application as a WebSocket client.
Add the following imports:
At the beginning of the start method, invoke the connectToWebSocket method.
Replace the contents of the start method after the connectToWebSocket() call to create the layout.
At a minimum, your layout needs the following:
A javafx.scene.control.Button to select an image to send A javafx.scene.image.ImageView to display images received.
The following code uses an AnchorPane to arrange the components:
Add the following import:
Create a method to select and send an image.
Add the following imports:
Create an event handler for the button and invoke the selectAndSendImage method. Make the stage method parameter in the start method to use it inside the event handler.
Add the following imports:
Create the WebSocket methods to handle connections and messages.
A method annotated by javax.websocket.OnOpen that sets the session variable A method annotated by javax.websocket.OnClose that attempts to reconnect if the connection is closed A method annotated by javax.websocket.OnMessage that handles the messages and creates an image to be displayed in the imageView.
Add the following imports:
Use the following completed JavaFXBinaryWsClient source code for reference:
Running and Testing the Application.
Run the BinaryWebSocketServer project: Right-click the BinaryWebSocketServer project and select Run .
The http://localhost:8080/BinaryWebSocketServer URL opens in a web browser after GlassFish server starts.
Run the JavaFXBinaryWsClient project: Right-click the JavaFXBinaryWsClient project and select Run .
A new window with the JavaFX application opens.
Repeat step 2 to run another instance of the JavaFXBinaryWsClient project. (Do not close the window.)
Two windows are running.
In one of the windows, press the Send Image! button, browse for an image, and open it.
The image is displayed in both windows.
Open more instances of the JavaFX applications and send another image. All instances will receive and display the images.
Summary.
In this tutorial, you learned to:
Create Binary WebSocket services with Java EE7 Create Binary WebSocket clients with Java FX.
Next Steps.
This is a simple tutorial for binary WebSockets. You can try to implement more complex scenarios, such as the following, and use this project as the basis:
Save the image on the server to send it to newly connected users. Send the latest three images to the clients. Combine text messages with images to create an image-based chat client. Stream videos as a sequence of images.
Resources.
To learn more about WebSockets or Java EE7, see the following resources:
JSR 356: JavaTM API for WebSocket WebSocket Java EE7 Tutorial Java EE Technical Documentation Java FX Documentation Project Tyrus, WebSocket Reference Implementation. Using WebSocket for Real-Time Communication in Java Platform, Enterprise Edition 7 OBE Java EE 7: New Features.
Credits.
Lead Curriculum Developer: Eduardo Moranchel.
To navigate this Oracle by Example tutorial, note the following:
Topic List: Click a topic to navigate to that section. Expand All Topics: Click the button to show or hide the details for the sections. By default, all topics are collapsed. Hide All Images: Click the button to show or hide the screenshots. By default, all images are displayed. Print: Click the button to print the content. The content that is currently displayed or hidden is printed.
To navigate to a particular section in this tutorial, select the topic from the list.