Java EE 7已經在今年正式發布了，新增加了很多新的功能和特性，如新增或更新了不少的JSR標準。其中特別受到關注的是Websockets。它的一個好處之一是減少了不必要的網絡流量。它主要是用于在客戶機和服務器之間建立單一的雙向連接。這意味著客戶只需要發送一個請求到服務端，那么服務端則會進行處理，處理好后則將其返回給客戶端，客戶端則可以在等待這個時間繼續去做其他工作，整個過程是異步的。在本系列教程中，將指導用戶如何在JAVA EE　7的容器GlassFish 4中，使用JAVA EE 7中的全新的解析Json API(JSR-353)，以及綜合運用jQuery和Bootstrap。本文要求讀者有一定的HTML 5 Websocket的基礎原理知識。

效果圖

我們先來看下在完成這個教程后的效果圖，如下所示：

準備工作

我們使用的是JDK 7 和MAVN 3進行庫的構建工作，首先看pom.xml中關于Jave EE 7的部分：

 <properties> 
    <endorsed.dir>${project.build.directory}/endorsed</endorsed.dir> 
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> 
</properties> 
  
<dependencies> 
    <dependency> 
        <groupId>javax</groupId> 
        <artifactId>javaee-api</artifactId> 
        <version>7.0</version> 
        <scope>provided</scope> 
    </dependency> 
</dependencies> 
  
<build> 
    <plugins> 
        <plugin> 
            <groupId>org.apache.maven.plugins</groupId> 
            <artifactId>maven-compiler-plugin</artifactId> 
            <version>3.1</version> 
            <configuration> 
                <source>1.7</source> 
                <target>1.7</target> 
                <compilerArguments> 
                    <endorseddirs>${endorsed.dir}</endorseddirs> 
                </compilerArguments> 
            </configuration> 
        </plugin> 
        <plugin> 
            <groupId>org.apache.maven.plugins</groupId> 
            <artifactId>maven-war-plugin</artifactId> 
            <version>2.3</version> 
            <configuration> 
                <failOnMissingWebXml>false</failOnMissingWebXml> 
            </configuration> 
        </plugin> 
        <plugin> 
            <groupId>org.apache.maven.plugins</groupId> 
            <artifactId>maven-dependency-plugin</artifactId> 
            <version>2.6</version> 
            [..] 
        </plugin> 
    </plugins> 
</build> 

同時，為了能使用GlassFish 4，需要增加如下的插件：

plugin> 
    <groupId>org.glassfish.embedded</groupId> 
    <artifactId>maven-embedded-glassfish-plugin</artifactId> 
    <version>4.0</version> 
    <configuration> 
        <goalPrefix>embedded-glassfish</goalPrefix> 
        <app>${basedir}/target/${project.artifactId}-${project.version}.war</app> 
        <autoDelete>true</autoDelete> 
        <port>8080</port> 
        <name>${project.artifactId}</name> 
        <contextRoot>hascode</contextRoot> 
    </configuration> 
    <executions> 
        <execution> 
            <goals> 
                <goal>deploy</goal> 
            </goals> 
        </execution> 
    </executions> 
</plugin> 

設置Websocket的Endpoint

我們先來看服務端Websocket的代碼如下，然后再做進一步解析：

package com.hascode.tutorial; 
  
import java.io.IOException; 
import java.util.logging.Level; 
import java.util.logging.Logger; 
  
import javax.websocket.EncodeException; 
import javax.websocket.OnMessage; 
import javax.websocket.OnOpen; 
import javax.websocket.Session; 
import javax.websocket.server.PathParam; 
import javax.websocket.server.ServerEndpoint; 
  
@ServerEndpoint(value = "/chat/{room}", encoders = ChatMessageEncoder.class, decoders = ChatMessageDecoder.class) 
public class ChatEndpoint { 
    private final Logger log = Logger.getLogger(getClass().getName()); 
  
    @OnOpen 
    public void open(final Session session, @PathParam("room") final String room) { 
        log.info("session openend and bound to room: " + room); 
        session.getUserProperties().put("room", room); 
    } 
  
    @OnMessage 
    public void onMessage(final Session session, final ChatMessage chatMessage) { 
        String room = (String) session.getUserProperties().get("room"); 
        try { 
            for (Session s : session.getOpenSessions()) { 
                if (s.isOpen() 
                        && room.equals(s.getUserProperties().get("room"))) { 
                    s.getBasicRemote().sendObject(chatMessage); 
                } 
            } 
        } catch (IOException | EncodeException e) { 
            log.log(Level.WARNING, "onMessage failed", e); 
        } 
    } 
} 

