きしだのはてな このページをアンテナに追加 RSSフィード

2013-06-13(木) WebSocketをネタにJava EE 7正式版を試してみる

[][]WebSocketをネタにJava EE 7正式版を試してみる 09:35 WebSocketをネタにJava EE 7正式版を試してみるを含むブックマーク

Java EE 7がリリースされて、それに対応したGlassFish 4もリリースされました。

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


ということで、NetBeansGlassFishを使って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」版をダウンロードします。

f:id:nowokay:20130613084740p:image

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


NetBeansの起動

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


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

f:id:nowokay:20130613084741p:image


NetBeansの起動後の画面です。

f:id:nowokay:20130613084742p:image


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

f:id:nowokay:20130613084743p:image

このブログは、「すべてのブログ」からたどれるPlanet NetBeansに登録されたものが表示されます。

http://planetnetbeans.org/ja/

NetBeansに関するブログを書く人は登録しておくといいと思います。


NetBeansGlassFishの組み込み

インストーラ版でNetBeansを起動した場合にはすでにGlassFishが設定されているはずですが、ここでは先ほどダウンロードしたGlassFishを登録する必要があります。

メインメニューから「ウィンドウ > サービス」を選択します。

f:id:nowokay:20130613084744p:image


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

f:id:nowokay:20130613084745p:image


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

f:id:nowokay:20130613084746p:image


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

f:id:nowokay:20130613084747p:image


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

f:id:nowokay:20130613084749p:image


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

f:id:nowokay:20130613084750p:image


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

f:id:nowokay:20130613084751p:image


Webプロジェクトの作成

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


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

f:id:nowokay:20130613084752p:image


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

f:id:nowokay:20130613084753p:image


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

f:id:nowokay:20130613084754p:image


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

f:id:nowokay:20130613084755p:image

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


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

f:id:nowokay:20130613084756p:image


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

Java EE 7でWebSocketと通信するためのWebSocketエントリポイントを作成します。

「プロジェクト」ウィンドウの「ソース・パッケージ」で右クリックして、メニューから「新規 > その他」を選択します。

f:id:nowokay:20130613084757p:image


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

f:id:nowokay:20130613084758p:image


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

f:id:nowokay:20130613084759p:image

「終了」ボタンを押すと、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>

実行

それでは実行してみましょう。

プロジェクトを右クリックしてメニューから「実行」を選択します。

f:id:nowokay:20130613084800p:image


GlassFishが起動して、プロジェクトが配備されます。

f:id:nowokay:20130613084801p:image


テキストボックスになにか入力して「送信」ボタンを押すと、その文字列が表示されます。

f:id:nowokay:20130613084802p:image

複数のブラウザを開いておくと、すべてのブラウザで文字列が表示されます。

WebSocketがちゃんと動いてますね。


これで、簡単にチャットなどを作ることができそうです。

トラックバック - http://d.hatena.ne.jp/nowokay/20130613