java ee7, html5

Copyright © 2012, Oracle and/or its affiliates. All rights reserved.1

Yoshio TeradaJava Evangelisthttp://yoshio3.com, Twitter : @yoshioterada

Java EE 7HTML 5WebSocket

http://yoshio3.com/


以下の事項は、弊社の一般的な製品の方向性に関する概要を説明するものです。また、情報提供を唯一の目的とするものであり、いかなる契約にも組み込むことはできません。以下の事項は、マテリアルやコード、機能を提供することをコミットメント（確約）するものではないため、購買決定を行う際の判断材料になさらないで下さい。オラクル製品に関して記載されている機能の開発、リリースおよび時期については、弊社の裁量により決定されます。

Oracle は、米国オラクルコーポレーション及びその子会社、関連会社の米国及びその他の国における登録商標です。文中の社名、商品名等は各社の商標または登録商標である場合があります。


1998 年 5 月

エンタープライズアプリケーション

1999 年 12 月10 specs

堅牢スケーラブル

2001 年 9 月13 specs

Web サービス

2003 年 11 月20 specs

かんたん開発

2006 年 5 月23 specs

軽量化

2009 年 12 月28 specs

Project JPE

J2EE 1.3

CMP,ConnectorArchitecture

Java EE 5

Ease of Development,Annotations,EJB 3.0, JPA, JSF, UpdatedWeb Services

J2EE 1.4Web Services Mgmt, Deployment,AsyncConnector

Java EE 6

Pruning,ExtensibilityEase of Dev,CDI, JAX-RS

Web Profile

Servlet 3.0, EJB 3.1 Lite

J2EE 1.2Servlet, JSP,EJB, JMSRMI/IIOP

Java EE の歴史


Java EE 7 : 2013 年春頃提供開始予定

テーマ： HTML5 と開発生産性の向上

Java EE 7 SDK の提供開始


Java EE 7 へ含まれる予定の JSR 一覧

Connector1.6

JPA 2.1 JTA 1.2 JMS 2.0

Managed Bean 1.0 EJB 3.2

Common Annotations

1.1

Interceptors 1.1

CDI 1.1

PortableExtensio

ns Servlet 3.1

JSP 2.2JSF 2.2

JAX-RS 2.0

EL 3.0

Bean

Valid

atio

n1

.1

Java CachingAPI (JSR-

107)Batch

Application(JSR-352)

Java API forJSON

(JSR-353)

Java API forWebSocket(JSR-356)

新規追加大幅な更新通常の更新


今日ご紹介する内容

WebSocket ( 新 ) JSF 2.2

HTML5 化に関するテーマ

そして、研究・開発プロジェクト


JSR 344 : JavaServer™ Faces 2.2


JSF : コンポーネント・ベース開発


JavaServer Faces

JSF フレームワークと開発の概要

DB

Webサービス

プレゼンテーション

• アプリケーションロジック

• コンバート ( 変換 )• バリデーション ( 検証 )• ナビゲーション ( 画面遷

移 )• イベント処理

ビジネスロジッククライアント Web アプリケーション

Web コンテナ


デザイナーと開発者の共同作業が可能に (jsf:value=“”, jsf:action=“”)

デザイナーはテキスト＆ブラウザで確認プログラマーは JSP ＆ Web コンテナで確

認プログラム後のデザイン修正は困難

デザイナーはテキスト＆ブラウザで確認

プログラマーは XHTML に要素を挿入同一ファイルの為デザイン修正も容易

デザイナー(HTML)

プログラマー(JSP)

コード変換が必要

今までの開発スタイル

デザイナープログラマー(XHTML)

同一ファイルを参照編集可能

JSF 2.0 の開発スタイル


HTML 5 マークアップ・サポート

JSF 2.2 からは素の HTML コードに

JSF 属性を埋め込みましょう !!


HTML 5 マークアップ・サポート

HTML 5 の表現力をそのままに !!


JSR 356: JavaTM API for WebSocket


WebSocket APIwww.w3.org/TR/websockets/


Java API for WebSocket (JSR-356)

http://jcp.org/en/jsr/detail?id=356http://java.net/projects/websocket-spec

仕様

ステータス： Early Draft

http://jcp.org/en/jsr/detail?id=356

http://jcp.org/en/jsr/detail?id=356

http://java.net/projects/websocket-spec

http://java.net/projects/websocket-spec


参照実装http://java.net/projects/tyrus

最新の GlassFish v4 開発ビルドにバンドル済


Java の WebSocket標準実装はとてもかんたん


アノテーションレベル内容

@WebSocketEndpoint クラス WebSocket のエンドポイントを示す

