Java WebSocket编程 开发、部署和保护动态Web应用 参考

1.1 创建第一个WebSocket应用

《Java WebSocket编程 开发、部署和保护动态Web应用》第1章 Java WebSocket基本原理，本章介绍Java WebSocket API并粗略了解其功能。本章将深入介绍一个示例应用，此示例应用的服务器端简单地回显客户端发给它的任意消息。我们将通过此示例来阐述Java WebSocket API的主要特性。本书节为大家介绍创建第一个WebSocket应用。

第1章 Java WebSocket基本原理

本章介绍Java WebSocket API并粗略了解其功能。本章将深入介绍一个示例应用，此示例应用的服务器端简单地回显客户端发给它的任意消息。我们将通过此示例来阐述Java WebSocket API的主要特性。这样做，本章将建立本书其他部分所需要描述的主要特性的基础。如果你需要复习WebSocket协议的主要概念，请在继续学习之前先看看"前言"部分。

1.1  创建第一个WebSocket应用

既然WebSocket协议的核心是使得两个对等节点间能够进行消息通信，那么我们将从最简单的示例(EchoServer应用)来开始介绍Java WebSocket API。

EchoServer应用是一个客户端/服务器应用。它的客户端是运行在Web浏览器上的一小段JavaScript，其服务器是一个WebSocket端点。此端点通过使用Java WebSocket API进行编写，作为Web应用的一部分部署并运行在应用服务器上。当用户通过浏览器载入Web页面时，在用户的命令下，这个JavaScript代码片段会被执行。此代码执行时首先要做的事是连接存在于应用服务器上的Java EchoServer WebSocket端点并在连接之后立刻发送一条消息。运行在应用服务器上的Java EchoServer端点等待入站的连接，并且在其接收到一个已连接的客户端发送的消息时，立刻对其进行回复，确认已收到消息。

通过此应用，也就是EchoServer，可以阐述已经创建的WebSocket端点的关键方面。虽然该示例特别简单，但是充分理解其创建和部署过程将有助于我们迅速理解Java WebSocket API的关键特性。在本示例中，我们不会详述任何关键特性，而是会给出一个全局图，可以将该示例作为学习Java WebSocket API的一个很好的起点，在本书的后续章节将会更详细地阐述这些特性。

此示例大体上包括两大部分：第一部分同时也是最重要的是开发并部署在服务器上的Java EchoServer端点；第二部分是运行于浏览器中的Web页面，它包含JavaScript WebSocket客户端。图1-1展示了该示例的部署总图。

1.1.1  创建WebSocket端点

幸运的是，创建第一个WebSocket端点并部署到应用服务器中非常简单。你所要做的全部事情是开发一个Java类，实现想让此端点所拥有的功能，并且了解怎样将Java WebSocket API中定义的少数几个Java注解应用于开发的Java类上。对于示例EchoServer来说，我们想要其实现从一个已连接客户端接收消息并立即将这个消息返回给此客户端的功能。

让我们立刻开始实现该功能。首先创建一个如代码清单1-1所示的名为EchoServer的Java类，然后为其添加一个方法，此方法的参数是String类型的，用于保存客户端发送的任意入站消息。此方法的返回值也是String类型。无论客户端何时发送一个入站消息，我们都希望此返回值可以用来将此消息发送回客户端。

代码清单1-1：简单的Java对象(POJO)

 
 
 

  
public class EchoServer {   
  
public String echo(String incomingMessage) {   
  
return "I got this (" + incomingMessage + ")"   
  
+ " so I am sending it back !";   
  
}  
  
}  
 

此时，你也许乐于知道你已经实现了此应用所需要的所有逻辑。所剩下的工作就是使用Java WebSocket API将此简单传统的Java对象转换成一个WebSocket。为此，仅仅需要Java WebSocket API中的两个Java注解：@ServerEndpoint和@OnMessage。

注解@ServerEndpoint是类级别的注解，用于告诉Java平台它注解的类实际上要成为一个WebSocket端点。此注解的唯一强制参数是相对URI(Uniform Resource Identifier，统一资源标识符)，开发人员希望这个端点在此相对URL之下可用。这个场景有点类似于给别人电话号码，使得大家可以通过电话号码打电话。为了使示例更加简单，将使用URI /echo来发布示例创建的新端点。

因此，对EchoServer类添加如代码清单1-2所示的注解：

代码清单1-2：演化为WebSocket端点的POJO类

 
 
 

  
import javax.websocket.server.ServerEndpoint;  
  
 
  
@ServerEndpoint("/echo")  
  
public class EchoServer {   
  
public String echo(String incomingMessage) {   
  
return "I got this (" + incomingMessage + ")"   
  
+ " so I am sending it back !";   
  
}  
  
}  
 

注意属性的名称是value，它定义了端点将被发布在其下的路径，这意味着甚至不必将属性名称写到注解定义中。

