HTML5 WebSocket 通讯原理(Java实现)

在javaeye都好久了.但是从来没发表个什么东西
由于最近在观注 HTML5 于是就看了下WebSocket
又不想找现成的框架去搞.就打算自己弄弄.
开始吧.
提前条件
1> 了解socket.
2> 了解协议,了解HTTP协议更好.(想想为什么需要协议就行.安全?保证数据完整?便于解析?)
3> 理解字节,字节序,如: 32位int 的 30转成 高字节序的字节 及是 0x00 0x00 0x00 0x1E,低字节序则 0x1E 0x00 0x00 0x00. 没数错的话是4个字节^_^

Web Socket参考文章

1. http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol-76
因为感觉里面有点乱,顺序没有按常理出牌.
下面是按我觉得应该有的顺序截取了该文章关键部分


The following diagrams summarise the protocol:

Handshake
|
V
Frame type byte <-------------------------------------.
| | |
| `-- (0x00 to 0x7F) --> Data... --> 0xFF -->-+
| |
`-- (0x80 to 0xFF) --> Length --> Data... ------->-'
一个 WebSocket 通讯流程 简单说.就是先握手.在谈话.（跟见到领导一样）



Internet-Draft The WebSocket protocol August 2010

/*请求部分也就是浏览器传到服务器的数据,需要解析*/
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Protocol: sample
Upgrade: WebSocket
Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5
Origin: http://example.com

^n:ds[4U


The handshake from the server looks as follows:

/*响应部分 需要根据 请求消息 来生成响应报文*/
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://example.com
Sec-WebSocket-Location: ws://example.com/demo
Sec-WebSocket-Protocol: sample

8jKS'y:G*Co,Wxa-


//上面request/response部分的以第二行至倒数第三行 都是这种格式,并且顺序无关
After the leading line in both cases come an unordered ASCII case-
insensitive set of fields, one per line, that each match the
following non-normative ABNF: [RFC5234]

field = 1*name-char colon [ space ] *any-char cr lf
colon = %x003A ; U+003A COLON (:)
space = %x0020 ; U+0020 SPACE
cr = %x000D ; U+000D CARRIAGE RETURN (CR)
lf = %x000A ; U+000A LINE FEED (LF)
name-char = %x0000-0009 / %x000B-000C / %x000E-0039 / %x003B-10FFFF
; a Unicode character other than U+000A LINE FEED (LF), U+000D CARRIAGE RETURN (CR), or U+003A COLON (:)
any-char = %x0000-0009 / %x000B-000C / %x000E-10FFFF
; a Unicode character other than U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR)

NOTE: The character set for the above ABNF is Unicode. The fields
themselves are encoded as UTF-8.

Lines that don't match the above production cause the connection to
be aborted.





/****************重点部分******************/

To prove that the handshake was received, the server has to take
three pieces of information and combine them to form a response. The
first two pieces of information come from the |Sec-WebSocket-Key1|
and |Sec-WebSocket-Key2| fields in the client handshake:

Sec-WebSocket-Key1: 18x 6]8vM;54 *(5: { U1]8 z [ 8
Sec-WebSocket-Key2: 1_ tx7X d < nw 334J702) 7]o}` 0

For each of these fields, the server has to take the digits from the
value to obtain a number (in this case 1868545188 and 1733470270
respectively), then divide that number by the number of spaces
characters in the value (in this case 12 and 10) to obtain a 32-bit
number (155712099 and 173347027). These two resulting numbers are
then used in the server handshake, as described below.


with 0x0D 0x0A and followed by 8 random bytes, part of a challenge,
and the server sends 18 bytes starting with 0x0D 0x0A and followed by
16 bytes consisting of a challenge response. The details of this
challenge and other parts of the handshake are described in the next
section.

The concatenation of the number obtained from processing the |Sec-
WebSocket-Key1| field, expressed as a big-endian 32 bit number, the
number obtained from processing the |Sec-WebSocket-Key2| field, again
expressed as a big-endian 32 bit number, and finally the eight bytes
at the end of the handshake, form a 128 bit string whose MD5 sum is
then used by the server to prove that it read the handshake.



大概意思就是说 服务端需要根据 Sec-WebSocket-Key1,Sec-WebSocket-Key2和请求响应部分的最后8个字节 生成一个16个字节的数组(128位)
再对他进行MD5 签名

也就是
响应消息最后的 8jKS'y:G*Co,Wxa-
实际上是根据
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5

^n:ds[4U //请求响应部分的最后8个字节
计算出来的
规则:
将的key1值部分"4 @1 46546xW%0l 1 5" 取掉非数字的字符,会得到一个数字
则: 414654015 在计算该字符串的空格数 假设为 n 让 int key1 = (414654015 / n); 然后将他转成 高字节序的字节数组


伪代码:

public byte[] formatKey(String key);

main
{
byte[] bytes = new byte[16];
bytes[0~3] = formatKey(key1);
bytes[4~7] = formatKey(key2);
bytes[8~15] = 请求响应部分的最后8个字节
bytes = md5(bytes);
}
/***********************************************/


接下来的就简单了===发消息

This wire format for the data transfer part is described by the
following non-normative ABNF, which is given in two alternative
forms: the first describing the wire format as allowed by this
specification, and the second describing how an arbitrary bytestream
would be parsed. [RFC5234]
//大概意思就是说有两种数据通讯协议,第一种简单的文本,也就是源码里用的,第二种就是二进制数据通讯协议..
****传输之前必须先握手****
; the wire protocol as allowed by this specification
frames = *frame
frame = text-frame
text-frame = (%x00) *( UTF8-char ) %xFF

; the wire protocol including error-handling and forward-compatible parsing rules
frames = *frame
frame = text-frame / binary-frame
text-frame = (%x00-%x7F) *( UTF8-char / %x80-%x7E ) %xFF
binary-frame = (%x80-%xFF) length < as many bytes as given by the length >
length = *(%x80-%xFF) (%x00-%x7F)


遵循他的格式. 照着socket 收发消息那样发就OK了!
如：发一个 Hello!
byte[] data = new byte[2+];
byte[0] = 0x00
byte[1~data.length - 1] = "Hello!".getBytes("UTF-8");
byte[data.length - 1] = 0xFF

//源码运行方式
1.WebServerSocket.main();
2.打开 socket.html (用Google Chrome)

我的环境: WindowsXP,JDK1.6 , Google Chrome(version 13.0.782.220 m)