@WebSocketOpen メソッド接続確立時に呼び出すメソッドを指定

@WebSocketClose メソッド接続切断時に呼び出すメソッドを指定

@WebSocketMessage メソッドメッセージを受信した時に呼び出すメソッドを指定

@WebSocketPathParam メソッドパラメータ

エンドポイントの URI 引数に指定されたパラメータを取得する際に仕様

@WebSocketError メソッドエラー発生時に呼び出すメソッドを指定

WebSocket アノテーション


WebSocket アプリケーション・ライフサイクル

@WebSocketEndpoint("/hello")var wsUri = "ws://HOST/foo/hello";var websocket = new WebSocket(wsUri);

@WebSocketOpenwebsocket.onopen = function(evt) { onOpen(evt) };

websocket.onmessage = function(evt) { onMessage(evt) };

@WebSocketMessage

websocket.onerror = function(evt) { onError(evt) };

@WebSocketError

websocket.onclose = function(evt) { onClose (evt) };

@WebSocketClose

JavaScript WebSocket API


import javax.net.websocket.annotations.*;

@WebSocketEndpoint("/hello")public class HelloBean {

@WebSocketMessage public void sayHello(Session session, String msg) { session.getRemote().sendString(“Hello” + msg); }}

HelloWorld アプリケーション (1対１ )


デモ


Twitter

監視

サンプル・アプリケーションの構成 (多対１ )

Remote Endpoint

RE

RE

RE

Session

Session

Session

WebSocketEndpoint

Twitter4J


@WebSocketEndpoint(value= "/twitter")public class TwitterWebSocket { @WebSocketOpen public void initOpen(Session session) { TwitterClientSingleton.peers.add(session); } @WebSocketClose public void closeWebSocket(Session session){ TwitterClientSingleton.peers.remove(session); }}

Twitter Streaming アプリ


