Java EE HTML5 WebSocket 示例

最新推荐文章于 2024-11-23 11:56:24 发布

高国藩

最新推荐文章于 2024-11-23 11:56:24 发布

阅读量1.1w

点赞数

分类专栏： java 文章标签： websocket

java 专栏收录该内容

16 篇文章

订阅专栏

阅读目录

在本教程中，我们将借助于Java EE的WebSocket（服务器端）实现一个HTML5的WebSocket连接。

1. 介绍

HTML5给Web浏览器带来了全双工TCP连接websocket标准服务器的能力。

换句话说，浏览器能够与服务器建立连接，通过已建立的通信信道来发送和接收数据而不需要由HTTP协议引入额外其他的开销来实现。

在本教程中我们将在Java EE环境下实现一个简单的websockect服务器端来和客户端进行数据交互。

本教程需要以下环境：

Ubuntu 12.04
JDK 1.7.0.21
Glassfish 4.0

注: Java EE 7中才引入了WebSocket。

回到顶部

2. WebSocket服务器端

让我们定义一个 Java EE websocket服务器端：

WebSocketTest.java

 
        package 
         com.byteslounge.websockets; 
       
        import 
         java.io.IOException; 
       
        import 
         javax.websocket.OnClose; 
       
        import 
         javax.websocket.OnMessage; 
       
        import 
         javax.websocket.OnOpen; 
       
        import 
         javax.websocket.Session; 
       
        import 
         javax.websocket.server.ServerEndpoint; 
       
        @ServerEndpoint 
        ( 
        "/websocket" 
        ) 
       
        public 
         class 
        WebSocketTest { 
       
        @OnMessage 
       
        public 
        void 
        onMessage(String message, Session session)  
       
        throws 
        IOException, InterruptedException { 
       
        // Print the client message for testing purposes 
       
        System.out.println( 
        "Received: " 
        + message); 
       
        // Send the first message to the client 
       
        session.getBasicRemote().sendText( 
        "This is the first server message" 
        ); 
       
        // Send 3 messages to the client every 5 seconds 
       
        int 
        sentMessages =  
        0 
        ; 
       
        while 
        (sentMessages <  
        3 
        ){ 
       
        Thread.sleep( 
        5000 
        ); 
       
        session.getBasicRemote(). 
       
        sendText( 
        "This is an intermediate server message. Count: " 
       
        + sentMessages); 
       
        sentMessages++; 
       
        } 
       
        // Send a final message to the client 
       
        session.getBasicRemote().sendText( 
        "This is the last server message" 
        ); 
       
        } 
       
        @OnOpen 
       
        public 
        void 
        onOpen() { 
       
        System.out.println( 
        "Client connected" 
        ); 
       
        } 
       
        @OnClose 
       
        public 
        void 
        onClose() { 
       
        System.out.println( 
        "Connection closed" 
        ); 
       
        } 
       
        }

你可能已经注意到我们从 javax.websocket包中引入了一些类。

@ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端。注解的值将被用于监听用户连接的终端访问URL地址。

onOpen 和 onClose 方法分别被@OnOpen和@OnClose 所注解。这两个注解的作用不言自明：他们定义了当一个新用户连接和断开的时候所调用的方法。

onMessage 方法被@OnMessage所注解。这个注解定义了当服务器接收到客户端发送的消息时所调用的方法。注意：这个方法可能包含一个javax.websocket.Session可选参数（在我们的例子里就是session参数）。如果有这个参数，容器将会把当前发送消息客户端的连接Session注入进去。

本例中我们仅仅是将客户端消息内容打印出来，然后首先我们将发送一条开始消息，之后间隔5秒向客户端发送1条测试消息，共发送3次，最后向客户端发送最后一条结束消息。

3. 客户端

现在我们要来写websocket测试应用的客户端：

page.html

 
          <!DOCTYPE html> 
         
          <html> 
         
          <head> 
         
          <title>Testing websockets</title> 
         
          </head> 
         
          <body> 
         
          <div> 
         
          <input type= 
          "submit" 
          value= 
          "Start" 
           onclick= 
          "start()" 
          /> 
         
          </div> 
         
          <div id= 
          "messages" 
          ></div> 
         
          <script type= 
          "text/javascript" 
          > 
         
          var 
          webSocket =  
         
          new 
          WebSocket( 
          'ws://localhost:8080/byteslounge/websocket' 
          ); 
         
          webSocket.onerror =  
          function 
          (event) { 
         
          onError(event) 
         
          }; 
         
          webSocket.onopen =  
          function 
          (event) { 
         
          onOpen(event) 
         
          }; 
         
          webSocket.onmessage =  
          function 
          (event) { 
         
          onMessage(event) 
         
          }; 
         
          function 
          onMessage(event) { 
         
          document.getElementById( 
          'messages' 
          ).innerHTML  
         
          +=  
          '<br />' 
          + event.data; 
         
          } 
         
          function 
          onOpen(event) { 
         
          document.getElementById( 
          'messages' 
          ).innerHTML  
         
          =  
          'Connection established' 
          ; 
         
          } 
         
          function 
          onError(event) { 
         
          alert(event.data); 
         
          } 
         
          function 
          start() { 
         
          webSocket.send( 
          'hello' 
          ); 
         
          return 
          false 
          ; 
         
          } 
         
          </script> 
         
          </body> 
         
          </html>