寺田　佳央 – Yoshio Terada

Java EE 7 WebSocket Client Sample Application with JavaFX

At the previous entry, I wrote how to WebSocket application on Server Side. However JSR 356 Java API for WebSocket is providing Client API also. So in this entry, I will explain the WebSocket Client API with JavaFX.

The image of this application is like following video. There is one button on the bottom of application. If you click the button, the application connect to WebSocket Server and receive the messages and show the message on the TableView.

The example of running Application

Preparation :
In order to compile and run the application, you need following libraries.

* grizzly-framework-2.2.19.jar
* grizzly-http-2.2.19.jar
* grizzly-http-server-2.2.19.jar
* grizzly-websocket-2.2.19.jar
* tyrus-servlet-1.0-b08.jar

You can download the Grizzly related libraries from following site.

http://grizzly.java.net/nonav/docs/docbkx2.2/html/dependencies.html

* Grizzly is a popular NetWork Server framework which is wrote by Java NIO. And originally the grizzly was created for the server engine for GlassFish. It has high scalability and good performance. If you use the grizzly libraries, you don’t need to write the low level socket programing by Java.

In this client application, I will use the Grizzly to connect the WebSocket Server with less code.

Also, you need to get the jar file as tyrus-servlet (reference implementation of Java API for WebSocket) and it include the javax.net.websocket package. Please get the libraries from following site ?

http://repo1.maven.org/maven2/org/glassfish/tyrus/tyrus-servlet/1.0-b08/

Then I will start to create a NetBeans Project by selecting JavaFX FXML Application.

In this Project, I will specified the project name as “JavaFX-WebSocket”. After that in order to be able to use the downloaded libraries in the project,I configured and added the libraries to the project.

If the project had created successfully , following 3 classes will be created by NetBeans.
”JavaFXWebSocket.java”, ”Sample.fxml”, ”SampleController.java”.

I will try to update the above 3 classes as follows. At first , I will customize the view(FXML). If you already configured the SceneBuilder, you can show the SceneBuilder screen on your desktop after you click the Sample.fxml file on NetBeans Project.

This Sample Application is very simple. So I only change the size of the Window and added two component as Label and TableView. After drag and drop these component, I inserted the ID as “table” for TableView. And there is TableColumn inside of TableView. So I specified the ID as “column” for TableColumn.

If you change the screen, you may get the FXML code like follows.

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="453.0" xmlns:fx="http://javafx.com/fxml" fx:controller="javafx.websocket.SampleController">
  <children>
    <Button fx:id="button" layoutX="326.0" layoutY="365.0" onAction="#handleButtonAction" text="Start TimeLine" />
    <Label fx:id="label" layoutX="126.0" layoutY="120.0" minHeight="16.0" minWidth="69.0" />
    <Label layoutX="14.0" layoutY="14.0" prefWidth="292.0" text="WebScoket Twitter TimeLine Client Smaple" underline="true" />
    <TableView fx:id="table" layoutX="14.0" layoutY="45.0" prefHeight="311.0" prefWidth="425.0">
      <columns>
        <TableColumn id="" maxWidth="445.0" prefWidth="445.0" text="Message List from Twitter" fx:id="column" />
      </columns>
    </TableView>
  </children>
</AnchorPane>

After customize the View, I will start to implement the Controller of JavaFX. For JavaFXWebSocket.java , there is no need to modify in this application. So I will use the NetBeans created code.

