用JavaEE7、Websockets和GlassFish4打造聊天室(一)

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的部分:

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

设置Websocket的Endpoint

我们先来看服务端Websocket的代码如下,然后再做进一步解析:

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

面分析下上面的代码:

使用@ 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)的代码,如下:

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

聊天消息的转换

在这个应用中,将编写一个编码和解码类,用于在聊天信息和JSON格式间进行转换。

先来看下解码类的实现,这将会把传递到服务端的聊天信息转换为ChatMessage实体类。在这里,使用的是Java API for JSON Processing(JSR353)(参考:

http://jcp.org/en/jsr/detail?id=353)规范去将JSON格式的信息转换为实体类,代码如下,其中重写的willDecode方法,这里默认返回为true。

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

同样再看下编码类的代码,这个类相反,是将ChatMessage类转换为Json格式,代码如下:

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

这里可以看到JSR-353的强大威力,只需要调用Json.createObjectBuilder就可以轻易把一个DTO对象转化为JSON了。

通过Bootstrap、Javacsript搭建简易客户端

最后,我们综合运用著名的Bootstrap、jQuery框架和Javascript设计一个简易的客户端。我们在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.     function onMessageReceived(evt) {
  13.         //var msg = eval(‘(‘ + evt.data + ‘)’);
  14.         var msg = JSON.parse(evt.data); // native API
  15.         var $messageLine = $(‘<tr><td class=“received”>‘ + msg.received
  16.                 + ‘</td><td class=“user label label-info”>‘ + msg.sender
  17.                 + ‘</td><td class=“message badge”>‘ + msg.message
  18.                 + ‘</td></tr>‘);
  19.         $chatWindow.append($messageLine);
  20.     }
  21.     function sendMessage() {
  22.         var msg = ‘{“message”:”‘ + $message.val() + ‘”, “sender”:”‘
  23.                 + $nickName.val() + ‘”, “received”:””}’;
  24.         wsocket.send(msg);
  25.         $message.val(”).focus();
  26.     }
  27.     function connectToChatserver() {
  28.         room = $(‘#chatroom option:selected’).val();
  29.         wsocket = new WebSocket(serviceLocation + room);
  30.         wsocket.onmessage = onMessageReceived;
  31.     }
  32.     function leaveRoom() {
  33.         wsocket.close();
  34.         $chatWindow.empty();
  35.         $(‘.chat-wrapper’).hide();
  36.         $(‘.chat-signin’).show();
  37.         $nickName.focus();
  38.     }
  39.     $(document).ready(function() {
  40.         $nickName = $(‘#nickname’);
  41.         $message = $(‘#message’);
  42.         $chatWindow = $(‘#response’);
  43.         $(‘.chat-wrapper’).hide();
  44.         $nickName.focus();
  45.         $(‘#enterRoom’).click(function(evt) {
  46.             evt.preventDefault();
  47.             connectToChatserver();
  48.             $(‘.chat-wrapper h2’).text(‘Chat # ‘+$nickName.val() + “@” + room);
  49.             $(‘.chat-signin’).hide();
  50.             $(‘.chat-wrapper’).show();
  51.             $message.focus();
  52.         });
  53.         $(‘#do-chat’).submit(function(evt) {
  54.             evt.preventDefault();
  55.             sendMessage()
  56.         });
  57.         $(‘#leave-room’).click(function(){
  58.             leaveRoom();
  59.         });
  60.     });
  61. </script>
  62. </head>
  63. <body>
  64.     <div class=“container chat-signin”>
  65.         <form class=“form-signin”>
  66.             <h2 class=“form-signin-heading”>Chat sign in</h2>
  67.             <label for=“nickname”>Nickname</label> <input type=“text”
  68.                 class=“input-block-level” placeholder=“Nickname” id=“nickname”>
  69.             <div class=“btn-group”>
  70.                 <label for=“chatroom”>Chatroom</label> <select size=“1”
  71.                     id=“chatroom”>
  72.                     <option>arduino</option>
  73.                     <option>java</option>
  74.                     <option>groovy</option>
  75.                     <option>scala</option>
  76.                 </select>
  77.             </div>
  78.             <button class=“btn btn-large btn-primary” type=“submit”
  79.                 id=“enterRoom”>Sign in</button>
  80.         </form>
  81.     </div>
  82.     <!– /container –>
  83.     <div class=“container chat-wrapper”>
  84.         <form id=“do-chat”>
  85.             <h2 class=“alert alert-success”></h2>
  86.             <table id=“response” class=“table table-bordered”></table>
  87.             <fieldset>
  88.                 <legend>Enter your message..</legend>
  89.                 <div class=“controls”>
  90.                     <input type=“text” class=“input-block-level” placeholder=“Your message…” id=“message” style=“height:60px”/>
  91.                     <input type=“submit” class=“btn btn-large btn-block btn-primary”
  92.                         value=“Send message” />
  93.                     <button class=“btn btn-large btn-block” type=“button” id=“leave-room”>Leave
  94.                         room</button>
  95.                 </div>
  96.             </fieldset>
  97.         </form>
  98.     </div>
  99. </body>
  100. </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/

未经允许不得转载:JX BLOG » 用JavaEE7、Websockets和GlassFish4打造聊天室(一)

赞 (0)

评论 0

评论前必须登录!

登陆 注册