自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

用JavaEE7、Websockets和GlassFish4打造聊天室（一）

譯文
作者：廖煜嶸譯
開發(fā) 后端
Java EE 7已經(jīng)在今年正式發(fā)布了，新增加了很多新的功能和特性，如新增或更新了不少的JSR標準。其中特別受到關(guān)注的是Websockets。它的一個好處之一是減少了不必要的網(wǎng)絡(luò)流量。它主要是用于在客戶機和服務(wù)器之間建立單一的雙向連接。

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

效果圖

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

準備工作

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

  1.  <properties> 
  2.     <endorsed.dir>${project.build.directory}/endorsed</endorsed.dir> 
  3.     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> 
  4. </properties> 
  5.   
  6. <dependencies> 
  7.     <dependency> 
  8.         <groupId>javax</groupId> 
  9.         <artifactId>javaee-api</artifactId> 
  10.         <version>7.0</version> 
  11.         <scope>provided</scope> 
  12.     </dependency> 
  13. </dependencies> 
  14.   
  15. <build> 
  16.     <plugins> 
  17.         <plugin> 
  18.             <groupId>org.apache.maven.plugins</groupId> 
  19.             <artifactId>maven-compiler-plugin</artifactId> 
  20.             <version>3.1</version> 
  21.             <configuration> 
  22.                 <source>1.7</source> 
  23.                 <target>1.7</target> 
  24.                 <compilerArguments> 
  25.                     <endorseddirs>${endorsed.dir}</endorseddirs> 
  26.                 </compilerArguments> 
  27.             </configuration> 
  28.         </plugin> 
  29.         <plugin> 
  30.             <groupId>org.apache.maven.plugins</groupId> 
  31.             <artifactId>maven-war-plugin</artifactId> 
  32.             <version>2.3</version> 
  33.             <configuration> 
  34.                 <failOnMissingWebXml>false</failOnMissingWebXml> 
  35.             </configuration> 
  36.         </plugin> 
  37.         <plugin> 
  38.             <groupId>org.apache.maven.plugins</groupId> 
  39.             <artifactId>maven-dependency-plugin</artifactId> 
  40.             <version>2.6</version> 
  41.             [..] 
  42.         </plugin> 
  43.     </plugins> 
  44. </build> 

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

  1. plugin> 
  2.     <groupId>org.glassfish.embedded</groupId> 
  3.     <artifactId>maven-embedded-glassfish-plugin</artifactId> 
  4.     <version>4.0</version> 
  5.     <configuration> 
  6.         <goalPrefix>embedded-glassfish</goalPrefix> 
  7.         <app>${basedir}/target/${project.artifactId}-${project.version}.war</app> 
  8.         <autoDelete>true</autoDelete> 
  9.         <port>8080</port> 
  10.         <name>${project.artifactId}</name> 
  11.         <contextRoot>hascode</contextRoot> 
  12.     </configuration> 
  13.     <executions> 
  14.         <execution> 
  15.             <goals> 
  16.                 <goal>deploy</goal> 
  17.             </goals> 
  18.         </execution> 
  19.     </executions> 
  20. </plugin> 

設(shè)置Websocket的Endpoint

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

  1. package com.hascode.tutorial; 
  2.   
  3. import java.io.IOException; 
  4. import java.util.logging.Level; 
  5. import java.util.logging.Logger; 
  6.   
  7. import javax.websocket.EncodeException; 
  8. import javax.websocket.OnMessage; 
  9. import javax.websocket.OnOpen; 
  10. import javax.websocket.Session; 
  11. import javax.websocket.server.PathParam; 
  12. import javax.websocket.server.ServerEndpoint; 
  13.   
  14. @ServerEndpoint(value = "/chat/{room}", encoders = ChatMessageEncoder.class, decoders = ChatMessageDecoder.class) 
  15. public class ChatEndpoint { 
  16.     private final Logger log = Logger.getLogger(getClass().getName()); 
  17.   
  18.     @OnOpen 
  19.     public void open(final Session session, @PathParam("room") final String room) { 
  20.         log.info("session openend and bound to room: " + room); 
  21.         session.getUserProperties().put("room", room); 
  22.     } 
  23.   
  24.     @OnMessage 
  25.     public void onMessage(final Session session, final ChatMessage chatMessage) { 
  26.         String room = (String) session.getUserProperties().get("room"); 
  27.         try { 
  28.             for (Session s : session.getOpenSessions()) { 
  29.                 if (s.isOpen() 
  30.                         && room.equals(s.getUserProperties().get("room"))) { 
  31.                     s.getBasicRemote().sendObject(chatMessage); 
  32.                 } 
  33.             } 
  34.         } catch (IOException | EncodeException e) { 
  35.             log.log(Level.WARNING, "onMessage failed", e); 
  36.         } 
  37.     } 
  38. } 