package javafx.websocket;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class JavaFXWebSocket extends Application {
    
    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml"));
        
        Scene scene = new Scene(root);
        
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

I implemented the SampleController.java as follows. At first , I inserted the “@FXML TableView table” and “@FXML TableColumn column”. The field name is the same id of FXML(fx:id=”table”, fx:id=”column” ). And I implements the action of push the button on handleButtonAction method. Twitter Streaming is long running process. So I need to implement the check program as multi thread. At JavaFX ,javafx.concurrent.Service, javafx.concurrent.Task classes is prepared to implement the Task. So I had used the Service class to do it.

package javafx.websocket;

import java.net.URI;
import java.net.URISyntaxException;
import java.net.URL;
import java.util.ResourceBundle;
import java.util.concurrent.CountDownLatch;
import java.util.concurrent.TimeUnit;
import java.util.logging.Level;
import java.util.logging.Logger;
import javafx.concurrent.Service;
import javafx.concurrent.Task;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javax.websocket.ClientEndpointConfiguration;
import javax.websocket.DefaultClientConfiguration;
import javax.websocket.DeploymentException;
import org.glassfish.tyrus.client.ClientManager;

public class SampleController implements Initializable {

    @FXML
    private TableView table;

    @FXML
    private TableColumn<RowData,String> column;
    
    @FXML
    private void handleButtonAction(ActionEvent event) {
        TwitterCheckService thread = new TwitterCheckService(table);
        thread.start();
    }

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        table.setEditable(true);
        column.setResizable(true);
        column.setCellValueFactory(new PropertyValueFactory<RowData, String>("message"));
    }

    class TwitterCheckService extends Service {

        private TableView table;
        private CountDownLatch messageLatch = null;

        public TwitterCheckService(TableView table) {
            this.table = table;
        }

        @Override
        protected Task createTask() {
            Task<Void> task = new Task<Void>() {
                @Override
                protected Void call() throws Exception {
                    messageLatch = new CountDownLatch(1);
                    try {
                        URI clientURI = new URI("ws://localhost:8080/TwitterTimeLine/twitter");
//            ClientContainer cliContainer = ContainerProvider.getClientContainer();
                        ClientManager cliContainer = org.glassfish.tyrus.client.ClientManager.createClient();

                        ClientEndpointConfiguration clientConfig = new DefaultClientConfiguration();
                        cliContainer.connectToServer(new TwitterClient(table), clientURI);
                        messageLatch.await(1, TimeUnit.SECONDS);
                    } catch (DeploymentException | URISyntaxException | InterruptedException ex) {
                        Logger.getLogger(SampleController.class.getName()).log(Level.SEVERE, null, ex);
                    }
                    return null;
                }
            };
            return task;
        }
    }
}

In the above class, there is initialize() method to initialize the class. In the method, I wrote column.setCellValueFactory(new PropertyValueFactory(“message”)) . This is the value configuration of the Table column. In fact, the field of “message” in RowData class will be showed on every column in the Table. I specified the javafx.scene.text.Text type instead of String type, because it was difficult to manage the size of String in the Column of TableView. So instead of String, I used the Text and Text#setWrappingWidth could manage the size of viewable String.

package javafx.websocket;

import javafx.scene.text.Text;

public class RowData {

    private Text message;

    public RowData(Text message) {
        this.message = message;
        message.setWrappingWidth(400);
    }

    public Text getMessage() {
        return message;
    }

    public void setMessage(Text message) {
        this.message = message;
    }
}

I will pick up and explain the important point of WebSocket Client in SampleController class as follows. I wrote the comment in the code as “// ClientContainer cliContainer = ContainerProvider.getClientContainer();” In fact the above code is recommended as standard. And you should write the following property on the system property.

“webocket.clientcontainer.classname= actual class name ”

However in this programing , I faced the error. Thus I wrote the following in order to get the instance of ClientContainer. “ClientManager cliContainer = org.glassfish.tyrus.client.ClientManager.createClient();”

            URI clientURI = new URI("ws://localhost:8080/TwitterTimeLine/twitter");
//            ClientContainer cliContainer = ContainerProvider.getClientContainer();
            ClientManager cliContainer = org.glassfish.tyrus.client.ClientManager.createClient();

            ClientEndpointConfiguration clientConfig = new DefaultClientConfiguration();
            cliContainer.connectToServer(new TwitterClient(table), clientURI);
            messageLatch.await(20, TimeUnit.SECONDS);

