HTML5+websocket实现举例

最新推荐文章于 2024-11-15 15:46:00 发布

转载最新推荐文章于 2024-11-15 15:46:00 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lyl693/p/6656716.html

文章标签：

#网络 #java #javascript #ViewUI

本文介绍如何使用 HTML5 和 JavaEE 实现 WebSocket 的双向通信。包括 WebSocket 服务器端点的定义及客户端页面的设计，展示了如何建立连接并进行数据交换。

在本教程中,我们将实现一个HTML5 websocket诉诸于Java EE websocket实现(ServerEndpoint)。

介绍

HTML5规范了web浏览器的能力建立全双工TCP连接与websocket服务器兼容。

换句话说,浏览器现在可以与服务器建立连接,通过相同的发送或接收数据建立通信通道,无需由HTTP协议本身引入的开销。

在本教程中,我们将实现一个简单的Java EE环境中websocket服务器端点以及相应的客户端发送和接收数据的基础设施。

本教程将下列环境:

Ubuntu 12.04
JDK 1.7.0.21
Glassfish 4.0

请注意 :介绍了WebSockets支持Java EE 7

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 (在我们的例子中会话参数)。如果这个参数是定义了容器将注入会话相关联与当前客户端发送的消息被处理。

在我们的例子中我们只是客户端消息内容写入到标准输出。然后我们继续发送消息到客户端之后,用5秒间隔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>