@Startup　 @Singletonpublic class TwitterClientSingleton extends StatusAdapter { public static Set<Session> peers = null;　 static { peers = Collections.synchronizedSet(new HashSet()); } ．．．続く

Twitter Streaming アプリ

Session Session Session Session

クライアントの参照情報を保持

RE RE RE RE・・・・・・


public void onStatus(Status status) { User user = status.getUser(); String resStr = "@" +user.getScreenName() + " : " + status.getText() ; try { for (Session peer : peers) { peer.getRemote().sendString(resStr); } } catch (IOException ioe) { ioe.printStackTrace(); } }

データ送信コード ( ブロッキング )シーケンシャルに配信を実施 ( 大量のデータで待ち )

全ピア (RE) に対して配信

Session Session Session Session

RE RE RE RE


データ送信コード ( ノン・ブロッキング )

for (Session peer : peers) { Future<SendResult> futureSend = peer.getRemote().sendStringByFuture(resStr); while (!futureSend.isDone()) { // wait here ? } SendResult status = futureSendResult.get(); if (status.isOK()) { // ok } else { // whoops, send failed. }}


subprotocol の指定も可能 (iana.org)

http://www.iana.org/assignments/websocket/websocket.xml


@WebSocketEndpoint("/bookings/{guest-id}")public class BookingServer { @WebSocketMessage public void processBookingRequest( @WebSocketPathParam("guest-id") String guestID, String message, Session session) { // guest-id に紐づく処理を実装 }}

URI のテンプレートマッチ@WebSocketPathParam について

１段目のみ可能


エンコード、デコード

@WebSocketEndpoint( value="/hello", encoders={MyMessage.class}, decoders={MyMessage.class})


JSON から文字列へのエンコード

public class MyMessage implements Encoder.Text<MyMessage> { private JsonObject jsonObject;

public String encode(MyMessage myMessage) { return myMessage.jsonObject.toString(); }}


受信データの JSON へのデコード

public class MyMessage implements Decoder.Text<MyMessage> { private JsonObject jsonObject;

public MyMessage decode(String s) { jsonObject = new JsonReader(new StringReader(s)).readObject(); return this;"} public boolean willDecode(String string) { return true; // デコード可能か否かを返す}}


OracleResearch Project !!


Project Avatar


先進的な HTML 5 アプリ構築フレームワーク– WebSocket, Server-Sent Event, RESTful に対応

モジュール化対応 JavaScript フレームワーク軽量なサーバ・アーキテクチャ (Thin-Server Architecture)

コンセプト

Project Avatar とは

Avatar のメリット– サーバ・サイド JavaScript と Java EE アプリの融合– Java VM 上で稼働する JavaScrip のスケーラビリテイ・信頼性・運用保守性


Thin-Server アーキテクチャ (TSA)

今までアプリView

Modelサーバ側でマー

ジ

HTTP/JS

TSAView

Service

アプリ

クライアント側でマージ

HTTP/JS

JSON

View

Model


Avatar の概念　 ( クライアント側 )

ブラウザ (JavaScript/DOM)

View (UI Node) Avatar(Controller)

Web コンポーネントと同様<a:page><a:form><a:input><a:textarea> …

• データ・　　　　バインディング

• ナビゲーション• ローカル・　　　

ストレージ

アクセス方法を提供• ローカル• RESTful• SSE• WebSocket

Model


Avatar の概念　 ( サーバ側 )

Nashorn (JavaVM で稼働する JavaScript エンジン )

Service Avatar

アクセス方法を提供• RESTful• SSE• WebSocket

ルーティングJSON のシリアライズ

利用可能なデータソース• ファイル• DB(JPA)• インメモリ

Coherence

Data プロバイダ


Avatar のアーキテクチャ

UI

Avatar アプリ(HTML 5/JS/CSS)

Avatar 実行環境

HTML 5 DOM

ローカルストレージ

Avatar アプリ（ XML/JavaScript ）

Avatar コンパイラ

Nashorn (JavaScript エンジン )

ブラウザ App サーバ

Java EE アプリ

Viewサービス

Dataサービス

Java EEサービス

HTTP

HTTP/WebSocket

HTTP/WebSocket



UI


Avatar 実行環境

HTML 5 DOM






Java EE アプリ

Viewサービス

Dataサービス

Java EEサービス

HTTP

HTTP/WebSocket

HTTP/WebSocket

① Avatar アプリの作成



UI


Avatar 実行環境

HTML 5 DOM






Java EE アプリ

Viewサービス

Dataサービス

Java EEサービス

HTTP

HTTP/WebSocket

HTTP/WebSocket

② Avatar コンパイラで　　 View サービス　　 Data サービス　　を生成



UI


Avatar 実行環境

HTML 5 DOM






Java EE アプリ

Viewサービス

Dataサービス

Java EEサービス

HTTP

HTTP/WebSocket

HTTP/WebSocket

③ View サービスの　「複数ページの一括」　　ダウンロード　（※プラグインは不要）



UI


Avatar 実行環境

HTML 5 DOM






Java EE アプリ

Viewサービス

Dataサービス

Java EEサービス

HTTP

HTTP/WebSocket

HTTP/WebSocket

④ WebSocket/Server-Sent Event/ RESTful で Data サービスを利用



UI


Avatar 実行環境

HTML 5 DOM






Java EE アプリ

Viewサービス

Dataサービス

Java EEサービス

HTTP

HTTP/WebSocket

HTTP/WebSocket

⑤ サーバ側は Java EE 　のサービスも利用可能



UI


Avatar 実行環境

HTML 5 DOM






Java EE アプリ

Viewサービス

Dataサービス

Java EEサービス

HTTP

HTTP/WebSocket

HTTP/WebSocket

⑥ クライアント側は　　 HTML 5, DOM, 　　ローカルストレージ　　等を利用可能


アプリ View

Model

クライアントで動作するアプリ(Hello World)<a:viewModule …> <a:localModel> var NameModel = function(){ this.first = "Planet"; this.last = "Earth"; this.clear = function(){ this.first = this.last = ""; }; }; <a:/localModel>

<a:page> <a:model id="name" idref="NameModel"/> <a:form> <a:input label="First Name" value="#{name.first}"/> <a:input label="Last Name" value="#{name.last}"/> <a:output value="Hello #{name.first} #{name.last}"/> <a:button label="Clear" action="#{name.clear()}"/><a:/form><a:/page><a:/viewModule>ローカルのモデルを定義


WebSocket で動作するアプリ（ Model の実装例 )

<a:socketModel> var ChatModel = function(){ this.message = ""; this.user = ""; var superSend = this.$send; this.$send = function(){ this.process(this.message); superSend.call(this); }; …. };<a:/socketModel>

ServiceJSON

Model

Model 用に用意されているプロトタイプ関数を上書き実装

• this.$onMessage• this.$send• etc.


WebSocket で動作するアプリ（ Service の実装例 )

<a:socketService url="websocket/chat"> var SocketService = function(){ this.$onMessage = function(peer,message){ this.process(message); peer.getContext().sendAll(message); };};<a:/socketService>

ServiceJSON

Model

Service 用に用意されているプロトタイプ関数を上書き実装

• this.$onMessage• this.$onTimeOut• etc.


New Announcement2013 年春頃Java イベント開催予定

java ee7, html5

Technology