I specified the “TwitterClient(table)” inside of cliContainer.connectToServer(new TwitterClient(table), clientURI) line. It is a WebSocket Client code which equal to the class of adding the @WebSocketEndpoint annotation at the server side. Instead of the “@WebSocketEndpoint” annotation, we must specify the “@WebSocketClient” annotation at the client side code. Following is the client side code of WebSocket client.

package javafx.websocket;

import javafx.collections.ObservableList;
import javafx.scene.control.TableView;
import javafx.scene.text.Text;
import javax.websocket.Session;
import javax.websocket.WebSocketClient;
import javax.websocket.WebSocketClose;
import javax.websocket.WebSocketMessage;
import javax.websocket.WebSocketOpen;

@WebSocketClient
public class TwitterClient {

    TableView table;
    ObservableList<RowData> list;

    public TwitterClient(TableView table) {
        this.table = table;
    }

    @WebSocketOpen
    public void onOpen(Session session) {
        System.out.println("Connection had opened.");
    }

    @WebSocketMessage
    public void onMessage(String message) {
        if (message.length() == 0) {
            return;
        }
        // In order to adjst the size of String in Table, I used Text.
        Text text = new Text(message);

        list = table.getItems();
        list.add(0,new RowData(text));
    }

    @WebSocketClose
    public void closeConnection(Session session) {
        System.out.println("Connection had closed.");
    }
}

Actually the code is very similar to the server side code. Instead of the @WebSocetEndpoint, I specified the @WebSocketClient annotation. And inside of the class, we can implements the method which is added @WebSocketOpen, @WebSocketMessage and @WebSocketClose annotation. In this program, client receive the message from the server. And there is no need to send the data to server. So I implemented the @WebSocketMessage public void onMessage(String message) method. In this method, the client receive the message from server and wrapping the String to Text object in order to adjust the length of the viewable String (Text text = new Text(message)). Finally the message is inserted into the first line of the Table.

This WebSocket client code is very easy to implement. So you can write the WebSocket program very easily not only server side but also Java Application like JavaFX.

2012年12月22日 at 11:56 午後 2件のコメント

JavaOne Tokyo のお礼

JavaOne Tokyo にご参加頂いた皆様、誠にありがとうございました。心より御礼申し上げます。

開催前日は、あいにくの空模様で交通機関が完全に麻痺してしまったため、地方からご参加いただいた皆様の中には前日に東京にお越し頂く事ができなかった方がいらっしゃる事を伺っております。また当日お越し頂けた皆様の中には、新幹線に切り替えて、それでも新幹線が東京に到着するのが深夜となり、ホテルまでタクシーで移動された方もいらっしゃると聞いています。そのような大変な状況にも関わらず、北は北海道から南は沖縄まで日本全国から、JavaOne Tokyo にご参加頂きました皆様、本当にありがとうございました。

JavaOne Tokyo がこれだけ盛り上がったのも、一重に日本全国からご参加頂いた数多くの Java 開発者の皆様のおかげでございます。皆様のご参加、心より御礼申し上げます。

今回の JavaOne は７年振りという事もあり、JavaOne を全くご存知ない世代の方々も数多く参加して頂けたのではないかと思います。JavaOne をご存知ない世代の方々に対して、Java の開発者の祭典である JavaOne を再び日本でお届けできた事を心より嬉しく思っております。

また、この２日間、Twitter 上に JavaOne のメッセージで溢れ帰る程の多くのつぶやきが見受けられました。この JavaOne の盛り上がり、Java 開発者の皆様のメッセージは、本社社員や、日本のオラクル社員にも十分伝わっておりますし、今回残念ながらご都合が悪くご参加いただけなかった皆様も、皆様のツイートを見て、次回は是非参加したいと言って下さっている方もお見かけ致しました。これもご参加頂いた皆様が数多くのフィードバックをしてくださったからだと思います。本当にありがとうございました。

さらにはブログで、本場 JavaOne サンフランシスコに参加された Nobeans さんも、下記のように本場 JavaOne サンフランシスコのようで楽しかったというようなメッセージも頂きました。単なる日本における Java の勉強会ではなく JavaOne Tokyo ができたんだなと嬉しく思いました。

