Java EE HTML5 WebSocket 示例

来源：互联网发布：学java可以找什么工作编辑：程序博客网时间：2024/06/05 07:28

在本教程中，我们将借助于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

01package com.byteslounge.websockets;
02 
03import java.io.IOException;
04 
05import javax.websocket.OnClose;
06import javax.websocket.OnMessage;
07import javax.websocket.OnOpen;
08import javax.websocket.Session;
09import javax.websocket.server.ServerEndpoint;
10 
11@ServerEndpoint("/websocket")
12public class WebSocketTest {
13 
14  @OnMessage
15  public voidonMessage(String message, Session session)
16    throws IOException, InterruptedException {
17   
18    // Print the client message for testing purposes
19    System.out.println("Received: " + message);
20   
21    // Send the first message to the client
22    session.getBasicRemote().sendText("This is the first server message");
23   
24    // Send 3 messages to the client every 5 seconds
25    int sentMessages = 0;
26    while(sentMessages < 3){
27      Thread.sleep(5000);
28      session.getBasicRemote().
29        sendText("This is an intermediate server message. Count: "
30          + sentMessages);
31      sentMessages++;
32    }
33   
34    // Send a final message to the client
35    session.getBasicRemote().sendText("This is the last server message");
36  }
37   
38  @OnOpen
39  public void onOpen() {
40    System.out.println("Client connected");
41  }
42 
43  @OnClose
44  public void onClose() {
45    System.out.println("Connection closed");
46  }
47}

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

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

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

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

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

3. 客户端

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

page.html

01<!DOCTYPE html>
02<html>
03<head>
04<title>Testing websockets</title>
05</head>
06<body>
07  <div>
08    <input type="submit" value="Start" onclick="start()" />
09  </div>
10  <div id="messages"></div>
11  <script type="text/javascript">
12    varwebSocket =
13      new WebSocket('ws://localhost:8080/byteslounge/websocket');
14 
15    webSocket.onerror = function(event) {
16      onError(event)
17    };
18 
19    webSocket.onopen = function(event) {
20      onOpen(event)
21    };
22 
23    webSocket.onmessage = function(event) {
24      onMessage(event)
25    };
26 
27    function onMessage(event) {
28      document.getElementById('messages').innerHTML
29        += '<br />' + event.data;
30    }
31 
32    function onOpen(event) {
33      document.getElementById('messages').innerHTML
34        = 'Connection established';
35    }
36 
37    function onError(event) {
38      alert(event.data);
39    }
40 
41    function start() {
42      webSocket.send('hello');
43      return false;
44    }
45  </script>
46</body>
47</html>