WebSocketをネタにJava EE 7正式版を試してみる

Java EE 7がリリースされて、それに対応したGlassFish 4もリリースされました。
ついでに、Java EE 7やGlassFish 4に対応したNetBeans 7.3.1もリリースされています。

ということで、NetBeansとGlassFishを使ってJava EE 7を試してみようと思います。
今回は、Java EE 7の中でも簡単なコードで動きの派手なWebSocket対応を試してみます。

ダウンロード

まずNetBeansをダウンロードします。
https://netbeans.org/downloads/

NetBeansは、ちょっと試すにしてもずっと使うにしても、インストーラーではなくzipで落とすほうが楽なので、ここでは「プラットフォーム」に「OSに依存しないZIP」を選択します。
「サポートテクノロジー」が「Java EE」か「すべて」のものをダウンロードしてください。

インストーラ版をダウンロードした場合にはバンドルされているので不要ですが、今回はGlassFishもダウンロードします。
https://glassfish.java.net/download.html

ここでは、「Full Java EE platform」で、「Zip」の「Multilingual」版をダウンロードします。

ダウンロードしたら適当なフォルダに解凍してください。

NetBeansの起動

JDKを複数インストールしている人は、NetBeansを起動する前に「/etc/netbeans.conf」の「netbeans_jdkhome」でJDKのフォルダを設定しておくほうがいいと思います。

/binフォルダにある、環境にあわせた実行ファイルを起動すると、NetBeansが起動します。

NetBeansの起動後の画面です。

「最新情報」でなんかネタが拾われててこっぱずかしいですね。

このブログは、「すべてのブログ」からたどれるPlanet NetBeansに登録されたものが表示されます。
http://planetnetbeans.org/ja/
NetBeansに関するブログを書く人は登録しておくといいと思います。

NetBeansへGlassFishの組み込み

インストーラ版でNetBeansを起動した場合にはすでにGlassFishが設定されているはずですが、ここでは先ほどダウンロードしたGlassFishを登録する必要があります。
メインメニューから「ウィンドウ > サービス」を選択します。

「サービス」ウィンドウが開くので、「サーバー」を右クリックしてメニューから「サーバーの追加」を選択します。

「サーバー・インスタンスの追加」ダイアログが開くので、サーバーで「GlassFish Server」を選択します。名前はそのままでもかまいませんが、ここでは「GlassFish Server 4.0」として「次へ」ボタンを押します。

NetBeansでは使わないプラグインは無効になっています。「Java WebおよびEE」の機能がここでアクティブ化します。

GlassFishを解凍したフォルダを「インストール場所」に入力します。GlassFishが検出されると、下部に検出メッセージが表示されるので、「次へ」ボタンを押します。

ドメインなどの設定ができますが、そのまま「終了」ボタンを押します。

サーバーとしてGlassFishが追加されました。ここからGlassFishを起動・停止することもできます。ここでは、確認だけ。

Webプロジェクトの作成

まずはWebアプリケーション用のプロジェクトを作成します。

メインメニューから「ファイル > 新規プロジェクト」を選択します。

「Java Web」カテゴリから「Webアプリケーション」を選んで「次へ」ボタンを押します。

プロジェクト名やプロジェクトの場所を選択します。ここではプロジェクト名に「WebApplicationEE7」として「次へ」ボタンを押します。

この画面ではサーバーやコンテキストパスの設定ができます。「Java EEバージョン」が「Java EE 7 Web」になっていますね。

そのまま「次へ」ボタンを押します。

JSFなどのフレームワークを選ぶことができますが、ここではそのまま「終了」ボタンを押します。

WebSocketエントリポイントの作成

Java EE 7でWebSocketと通信するためのWebSocketエントリポイントを作成します。
「プロジェクト」ウィンドウの「ソース・パッケージ」で右クリックして、メニューから「新規 > その他」を選択します。

「Web」カテゴりから、「ファイル・タイプ」として「WebSocketエンドポイント」を選択して「次へ」ボタンを押します

ここでは、「クラス名」や「WebSocket URI」などはそのまま、パッケージ名だけ設定しておきます。

「終了」ボタンを押すと、WebSocketエンドポイントとなるクラスが生成されます。

処理を加えて、次のように編集します。

package wsock;

import java.util.Collections;
import java.util.HashSet;
import java.util.Set;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

/**
 *
 * @author naoki
 */
@ServerEndpoint("/endpoint")
public class NewWSEndpoint {

    static Set<Session> sessions = Collections.synchronizedSet(new HashSet<Session>());
    
    @OnMessage
    public void onMessage(String message) {
        for(Session s : sessions){
            s.getAsyncRemote().sendText(message);
        }
    }
    
    @OnOpen
    public void open(Session sess){
        sessions.add(sess);
    }
    @OnClose
    public void close(Session sess){
        sessions.remove(sess);
    }
}

表示ページの作成

表示ページを作ります。
ここでは、プロジェクト作成時に同時に生成されたindex.htmlファイルをそのまま編集します。
URLは、プロジェクト作成時に指定したコンテキストパスにあわせて修正してください。

<!DOCTYPE html>
<html>
    <head>
        <title>WebSocketテスト</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script type="text/javascript">
            var socket;
            $(document).ready(function(){
                var host="ws://localhost:8080/WebApplicationEE7/endpoint";
                socket = new WebSocket(host);
                
                socket.onmessage = function(message){
                    $('#log').append(message.data + "<br/>");
                }

                $('#send').click(function(){
                    var text = $('#msg').val();
                    socket.send(text);
                    $('#msg').val('');
                })
    
            });
        </script>        
    </head>
    <body>
        <h1>WebSocketテスト</h1>
        <div id="log">
        </div>
        <input id="msg" type="text"/>
        <button id="send">送信</button>
    </body>
</html>