zoukankan      html  css  js  c++  java
  • Java EE HTML5 WebSocket 示例

    http://www.oschina.net/translate/java-ee-html5-websocket-example?cmp

     

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

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

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

    本教程需要以下环境:

    1. Ubuntu 12.04
    2. JDK 1.7.0.21
    3. Glassfish 4.0
    : Java EE 7中才引入了WebSocket。

    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次,最后向客户端发送最后一条结束消息。

    客户端

    现在我们要来写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>

    这是一个简单的页面,包含有JavaScript代码,这些代码创建了一个websocket连接到websocket服务器端。

    onOpen 我们创建一个连接到服务器的连接时将会调用此方法。

    onError 当客户端-服务器通信发生错误时将会调用此方法。

    onMessage 当从服务器接收到一个消息时将会调用此方法。在我们的例子中,我们只是将从服务器获得的消息添加到DOM。

    我们连接到websocket 服务器端,使用构造函数 new WebSocket() 而且传之以端点URL:

    ws://localhost:8080/byteslounge/websocket

  • 相关阅读:
    超简单留言版
    DirectorySearCh的PropertiesToLoad所有属性
    "Asp.Net Web Api MediaTypeFormatter Error for xwwwformurlencoded data" 解决方法
    关于 NPOI 报 Invalid column index (256). Allowable column range for BIFF8 is (0..255) or ('A'..'IV') 错误的解决办法
    Autofac 的构造函数注入方式
    VirtualBox 内的 Ubuntu Server 虚拟机网络配置
    AngularJS 中设置 AJAX get 请求不缓存的方法
    IIS中使用LocalDB遇到错误:error 50,Local Database Runtime error occurred.的解决办法
    升级 DNX 和 DNVM
    规约模式学习总结
  • 原文地址:https://www.cnblogs.com/fx2008/p/4694421.html
Copyright © 2011-2022 走看看