#p#

面分析下上面的代碼：

使用@ ServerEndpoint定義一個新的endpoint，其中的值指定了URL并且可以使用PathParams參數，就象在JAX-RS中的用法一樣。

所以值“/chat/{room}”允許用戶通過如下形式的URL去連接某個聊天室：ws://0.0.0.0:8080/hascode/chat/java

在大括號中的值（即room），可以通過使用javax.websocket.server.PathParam，在endpoint的生命周期回調方法中以參數的方式注入。

此外，我們要使用一個編碼和解碼的類，因為我們使用的是一個DTO形式的類，用于在服務端和客戶端傳送數據。

當用戶第一次連接到服務端，輸入要進入聊天室的房號，則這個房號以參數的方式注入提交，并且使用session.getUserProperties將值保存在用戶的屬性map中。

當一個聊天參與者通過tcp連接發送信息到服務端,則循環遍歷所有已打開的session,每個session被綁定到指定的聊天室中,并且接收編碼和解碼的信息。

如果我們想發送簡單的文本信息或和二進制格式的信息，則可以使用session.getBasicRemote().sendBinary() 或session.getBasicRemote().sendText()

接下來我們看下用于代表信息傳遞實體(DTO:Data Transfer Object)的代碼，如下：

package com.hascode.tutorial; 
  
import java.util.Date; 
  
public class ChatMessage { 
    private String message; 
    private String sender; 
    private Date received; 
  
    // 其他getter,setter方法 
} 

聊天消息的轉換

在這個應用中，將編寫一個編碼和解碼類，用于在聊天信息和JSON格式間進行轉換。

先來看下解碼類的實現，這將會把傳遞到服務端的聊天信息轉換為ChatMessage實體類。在這里，使用的是Java API for JSON Processing(JSR353)（參考：

http://jcp.org/en/jsr/detail?id=353）規范去將JSON格式的信息轉換為實體類，代碼如下，其中重寫的willDecode方法，這里默認返回為true。

package com.hascode.tutorial; 
  
import java.io.StringReader; 
import java.util.Date; 
  
import javax.json.Json; 
import javax.json.JsonObject; 
import javax.websocket.DecodeException; 
import javax.websocket.Decoder; 
import javax.websocket.EndpointConfig; 
  
public class ChatMessageDecoder implements Decoder.Text<ChatMessage> { 
    @Override 
    public void init(final EndpointConfig config) { 
    } 
  
    @Override 
    public void destroy() { 
    } 
  
    @Override 
    public ChatMessage decode(final String textMessage) throws DecodeException { 
        ChatMessage chatMessage = new ChatMessage(); 
        JsonObject obj = Json.createReader(new StringReader(textMessage)) 
                .readObject(); 
        chatMessage.setMessage(obj.getString("message")); 
        chatMessage.setSender(obj.getString("sender")); 
        chatMessage.setReceived(new Date()); 
        return chatMessage; 
    } 
  
    @Override 
    public boolean willDecode(final String s) { 
        return true; 
    } 
} 

同樣再看下編碼類的代碼，這個類相反，是將ChatMessage類轉換為Json格式，代碼如下：

package com.hascode.tutorial; 
  
import javax.json.Json; 
import javax.websocket.EncodeException; 
import javax.websocket.Encoder; 
import javax.websocket.EndpointConfig; 
  
public class ChatMessageEncoder implements Encoder.Text<ChatMessage> { 
    @Override 
    public void init(final EndpointConfig config) { 
    } 
  
    @Override 
    public void destroy() { 
    } 
  
    @Override 
    public String encode(final ChatMessage chatMessage) throws EncodeException { 
        return Json.createObjectBuilder() 
                .add("message", chatMessage.getMessage()) 
                .add("sender", chatMessage.getSender()) 
                .add("received", chatMessage.getReceived().toString()).build() 
                .toString(); 
    } 
} 

這里可以看到JSR-353的強大威力，只需要調用Json.createObjectBuilder就可以輕易把一個DTO對象轉化為JSON了。

#p#

通過Bootstrap、Javacsript搭建簡易客戶端