その他にも下記のように数多くのブログの投稿を頂いております（すいません全てハンドリングできていないかもしれません、もし自分も書いたという方がいらっしゃいましたら、是非教えていただけないでしょうか）。多くの皆様から楽しかった！！というようなメッセージを頂き、次回開催希望も多く承っております。これら開発者の皆様の声はちゃんと US や日本の上層部にお伝え致します。（実は既にこのブログを書く前に、社長、取締役に報告しております。(^_^)）

JavaOne Tokyo に参加してくださった皆様のブログ：

• http://d.hatena.ne.jp/nobeans/20120406/1333697766
• http://d.hatena.ne.jp/zephiransas/20120406/1333713459
• http://d.hatena.ne.jp/megascus/20120406/1333683449
• http://d.hatena.ne.jp/s-ishigami/20120406/p1
• http://johtani.jugem.jp/?eid=74
• http://d.hatena.ne.jp/ynie/20120406/1333671989
• http://grimrose.blogspot.jp/2012/04/javaone-tokyo-2012-1-javaonejp.html?spref=tw
• http://d.hatena.ne.jp/t-horikiri/20120406/1333732983
• http://d.hatena.ne.jp/den2sn/20120407/1333724943

その他、下記のように Togetter にまとめて下さった方々も多数いらっしゃいます。誠にありがとうございます。

Togetter のまとめ一覧：

• JavaOne Tokyo 2012 NIO.2を使って、簡単ファイル操作 #JavaOneJP
• JavaFX + FXML + CSS = Javaの次世代GUI #JavaOneJP
• What’s coming in Java Message Service 2.0 #JavaOneJP
• Project Jigsaw: Putting it all Together #JavaOneJP
• Introduction to the JavaFX Scene Builder
• JavaFX and Web Integration
• Introduction to JavaFX 2.0
• JavaOne Tokyo 2012 The New JSR-107 Caching Standard #jt12_b204
• JavaOne Tokyo 2012 ForgeとArquillianを利用したJava EEアプリケーションの迅速な開発 #jt12_s231
• Learn how the JVM is fundamental to our architecture #jt12_b203
• JavaOne Tokyo 2012 JVM言語BoF #jt12_b101
• JavaOne Tokyo 2012 コンテナでテストをまわせ！Java EEへの自動テストの導入 #jt12_b202
• JavaOne Tokyo 2012 コンテナでテストをまわせ！Java EEへの自動テストの導入 #jt12_b202
• JSR 353 : Java API for JSON #やまもとゆうすけがんばれ #jt12_s233
• JSR 353 : Java API for JSON #やまもとゆうすけがんばれ #jt12_s233
• How to write low latency Java Applications #jt12_s221
• The Java EE 6 Programming Model Explained #JavaOneJP

最後に、
繰り返しになりますが、この度は JavaOne Tokyo 2012 にご参加頂きまして誠にありがとうございました。JavaOne Tokyo がまたいつか開催できればと思っております。誠に簡単ではございますが、JavaOne Tokyo に携わってくださった全ての皆様に御礼のご挨拶まで！！

2012年4月7日 at 7:19 午後

JavaOne 受講票引換券の印刷のお願い

JavaOne Tokyo 2012 にご参加の皆様

JavaOne 当日、マイページから入手可能な、受講票引換券をプリントアウトし受付にお持ちください、受講票と交換致します。

仮にマイページのログイン方法が分からない場合、もしくは受講票の引換券が表示されない等のなどの問題がございましたら、下記のレジストレーション事務局までお問い合わせください。

お問い合わせ：
JavaOne Tokyo レジストレーション事務局
E-Mail：info-javaone_jp AT oracle.com
TEL：03-6834-4694（平日10：00～18：00）

詳細：
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
JavaOne Tokyo 2012　受講票引換券発行/当日のご来場に関するご案内
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
申込番号：[XXXXXXXXXX]

