クライアントとサーバーの間に単一の双方向接続を確立します。つまり、クライアントはサーバーにリクエストを送信するだけで、サーバーはそれを処理します。この時間を待って他の仕事を続けることができますが、プロセス全体は非同期です。この一連のチュートリアルでは、ユーザーはコンテナガラスフィッシュ4のJava EE 7の新しい解析JSON API（JSR-353）を使用するようにガイドされ、jQueryとBootstrapを組み合わせて使用します。この記事では、読者がHTML 5 WebSocketの特定の基本原則知識を持つ必要があります。
レンダリング
以下に示すように、このチュートリアルを完了した後、まずレンダリングを見てみましょう。
準備
JDK 7とMAVN 3を使用して、最初にJave EE 7のパートをご覧ください。
<properties> <endored.dir> $ {project.build.directory}/endorsed </endorsed.dir> <project.build.sourceencoding> utf-8 </project.build.so urceencoding> </properties> <dependencies> <Dependency> <GroupId> Javax </groupId> <artifactid> javaee-api </artifactid> <version> 7.0 </version> <scope>プラグイン> <プラグイン> <groupId> org.apache.maven.plugins </groupid> <artifactid> maven-compiler-plugin </artifactid> <バージョン> 3.1 </version> <configuration> 1.7 </source > <TARGEN 1.7 </TARGEN> <CompilerArguments> <endoreddirs> $ {endorsed.dir} </endoresddirs> </compilerarguments> </configuration> </plugin> <groupid> org.apache.maven.plugins </groupId> <artifactid> maven-war-plugin </artifactid> <bersion> 2.3 </version> <configuration> <failonmissingwebxml> false </faileonmissingwebxml> </configurati org.apache同時に、Glassfish 4を使用するには、次のプラグインを追加する必要があります。
プラグイン> <groupId> org.glassfish.embedded </groupid> <artifactid> maven-embedded-glassfish-plugin </artifactid> <バージョン> 4.0 </version> <confi guration> <goalprefix>埋め込み済みグラスフィッシュ</goalprefix> <App> $ {beadir}/ターゲット/$ {project.artifactid} - $ {project.version} .war </app> <autodelete> true </autodelete> <port> 8080 </port> <name> $ {{ project .artifactid} </name> <contextroot> hascode </contextroot> </configuration> <executions> <execution> <execution> <goal> deploy </goal> </goal> </exe cution> </executions> </プラグイン>WebSocketのエンドポイントを設定します
まず、次のようにサーバーのWebSocketのコードを見てから、さらに分析を実行しましょう。
com.hascode。 websockent。 decoders = chatmessagedecoder.class）パブリッククラスチャットポイント{プライベートファイナルロガーログ= getClass（）。getName（））; {log。 string room =（string）session.getuserProperties（）。get（ "room"）; ）.get（ "room"））{s.getBasicRemote（）。 }}以下の上記のコードを分析します。
@ServerEndPointを使用して、JAX-RSで使用されているように、値がURLを指定し、PathParamsパラメーターを使用できる新しいエンドポイントを定義します。
したがって、値 "/chat/{room}"を使用すると、ユーザーは次のURLを介してチャットルームに接続できます：ws：//0.0.0.0：8080/hascode/chat/java
ブレースの値（つまり部屋）は、javax.websocket.server.pathparamを使用して、エンドポイントのライフサイクルコールバックメソッドのパラメーターとして注入できます。
さらに、サーバーとクライアント側のデータを転送するために使用されるDTOクラスを使用しているため、エンコードされたクラスとデコードされたクラスを使用する必要があります。
ユーザーが初めてサーバーに接続し、部屋番号を入力してチャットルームに入ると、部屋番号がパラメーターの形で送信に注入され、値はセッションを使用してユーザーのプロパティマップに保存されます。 getUserProperties。
チャット参加者がTCP接続を介して情報をサーバーに送信すると、すべてのオープンセッションをループし、各セッションは指定されたチャットルームにバインドされ、エンコードされたデコードされた情報を受信します。
単純なテキスト情報または情報をバイナリ形式で送信する場合は、session.getBasicRemote（）。sendbinary（）またはsession.getBasicRemote（）。sendtext（）を使用できます。
次に、次のように、情報転送エンティティ（DTO：データ転送オブジェクト）を表すために使用されるコードを見てみましょう。
com.hascode。
チャットメッセージの変換
このアプリケーションでは、チャット情報とJSON形式の間の変換用にエンコードおよびデコードクラスが記述されます。
まず、デコードクラスの実装を見てみましょう。これにより、サーバーに渡されたチャット情報がChatMessage Entityクラスに変換されます。ここでは、JSON処理（JSR353）のJava APIは、JSON形式の情報をエンティティクラスに変換するために使用されます。
com.hascode。 javax.websocket.endpointconfigをインポートします。 decodeexception {chatmessage = new Chatmessage（）; GetString（sender "）;エンコーディングクラスのコードを見てみましょう。
com.hascode.javax.encodexection.webax.encoder; void init（final endpointconfig config）{} @override public void destroy（）{} @override public string encode（final chatmessage chatmessage）throws enco deexception {return json.createobjectbuilder（）.add（ "メッセージ"、chatmessage.getmessage（ ）。ここでは、JSR-353の強力な力を見ることができます。JSON.CreateObjectBuilderに電話して、DTOオブジェクトを簡単に変換します。
BootstrapとJavacsriptを介してシンプルなクライアントを構築します
最後に、有名なブートストラップ、jQueryフレームワーク、JavaScriptを包括的に使用して、シンプルなクライアントを設計します。 src/main/weappディレクトリに新しいindex.htmlファイルを作成すると、コードは次のとおりです。
<！doctype html> <html lang = "en"> <head> [..] var wsocket; var $ message; ）; //ネイティブAPI var $ messageline = $（ '<tr> <td>' + msg.received + '</td> <td>' + msg.sender + '</td> <td>' + msg .message + '</td> </tr>'）; "、" sender "：" ' + $ nickname.val（） +' "、" receive "：" ""} '; wsocket.send（msg）; $ message.val（' '）。focus（）;} function connectTochatserver（）{＃$（ '＃selected'）。 $ chatwindow.empty（ '。chat-wrapper'）; function（）{$ $（ '＃nickname'）; ; $ nickname.focus（）; + $ nickname.val（） + " + room）; }）; $ do-chat '）。 ）：：：：：：：：：：：：：：：：：：：：：：：：:：：：：：：：：：：：：：：：：：：：：：：：:：：：：：：：：：：：：：：：：：：：:：：：：：：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：：::：：：：：：：：：：：：：::：：：：：：：：：：：::：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：:づく：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：:：：：：：：：：：：：：：：：：：:：：：：：：：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：::：：：：：：：：：：：：：：::：：：：：：：：：：：::：：：：：：：：：：：：::：：：：：：：：::：：：：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：:づ 火::：：： ：：：：：：：：：：：：：：：：：：：：： ：：：;フォーム> <h2>チャットサインイン</h2> <ラベル= "nickname"> nickname </label> <入力タイプ= "text" placeholder = "nickname" id = "nickname"> <div> <label for = for 「チャットルーム」>チャットルーム</ label> <select size = "1" id = "チャットルーム"> <option> arduino </ ：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：::：：：：:：：：：：：：：：：：：:：：：：：：：：：：：：：：：：：：：：：：：：：：：：：::：：：：： ：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：:：：：：：：：：：：：：：：：：：:：：：：：：：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：::：：：：：：：：：：：：：：::：：：：：：：：：：：::：：：：：：：：：：：：::：：：：：：：：::：：：：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：:づ 火::：：： ：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：:：：：：：：：：：：：：：：：：：:：：：：：：：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：::：：：：：：：：：：：：：：::：：：：：：：：：：：::：：：：：：：：：：：：::：：：：：：：：::：：：：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：:づ 火::：：： ：：：： Option> <option> Java </option> <option> groovy </option> <option> scala </option> </select> </div> <button = "shint" id = "enterroom ">サインイン</button> </form> </div> <！ - /container-> <div> <form id =" do-chat "> <h2> </h2> <table id ="応答 "> </ table> <fieldset> <legend>メッセージを入力してください。 ：60px "/> <input type =" submit "value =" message "/> <button type =" button = "button" = "leave-room"> leave room </button> </div> </fieldset> < /form> </div> </body> </html>上記のコードでは、次のポイントに注意してください。
JavaScript側でWebSocketを呼び出す場合は、次の方法で接続を開始する必要があります。WS：// IP：PORT/CONTTERINT_PATH/ENDPOINT_URL EG WS：//0.0.0.0：8080/HASCODE/CHAT/JAVA
var wsocket = new WebSocket（ 'ws：//0.0.0.0：8080/hascode/chat/java'）を使用して、websocket接続を作成する方法は非常にシンプルです。
サーバーから返された情報を取得するには、コールバック関数wsocket.onmessageで返される情報を取得する対応する方法を設定する必要があります。
wsocket.send（）を使用して、websocketメッセージをサーバーに送信します。ここでは、送信できるメッセージはテキストまたはバイナリデータになります。
接続を閉じるために、wsocket.close（）が使用されます。
最後に、MVNパッケージEmbedded-Glassfish：実行を介してコードを展開し、この記事の冒頭でスクリーンショットの効果を見ることができます。
上記は、Javaee7、Websockets、Glassfish4を使用して実装されたチャットルームです。