最后，我們綜合運用著名的Bootstrap、jQuery框架和Javascript設計一個簡易的客戶端。我們在src/main/weapp目錄下新建立index.html文件，代碼如下：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
[..] 
<script> 
    var wsocket; 
    var serviceLocation = "ws://0.0.0.0:8080/hascode/chat/"; 
    var $nickName; 
    var $message; 
    var $chatWindow; 
    var room = ''; 
  
    function onMessageReceived(evt) { 
        //var msg = eval('(' + evt.data + ')'); 
        var msg = JSON.parse(evt.data); // native API 
        var $messageLine = $('<tr><td class="received">' + msg.received 
                + '</td><td class="user label label-info">' + msg.sender 
                + '</td><td class="message badge">' + msg.message 
                + '</td></tr>'); 
        $chatWindow.append($messageLine); 
    } 
    function sendMessage() { 
        var msg = '{"message":"' + $message.val() + '", "sender":"' 
                + $nickName.val() + '", "received":""}'; 
        wsocket.send(msg); 
        $message.val('').focus(); 
    } 
  
    function connectToChatserver() { 
        room = $('#chatroom option:selected').val(); 
        wsocket = new WebSocket(serviceLocation + room); 
        wsocket.onmessage = onMessageReceived; 
    } 
  
    function leaveRoom() { 
        wsocket.close(); 
        $chatWindow.empty(); 
        $('.chat-wrapper').hide(); 
        $('.chat-signin').show(); 
        $nickName.focus(); 
    } 
  
    $(document).ready(function() { 
        $nickName = $('#nickname'); 
        $message = $('#message'); 
        $chatWindow = $('#response'); 
        $('.chat-wrapper').hide(); 
        $nickName.focus(); 
  
        $('#enterRoom').click(function(evt) { 
            evt.preventDefault(); 
            connectToChatserver(); 
            $('.chat-wrapper h2').text('Chat # '+$nickName.val() + "@" + room); 
            $('.chat-signin').hide(); 
            $('.chat-wrapper').show(); 
            $message.focus(); 
        }); 
        $('#do-chat').submit(function(evt) { 
            evt.preventDefault(); 
            sendMessage() 
        }); 
  
        $('#leave-room').click(function(){ 
            leaveRoom(); 
        }); 
    }); 
</script> 
</head> 
  
<body> 
  
    <div class="container chat-signin"> 
        <form class="form-signin"> 
            <h2 class="form-signin-heading">Chat sign in</h2> 
            <label for="nickname">Nickname</label> <input type="text" 
                class="input-block-level" placeholder="Nickname" id="nickname"> 
            <div class="btn-group"> 
                <label for="chatroom">Chatroom</label> <select size="1" 
                    id="chatroom"> 
                    <option>arduino</option> 
                    <option>java</option> 
                    <option>groovy</option> 
                    <option>scala</option> 
                </select> 
            </div> 
            <button class="btn btn-large btn-primary" type="submit" 
                id="enterRoom">Sign in</button> 
        </form> 
    </div> 
    <!-- /container --> 
  
    <div class="container chat-wrapper"> 
        <form id="do-chat"> 
            <h2 class="alert alert-success"></h2> 
            <table id="response" class="table table-bordered"></table> 
            <fieldset> 
                <legend>Enter your message..</legend> 
                <div class="controls"> 
                    <input type="text" class="input-block-level" placeholder="Your message..." id="message" style="height:60px"/> 
                    <input type="submit" class="btn btn-large btn-block btn-primary" 
                        value="Send message" /> 
                    <button class="btn btn-large btn-block" type="button" id="leave-room">Leave 
                        room</button> 
                </div> 
            </fieldset> 
        </form> 
    </div> 
</body> 
</html> 

在上面的代碼中，要注意如下幾點：

在Javascript端要調用websocket的話，要用如下的方式發起連接即可：ws://IP:PORT/CONTEXT_PATH/ENDPOINT_URL e.g ws://0.0.0.0:8080/hascode/chat/java

創建一個Websocket連接的方法很簡單，使用的是var wsocket = new WebSocket(‘ws://0.0.0.0:8080/hascode/chat/java’);

要獲得來自服務端返回的信息，只需要在回調函數wsocket.onmessage中設置對應的獲取返回信息的方法即可。

發送一個Websocket消息到服務端，使用的方法是wsocket.send()，其中可以發送的消息可以文本或者二進制數據。

關閉連接使用的是wsocket.close()。

Websocket中還有其他很多種用法，具體的可以參考其標準規范文檔（http://tools.ietf.org/html/rfc6455）

最后，我們通過

mvn package embedded-glassfish:run

進行代碼的部署，然后就可以看到本文開始部分截圖的效果。

本文的代碼可以通過git獲得：

git clone https://bitbucket.org/hascode/javaee7-websocket-chat.git

讀者也可以通過這個地址下載可部署的war包：

原文鏈接：http://www.hascode.com/2013/08/creating-a-chat-application-using-java-ee-7-websockets-and-glassfish-4/