この度は、JavaOne Tokyo 2012にお申し込みいただきありがとうございます。マイページより受講票引換券の発行を開始させていただきましたのでお知らせいたします。お手数ではございますが、ご来場前にご自身で受講票引換券を印刷し、当日はお忘れのないようお持ちください。

また、下記のご案内につきましては、ご来場前に必ずご一読くださいますようお願い申し上げます。

■受講票引換券の印刷/受講票のお渡し
マイページにログイン後、お申込み内容（選択セッション）一覧の右側の列に表示される「受講票の印刷」を押下し、受講票引換券を印刷してください。ご来場の際は、受講票引換券をお忘れなくお持ちください。受付にて受講票をお渡しいたします。

マイページURL： https://oj-events.jp/public/mypage/login?type=jo
ログインID：[XXXXXXXXXX]
パスワード：ご登録時にご自身で設定されたパスワード
※パスワードをお忘れの方は、上記マイページログインページに記載の
「パスワードをお忘れの方はこちら」より、再設定ください。

「ご注意」
◇受講票引換券を一度印刷した後、セッションの変更をされた場合は、再度
受講票引換券を印刷してください。当日は受講票引換券に記載のお申込み内容（選択セッション)を確認させていただき、記載がないセッションにはご入場いただけない場合がございますのでご注意ください。

◇受講票引換券及び受講票は2日間共通となります。
受講票引換券をお忘れになりますと再発行までにお時間がかかる場合があり
ますのでご注意ください。また、当日お渡しいたします受講票の再発行は致しかねますので、開催期間中は無くさないよう大切に保管してください。

■当日の受付
[受付場所]　六本木アカデミーヒルズ49
（〒106-6149 東京都港区六本木6－10－1 六本木ヒルズ森タワー49階）
[受付オープン時間]　4月4日(水)-5日(木)　8:00-19:30

印刷した受講票引換券を受付にてご提示ください。
当日朝は混雑が予想されますので、お時間に余裕をもってご来場ください。

※学生向け特別プログラムにてご参加の方は受講票引換券とともに「学生証」をご提示ください。

■来場者特典(カンファレンスバッグ/オリジナルTシャツ)
各日11時より会場内引換所にてお渡しいたします。来場者特典の引換券は受付にてお渡しいたします（お１人様１回限り）。

お問い合わせ：

JavaOne Tokyo レジストレーション事務局
E-Mail：info-javaone_jp AT oracle.com
TEL：03-6834-4694（平日10：00～18：00）

日本オラクル株式会社

2012年4月2日 at 2:05 午後

新しい Java SE API リファレンスの入手先について

2012 年 03 月 25 日、sun.com のドメインが利用不可になりました。これに併せ、java.sun.com で提供されていた Java SE API 日本語ドキュメントもオンライン経由で参照する事ができなくなりました。今後、日本語の Java SE API レファレンスはオンライン経由では参照できなくなりますので、アーカイブを御入手の上、ローカル環境でご参照ください。お手数をお掛けし申し訳ございませんが、どうぞ宜しくお願いします。

Java API の日本語ドキュメントはコチラから入手が可能です。
ドキュメントの再配布ポリシーはコチラをご参照ください。

新しい日本語 API ドキュメントのオンライン参照先URL (2012/4/11 訂正、追記)

• http://docs.oracle.com/javase/jp/1.3/api/
• http://docs.oracle.com/javase/jp/1.4/api/
• http://docs.oracle.com/javase/jp/1.5.0/api/
• http://docs.oracle.com/javase/jp/6/api/
• http://docs.oracle.com/javase/jp/7/api (2013/05/29 追記：Java SE 7 API も日本語化されました)

PS.
引き続き、英語の API ドキュメントはオンラインで参照可能です。

Java SE 7 API Documentation
Java SE 6 API Documentation
J2SE 5 API Documentation
J2SE 1.4.2　Documentation
J2SE 1.3.1　Documentation

2012年3月25日 at 10:30 午後 3件のコメント