#p#

面分析下上面的代碼：

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

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

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

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

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

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

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

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

  1. package com.hascode.tutorial; 
  2.   
  3. import java.util.Date; 
  4.   
  5. public class ChatMessage { 
  6.     private String message; 
  7.     private String sender; 
  8.     private Date received; 
  9.   
  10.     // 其他getter,setter方法 
  11. } 

聊天消息的轉(zhuǎn)換

在這個應(yīng)用中，將編寫一個編碼和解碼類，用于在聊天信息和JSON格式間進行轉(zhuǎn)換。

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

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

  1. package com.hascode.tutorial; 
  2.   
  3. import java.io.StringReader; 
  4. import java.util.Date; 
  5.   
  6. import javax.json.Json; 
  7. import javax.json.JsonObject; 
  8. import javax.websocket.DecodeException; 
  9. import javax.websocket.Decoder; 
  10. import javax.websocket.EndpointConfig; 
  11.   
  12. public class ChatMessageDecoder implements Decoder.Text<ChatMessage> { 
  13.     @Override 
  14.     public void init(final EndpointConfig config) { 
  15.     } 
  16.   
  17.     @Override 
  18.     public void destroy() { 
  19.     } 
  20.   
  21.     @Override 
  22.     public ChatMessage decode(final String textMessage) throws DecodeException { 
  23.         ChatMessage chatMessage = new ChatMessage(); 
  24.         JsonObject obj = Json.createReader(new StringReader(textMessage)) 
  25.                 .readObject(); 
  26.         chatMessage.setMessage(obj.getString("message")); 
  27.         chatMessage.setSender(obj.getString("sender")); 
  28.         chatMessage.setReceived(new Date()); 
  29.         return chatMessage; 
  30.     } 
  31.   
  32.     @Override 
  33.     public boolean willDecode(final String s) { 
  34.         return true; 
  35.     } 
  36. } 

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

  1. package com.hascode.tutorial; 
  2.   
  3. import javax.json.Json; 
  4. import javax.websocket.EncodeException; 
  5. import javax.websocket.Encoder; 
  6. import javax.websocket.EndpointConfig; 
  7.   
  8. public class ChatMessageEncoder implements Encoder.Text<ChatMessage> { 
  9.     @Override 
  10.     public void init(final EndpointConfig config) { 
  11.     } 
  12.   
  13.     @Override 
  14.     public void destroy() { 
  15.     } 
  16.   
  17.     @Override 
  18.     public String encode(final ChatMessage chatMessage) throws EncodeException { 
  19.         return Json.createObjectBuilder() 
  20.                 .add("message", chatMessage.getMessage()) 
  21.                 .add("sender", chatMessage.getSender()) 
  22.                 .add("received", chatMessage.getReceived().toString()).build() 
  23.                 .toString(); 
  24.     } 
  25. } 

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

