HTML5客户端通过在html5 websocket客户端中提供客户端，减少了编排者的工作量。对许多程序员来说，学习如何将此html5 websocket客户端与Java服务器一起使用将是有益的。
我想创建一个 HTML5客户端与Java服务器通信的示例，但是我无法找到方法。有人可以照亮它吗？
引用:demo html5 client/server with c++
我在http://java.dzone.com/articles/creating-websocket-chat上找到了一个演示，但对我不起作用。
最佳答案
我实现了一个简单的java服务器端示例，我们可以看一下。我首先创建一个ServerSocket来监听端口2005上的连接
public class WebsocketServer {
public static final int MASK_SIZE = 4;
public static final int SINGLE_FRAME_UNMASKED = 0x81;
private ServerSocket serverSocket;
private Socket socket;
public WebsocketServer() throws IOException {
serverSocket = new ServerSocket(2005);
connect();
}
private void connect() throws IOException {
System.out.println("Listening");
socket = serverSocket.accept();
System.out.println("Got connection");
if(handshake()) {
listenerThread();
}
}
根据RFC standard for the websocket protocol中的定义，当客户端通过websocket连接时，必须进行握手。因此，让我们看一下handshake()方法，它很丑陋，因此将逐步介绍它:
第一部分阅读客户端握手。
private boolean handshake() throws IOException {
PrintWriter out = new PrintWriter(socket.getOutputStream());
BufferedReader in = new BufferedReader(new InputStreamReader(socket.getInputStream()));
//This hashmap will be used to store the information given to the server in the handshake
HashMap<String, String> keys = new HashMap<>();
String str;
//Reading client handshake, handshake ends with CRLF which is again specified in the RFC, so we keep on reading until we hit ""...
while (!(str = in.readLine()).equals("")) {
//Split the string and store it in our hashmap
String[] s = str.split(": ");
System.out.println(str);
if (s.length == 2) {
keys.put(s[0], s[1]);
}
}
根据RFC-1.2节，客户端握手看起来像这样(这就是chrome给我的版本22.0.1229.94 m)!
GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: localhost:2005
Origin: null
Sec-WebSocket-Key: PyvrecP0EoFwVnHwC72ecA==
Sec-WebSocket-Version: 13
Sec-WebSocket-Extensions: x-webkit-deflate-frame
现在，我们可以使用keys-map在握手过程中创建相应的响应。引用RFC:
To prove that the handshake was received, the server has to take two pieces of information and combine them to form a response. The first piece of information comes from the |Sec-WebSocket-Key| header field in the client handshake. For this header field, the server has to take the value and concatenate this with the Globally Unique Identifier, "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" in string form, which is unlikely to be used by network endpoints that do not understand the WebSocket Protocol. A SHA-1 hash (160 bits) , base64-encoded, of this concatenation is then returned in the server's handshake.
这就是我们要做的!将Sec-WebSocket-Key与魔术字符串连接起来，使用SHA-1哈希函数对其进行哈希处理，然后对其进行Base64编码。这就是下一个丑陋的单行代码所做的。
String hash;
try {
hash = new BASE64Encoder().encode(MessageDigest.getInstance("SHA-1").digest((keys.get("Sec-WebSocket-Key") + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11").getBytes()));
} catch (NoSuchAlgorithmException ex) {
ex.printStackTrace();
return false;
}
然后，我们只返回预期的响应，并在“Sec-WebSocket-Accept”字段中创建新的哈希。
//Write handshake response
out.write("HTTP/1.1 101 Switching Protocols\r\n"
+ "Upgrade: websocket\r\n"
+ "Connection: Upgrade\r\n"
+ "Sec-WebSocket-Accept: " + hash + "\r\n"
+ "\r\n");
out.flush();
return true;
}
现在，我们已经在客户端和服务器之间建立了成功的Websocket连接。所以现在怎么办？我们如何使他们彼此交谈？我们可以从服务器向客户端发送消息开始。
注意!从这一点开始，我们不再使用HTTP与客户端通信。现在，我们必须进行通信以发送纯字节，并解释传入的字节。那么我们该怎么做呢？
来自服务器的消息必须采用称为“帧”的某种格式，如RFC-5.6节中所详细说明的。从服务器发送消息时，RFC指出第一个字节必须指定它是哪种帧。值为0x81的字节告诉客户端我们正在发送“单帧未屏蔽文本消息”，基本上是-文本消息。后续字节必须代表消息的长度。紧随其后的是数据或有效负载。好吧，好吧...让我们实现它!
public void sendMessage(byte[] msg) throws IOException {
System.out.println("Sending to client");
ByteArrayOutputStream baos = new ByteArrayOutputStream();
BufferedOutputStream os = new BufferedOutputStream(socket.getOutputStream());
//first byte is kind of frame
baos.write(SINGLE_FRAME_UNMASKED);
//Next byte is length of payload
baos.write(msg.length);
//Then goes the message
baos.write(msg);
baos.flush();
baos.close();
//This function only prints the byte representation of the frame in hex to console
convertAndPrint(baos.toByteArray());
//Send the frame to the client
os.write(baos.toByteArray(), 0, baos.size());
os.flush();
}
因此，要向客户端发送消息，我们只需调用sendMessage(“Hello，client!”。getBytes())。
那不是很难吗？接收来自客户端的消息该怎么办？好吧，这有点复杂，但是要卡在那儿!
客户端发送的帧的结构几乎与服务器发送的帧相同。第一个字节是消息的类型，第二个字节是有效载荷长度。然后是一个区别:接下来的四个字节代表一个掩码。什么是掩码，为什么来自客户端的消息被掩码，而服务器的消息却未被掩码？从RFC-5.1节中，我们可以看到:
...a client MUST mask all frames that it sends to the server... A server MUST NOT mask any frames that it sends to the client.
因此，简单的答案是:我们必须做到。您可能会问，为什么我们必须这样做？ Didn't I tell you to read the RFC?
继续前进，在帧中的四个字节掩码之后，掩码有效载荷将继续。还有一件事，客户端必须将帧中最左边的第9位设置为1，以告知服务器消息被屏蔽(请查看RFC-5.2节中纯净的ASCII帧)。最左边的第9位对应于我们第二个字节中的最左边的位，但是，这就是我们的有效载荷长度字节!这意味着来自客户端的所有消息的有效载荷长度字节将等于0b10000000 = 0x80 +实际有效载荷长度。因此，要找出实际的有效载荷长度，我们必须从有效载荷长度字节(帧中的第二个字节)中减去0x80或128或0b10000000(或您可能更喜欢的任何其他数字系统)。
哇，好吧..这听起来很复杂...对您来说，“TLDR”专家总结:从第二个字节中减去0x80即可得出有效载荷长度...
public String reiceveMessage() throws IOException {
//Read the first two bytes of the message, the frame type byte - and the payload length byte
byte[] buf = readBytes(2);
System.out.println("Headers:");
//Print them in nice hex to console
convertAndPrint(buf);
//And it with 00001111 to get four lower bits only, which is the opcode
int opcode = buf[0] & 0x0F;
//Opcode 8 is close connection
if (opcode == 8) {
//Client want to close connection!
System.out.println("Client closed!");
socket.close();
System.exit(0);
return null;
}
//Else I just assume it's a single framed text message (opcode 1)
else {
final int payloadSize = getSizeOfPayload(buf[1]);
System.out.println("Payloadsize: " + payloadSize);
//Read the mask, which is 4 bytes, and than the payload
buf = readBytes(MASK_SIZE + payloadSize);
System.out.println("Payload:");
convertAndPrint(buf);
//method continues below!
现在我们已经阅读了整个消息，是时候对它进行屏蔽了，这样我们就可以对有效负载有所了解了。为了取消屏蔽，我制作了一个方法，该方法将屏蔽和有效载荷作为参数，并返回解码后的有效载荷。因此，调用通过以下方式完成:
buf = unMask(Arrays.copyOfRange(buf, 0, 4), Arrays.copyOfRange(buf, 4, buf.length));
String message = new String(buf);
return message;
}
}
现在，unMask方法非常好用而且很小
private byte[] unMask(byte[] mask, byte[] data) {
for (int i = 0; i < data.length; i++) {
data[i] = (byte) (data[i] ^ mask[i % mask.length]);
}
return data;
}
getSizeOfPayload也是如此:
private int getSizeOfPayload(byte b) {
//Must subtract 0x80 from (unsigned) masked frames
return ((b & 0xFF) - 0x80);
}
就这样!现在，您应该能够使用纯套接字在两个方向上进行通信。为了完整起见，我将添加完整的Java类。它能够使用websocket与客户端接收和发送消息。
package javaapplication5;
import java.io.BufferedOutputStream;
import java.io.BufferedReader;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.net.ServerSocket;
import java.net.Socket;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Arrays;
import java.util.HashMap;
import sun.misc.BASE64Encoder;
/**
*
* @author
* Anders
*/
public class WebsocketServer {
public static final int MASK_SIZE = 4;
public static final int SINGLE_FRAME_UNMASKED = 0x81;
private ServerSocket serverSocket;
private Socket socket;
public WebsocketServer() throws IOException {
serverSocket = new ServerSocket(2005);
connect();
}
private void connect() throws IOException {
System.out.println("Listening");
socket = serverSocket.accept();
System.out.println("Got connection");
if(handshake()) {
listenerThread();
}
}
private boolean handshake() throws IOException {
PrintWriter out = new PrintWriter(socket.getOutputStream());
BufferedReader in = new BufferedReader(new InputStreamReader(socket.getInputStream()));
HashMap<String, String> keys = new HashMap<>();
String str;
//Reading client handshake
while (!(str = in.readLine()).equals("")) {
String[] s = str.split(": ");
System.out.println();
System.out.println(str);
if (s.length == 2) {
keys.put(s[0], s[1]);
}
}
//Do what you want with the keys here, we will just use "Sec-WebSocket-Key"
String hash;
try {
hash = new BASE64Encoder().encode(MessageDigest.getInstance("SHA-1").digest((keys.get("Sec-WebSocket-Key") + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11").getBytes()));
} catch (NoSuchAlgorithmException ex) {
ex.printStackTrace();
return false;
}
//Write handshake response
out.write("HTTP/1.1 101 Switching Protocols\r\n"
+ "Upgrade: websocket\r\n"
+ "Connection: Upgrade\r\n"
+ "Sec-WebSocket-Accept: " + hash + "\r\n"
+ "\r\n");
out.flush();
return true;
}
private byte[] readBytes(int numOfBytes) throws IOException {
byte[] b = new byte[numOfBytes];
socket.getInputStream().read(b);
return b;
}
public void sendMessage(byte[] msg) throws IOException {
System.out.println("Sending to client");
ByteArrayOutputStream baos = new ByteArrayOutputStream();
BufferedOutputStream os = new BufferedOutputStream(socket.getOutputStream());
baos.write(SINGLE_FRAME_UNMASKED);
baos.write(msg.length);
baos.write(msg);
baos.flush();
baos.close();
convertAndPrint(baos.toByteArray());
os.write(baos.toByteArray(), 0, baos.size());
os.flush();
}
public void listenerThread() {
Thread t = new Thread(new Runnable() {
@Override
public void run() {
try {
while (true) {
System.out.println("Recieved from client: " + reiceveMessage());
}
} catch (IOException ex) {
ex.printStackTrace();
}
}
});
t.start();
}
public String reiceveMessage() throws IOException {
byte[] buf = readBytes(2);
System.out.println("Headers:");
convertAndPrint(buf);
int opcode = buf[0] & 0x0F;
if (opcode == 8) {
//Client want to close connection!
System.out.println("Client closed!");
socket.close();
System.exit(0);
return null;
} else {
final int payloadSize = getSizeOfPayload(buf[1]);
System.out.println("Payloadsize: " + payloadSize);
buf = readBytes(MASK_SIZE + payloadSize);
System.out.println("Payload:");
convertAndPrint(buf);
buf = unMask(Arrays.copyOfRange(buf, 0, 4), Arrays.copyOfRange(buf, 4, buf.length));
String message = new String(buf);
return message;
}
}
private int getSizeOfPayload(byte b) {
//Must subtract 0x80 from masked frames
return ((b & 0xFF) - 0x80);
}
private byte[] unMask(byte[] mask, byte[] data) {
for (int i = 0; i < data.length; i++) {
data[i] = (byte) (data[i] ^ mask[i % mask.length]);
}
return data;
}
private void convertAndPrint(byte[] bytes) {
StringBuilder sb = new StringBuilder();
for (byte b : bytes) {
sb.append(String.format("%02X ", b));
}
System.out.println(sb.toString());
}
public static void main(String[] args) throws IOException, InterruptedException, NoSuchAlgorithmException {
WebsocketServer j = new WebsocketServer();
BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
while (true) {
System.out.println("Write something to the client!");
j.sendMessage(br.readLine().getBytes());
}
}
}
和一个简单的HTML客户端:
<!DOCTYPE HTML>
<html>
<body>
<button type="button" onclick="connect();">Connect</button>
<button type="button" onclick="connection.close()">Close</button>
<form>
<input type="text" id="msg" />
<button type="button" onclick="sayHello();">Say Hello!</button>
<script>
var connection;
function connect() {
console.log("connection");
connection = new WebSocket("ws://localhost:2005/");
// Log errors
connection.onerror = function (error) {
console.log('WebSocket Error ');
console.log(error);
};
// Log messages from the server
connection.onmessage = function (e) {
console.log('Server: ' + e.data);
alert("Server said: " + e.data);
};
connection.onopen = function (e) {
console.log("Connection open...");
}
connection.onclose = function (e) {
console.log("Connection closed...");
}
}
function sayHello() {
connection.send(document.getElementById("msg").value);
}
function close() {
console.log("Closing...");
connection.close();
}
</script>
</body>
</html>
希望这会清除一些东西，并且我对此有所启发:)
关于java - 在Java中将html5客户端与服务器一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12702305/