现在代码已经包含了WebSocket实现能够运行的足够的信息，它将知道发布端点的URI空间。你可能想知道相对URI到底是相对于什么URI：它相对于包含示例EchoServer端点的Web应用的上下文根。然而，因为并未告诉WebSocket实现当端点接收到消息时将会调用哪些方法，所以将Java类转换成WebSocket端点的过程还未结束。因为EchoServer类只有一个方法，在此示例中这点也许非常明显。然而，在更复杂的示例中，实现WebSocket端点的Java类有多个方法，你可能希望一些方法在WebSocket事件发生而不是在WebSocket消息发生时被调用，一些方法不需要直接和WebSocket事件有任何直接关系。无论如何，为了将实现方法标记为随时准备处理任何入站消息，需要使用方法级注解@OnMessage。

不管你相信与否，你刚刚已经编写完了如代码清单1-3所示的第一个WebSocket端点。

代码清单1-3：WebSocket端点

 
 
 

  
import javax.websocket.server.ServerEndpoint;  
  
import javax.websocket.OnMessage;  
  
 
  
@ServerEndpoint("/echo")  
  
public class EchoServer {   
  
 
  
@OnMessage   
  
public String echo(String incomingMessage) {   
  
return "I got this (" + incomingMessage + ")"   
  
+ " so I am sending it back !";   
  
}  
  
}  

 

1.1.2  部署端点

部署EchoServer WebSocket端点特别简单。你需要编译源文件，并将编译后的类文件包含在WAR文件中，最后部署WAR文件。Web容器将检测到WAR文件中包含的WebSocket端点，并且完成必要的设置和部署工作。一旦完成这些步骤后，就可以首次调用WebSocket端点了。我们很快就会看到一些其他的端点，为了部署它们可以有更多的设置工作，但是暂时可以先看看调用刚刚创建的端点的客户端代码。

1.1.3  创建WebSocket客户端

在本示例以及本书的众多示例中，我们将用来调用服务器端点的客户端将以利用JavaScript WebSocket API的JavaScript代码片段的形式存在。这些代码片段将被嵌入Web页面，并且被打包在包含WebSocket端点的WAR文件中。Java WebSocket API也有客户端API的特性，开发人员可以使用Java WebSocket API创建应用的客户端，代替使用Web页面上的JavaScript连接到WebSocket服务器端点。第3章中将介绍WebSocket应用的Java客户端。然而，在本示例以及本书中的其他几个示例中，将利用简单的JavaScript API进行访问。因为所有支持WebSocket的浏览器都支持JavaScript API，所以它是一个广泛的选择。

在本示例应用中，Web客户端是一个带有按钮的Web页面。当按钮被按下时，将导致WebSocket客户端创建一个到EchoServer端点的WebSocket连接，并发送一条消息。每当JavaScript WebSocket接收到一条消息时，它将消息显示在Web页面中，这样用户能够看到它，同时也会关闭WebSocket连接。在本书后面章节中将能够看到生命周期更长的WebSocket连接，目前仅仅简单阐述其第一次交互。

代码清单1-4所示是将调用EchoServer的Web页面的代码，包括最重要的JavaScript WebSocket客户端代码。

代码清单1-4：Echo JavaScript客户端

 
 
 

  
<!DOCTYPE html> 
  
<html>   
  
<head>   
  
<meta http-equiv="Content-Type" content="text/html;   
  
charset=UTF-8">   
  
<title>Web Socket JavaScript Echo Client</title>   
  
<script language="javascript" type="text/javascript">   
  
var echo_websocket;   
  
 
  
function init() {   
  
output = document.getElementById("output");   
  
}   
  
 
  
function send_echo() {   
  
var wsUri = "ws://localhost:8080/echoserver/echo";   
  
writeToScreen("Connecting to " + wsUri);   
  
echo_websocket = new WebSocket(wsUri);   
  
echo_websocket.onopen = function (evt) {   
  
writeToScreen("Connected !");   
  
doSend(textID.value);   
  
};   
  
echo_websocket.onmessage = function (evt) {   
  
writeToScreen("Received message: " + evt.data);   
  
echo_websocket.close();   
  
};   
  
echo_websocket.onerror = function (evt) {   
  
writeToScreen('<span style="color: red;"> 
  
ERROR:</span> ' + evt.data);   
  
 
  
echo_websocket.close();   
  
};   
  
}   
  
 
  
function doSend(message) {   
  
echo_websocket.send(message);   
  
writeToScreen("Sent message: " + message);   
  
}   
  
 
  
function writeToScreen(message) {   
  
var pre = document.createElement("p");   
  
pre.style.wordWrap = "break-word";   
  
pre.innerHTML = message;   
  
output.appendChild(pre);   
  
}   
  
window.addEventListener("load", init, false);   
  
 
  
</script>   
  
</head>   
  
<body>   
  
<h1>Echo Server</h1>   
  
 
  
<div style="text-align: left;">   
  
<form action="">   
  
<input onclick="send_echo()" value="Press to send" type="button">   
  
<input id="textID" name="message" value=  
  
"Hello Web Sockets" type="text">   
  
<br>   
  
</form>   
  
</div>   
  
<div id="output"