#p#

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

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

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. [..] 
  5. <script> 
  6.     var wsocket; 
  7.     var serviceLocation = "ws://0.0.0.0:8080/hascode/chat/"; 
  8.     var $nickName; 
  9.     var $message; 
  10.     var $chatWindow; 
  11.     var room = ''; 
  12.   
  13.     function onMessageReceived(evt) { 
  14.         //var msg = eval('(' + evt.data + ')'); 
  15.         var msg = JSON.parse(evt.data); // native API 
  16.         var $messageLine = $('<tr><td class="received">' + msg.received 
  17.                 + '</td><td class="user label label-info">' + msg.sender 
  18.                 + '</td><td class="message badge">' + msg.message 
  19.                 + '</td></tr>'); 
  20.         $chatWindow.append($messageLine); 
  21.     } 
  22.     function sendMessage() { 
  23.         var msg = '{"message":"' + $message.val() + '", "sender":"' 
  24.                 + $nickName.val() + '", "received":""}'; 
  25.         wsocket.send(msg); 
  26.         $message.val('').focus(); 
  27.     } 
  28.   
  29.     function connectToChatserver() { 
  30.         room = $('#chatroom option:selected').val(); 
  31.         wsocket = new WebSocket(serviceLocation + room); 
  32.         wsocket.onmessage = onMessageReceived; 
  33.     } 
  34.   
  35.     function leaveRoom() { 
  36.         wsocket.close(); 
  37.         $chatWindow.empty(); 
  38.         $('.chat-wrapper').hide(); 
  39.         $('.chat-signin').show(); 
  40.         $nickName.focus(); 
  41.     } 
  42.   
  43.     $(document).ready(function() { 
  44.         $nickName = $('#nickname'); 
  45.         $message = $('#message'); 
  46.         $chatWindow = $('#response'); 
  47.         $('.chat-wrapper').hide(); 
  48.         $nickName.focus(); 
  49.   
  50.         $('#enterRoom').click(function(evt) { 
  51.             evt.preventDefault(); 
  52.             connectToChatserver(); 
  53.             $('.chat-wrapper h2').text('Chat # '+$nickName.val() + "@" + room); 
  54.             $('.chat-signin').hide(); 
  55.             $('.chat-wrapper').show(); 
  56.             $message.focus(); 
  57.         }); 
  58.         $('#do-chat').submit(function(evt) { 
  59.             evt.preventDefault(); 
  60.             sendMessage() 
  61.         }); 
  62.   
  63.         $('#leave-room').click(function(){ 
  64.             leaveRoom(); 
  65.         }); 
  66.     }); 
  67. </script> 
  68. </head> 
  69.   
  70. <body> 
  71.   
  72.     <div class="container chat-signin"> 
  73.         <form class="form-signin"> 
  74.             <h2 class="form-signin-heading">Chat sign in</h2> 
  75.             <label for="nickname">Nickname</label> <input type="text" 
  76.                 class="input-block-level" placeholder="Nickname" id="nickname"> 
  77.             <div class="btn-group"> 
  78.                 <label for="chatroom">Chatroom</label> <select size="1" 
  79.                     id="chatroom"> 
  80.                     <option>arduino</option> 
  81.                     <option>java</option> 
  82.                     <option>groovy</option> 
  83.                     <option>scala</option> 
  84.                 </select> 
  85.             </div> 
  86.             <button class="btn btn-large btn-primary" type="submit" 
  87.                 id="enterRoom">Sign in</button> 
  88.         </form> 
  89.     </div> 
  90.     <!-- /container --> 
  91.   
  92.     <div class="container chat-wrapper"> 
  93.         <form id="do-chat"> 
  94.             <h2 class="alert alert-success"></h2> 
  95.             <table id="response" class="table table-bordered"></table> 
  96.             <fieldset> 
  97.                 <legend>Enter your message..</legend> 
  98.                 <div class="controls"> 
  99.                     <input type="text" class="input-block-level" placeholder="Your message..." id="message" style="height:60px"/> 
  100.                     <input type="submit" class="btn btn-large btn-block btn-primary" 
  101.                         value="Send message" /> 
  102.                     <button class="btn btn-large btn-block" type="button" id="leave-room">Leave 
  103.                         room</button> 
  104.                 </div> 
  105.             </fieldset> 
  106.         </form> 
  107.     </div> 
  108. </body> 
  109. </html> 

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

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

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

要獲得來自服務(wù)端返回的信息，只需要在回調(diào)函數(shù)wsocket.onmessage中設(shè)置對應(yīng)的獲取返回信息的方法即可。

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

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

Websocket中還有其他很多種用法，具體的可以參考其標準規(guī)范文檔（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/

責(zé)任編輯：陳四芳 來源： 51CTO
JavaEEWebsockets
相關(guān)推薦

2013-12-03 17:46:35

開發(fā)技術(shù)周刊

2013-06-21 15:07:22

2013-03-08 11:06:03

JavaEEGlassFish

2022-11-14 08:01:48

2011-12-15 11:11:51

JavaNIO

2023-02-10 08:16:48

WebSocket簡易聊天室

2022-07-26 14:53:10

WebSocket網(wǎng)絡(luò)通信協(xié)議

2013-05-24 10:37:54

JavaEE7發(fā)布JavaEE

2015-07-06 10:42:18

PHP聊天室應(yīng)用

2011-02-23 16:30:41

華碩服務(wù)器

2012-05-15 15:03:17

HP ProLiant

2011-11-21 14:21:56

HTML 5

2021-11-16 09:38:10

鴻蒙HarmonyOS應(yīng)用

2013-01-05 09:58:35

JavaEEJavaEE7JMS 2.0

2012-05-21 09:31:56

HTML5

2023-01-13 00:02:41

2023-01-05 09:17:58

2009-11-19 08:54:20

Windows 7系統(tǒng)生態(tài)鏈

2021-02-06 23:26:25

聊天室開發(fā)WebSocket

2011-10-11 11:43:04

筆記本評測
點贊
收藏

51CTO技術(shù)棧公眾號