Java EE HTML5 WebSocket 示例

最新推荐文章于 2024-03-12 23:13:46 发布

qq513283439

最新推荐文章于 2024-03-12 23:13:46 发布

阅读量1.4k

点赞数

Java EE HTML5 WebSocket 示例

英文原文：Java EE HTML5 WebSocket example

标签： WebSocket

111人收藏此文章, 我要收藏 oschina 推荐于 4个月前 (共 5 段, 翻译完成于 08-14) ( 20评)

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

bigtiger02
翻译于 4个月前

1人顶

顶翻译的不错哦!

其它翻译版本(1)

正在加载...

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
 
          15public void onMessage(String message, Session session) 
 
          16throws IOException, InterruptedException {
 
          17
 
          18// Print the client message for testing purposes
 
          19System.out.println("Received: " + message);
 
          20
 
          21// Send the first message to the client
 
          22session.getBasicRemote().sendText("This is the first server message");
 
          23
 
          24// Send 3 messages to the client every 5 seconds
 
          25int sentMessages = 0;
 
          26while(sentMessages < 3){
 
          27Thread.sleep(5000);
 
          28session.getBasicRemote().
 
          29sendText("This is an intermediate server message. Count: "
 
          30+ sentMessages);
 
          31sentMessages++;
 
          32}
 
          33
 
          34// Send a final message to the client
 
          35session.getBasicRemote().sendText("This is the last server message");
 
          36}
 
          37
 
          38@OnOpen
 
          39public void onOpen() {
 
          40System.out.println("Client connected");
 
          41}
 
          42 
 
          43@OnClose
 
          44public void onClose() {
 
          45System.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次，最后向客户端发送最后一条结束消息。

bigtiger02
翻译于 4个月前

1人顶

顶翻译的不错哦!

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">
 
            12var webSocket = 
 
            13new WebSocket('ws://localhost:8080/byteslounge/websocket');
 
            14 
 
            15webSocket.onerror = function(event) {
 
            16onError(event)
 
            17};
 
            18 
 
            19webSocket.onopen = function(event) {
 
            20onOpen(event)
 
            21};
 
            22 
 
            23webSocket.onmessage = function(event) {
 
            24onMessage(event)
 
            25};
 
            26 
 
            27function onMessage(event) {
 
            28document.getElementById('messages').innerHTML 
 
            29+=  '<br />' + event.data;
 
            30}
 
            31 
 
            32function onOpen(event) {
 
            33document.getElementById('messages').innerHTML 
 
            34=  'Connection established';
 
            35}
 
            36 
 
            37function onError(event) {
 
            38alert(event.data);
 
            39}
 
            40 
 
            41function start() {
 
            42webSocket.send('hello');
 
            43return false;
 
            44}
 
            45</script>
 
            46</body>
 
            47</html>

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

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

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

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

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

ws://localhost:8080/byteslounge/websocket

super0555
翻译于 4个月前

1人顶

顶翻译的不错哦!

4. 测试

现在我们可以访问测试页面对我们的应用进行测试：

http://localhost:8080/byteslounge/page.html

正如所期望的，我们将看到 Connection established 消息：

http://localhost:8080/byteslounge/page.html

现在只要我们一按按钮，就会通过此websocket发送初始化报文给服务器，而且接下来会收到发自服务器的测试消息：

服务器发送、客户端接收的消息

super0555
翻译于 4个月前

0人顶

顶翻译的不错哦!

5. WebSockets 握手

客户端和服务器端TCP连接建立在HTTP协议握手发生之后。通过HTTP流量调试，很容易观察到握手。客户端一创建一个 WebSocket实例，就会出现如下请求和服务器端响应：

注意: 我们只录入了WebSocket握手所用到的HTTP头。

请求:

GET /byteslounge/websocket HTTP/1.1
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Key: wVlUJ/tu9g6EBZEh51iDvQ==

响应:

HTTP/1.1 101 Web Socket Protocol Handshake
Upgrade: websocket
Sec-WebSocket-Accept: 2TNh+0h5gTX019lci6mnvS66PSY=

注意：进行连接需要将通过Upgrade and Upgrade将协议升级到支持websocket HTTP头的Websocket协议。服务器响应表明请求被接受，协议将转换到WebSocket协议（HTTP状态码101）:

HTTP/1.1 101 Web Socket Protocol Handshake

6. 下载源码

在本页的末尾有范例源代码下载链接，源码在Glassfish 4（需要兼容Java EE 7的服务器）上通过测试。

在如下地址下载范例源码：

下载链接: java-ee-html5-websocket-example.zip

qq513283439

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java EE HTML5 WebSocket 示例

Java EE HTML5 WebSocket 示例英文原文：Java EE HTML5 WebSocket example标签：WebSocket111人收藏此文章,我要收藏oschina 推荐于 4个月前 (共 5 段, 翻译完成于 08-14) (20评)参与翻译(3人)：bigtiger02,super0555, LeoXu仅中文 |
复制链接

扫一扫