WebSocket 设计出来的目的就是要使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力。 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。因为 WebSocket 连接本质上就是一个 TCP 连接，所以在数据传输的稳定性和数据传输量的大小方面，和轮询以及 Comet 技术比较，具有很大的性能优势。下面是一个简单 Web 应用分别用轮询方式和 WebSocket 方式来实现，下面是测试结果图：

1. 服务端与h5客户端发起的 WebSocket 连接握手：

1. int wsHandshake(string &request, string &response)
2. {
3. // 解析http请求头信息
4. int ret = WS_STATUS_UNCONNECT;
5. std::istringstream stream(request.c_str());
6. std::string reqType;
7. std::getline(stream, reqType);
8. if (reqType.substr(0, 4) != “GET “)
9. {
10. return ret;
11. }
13. std::string header;
14. std::string::size_type pos = 0;
15. std::string websocketKey;
16. while (std::getline(stream, header) && header != “\r”)
17. {
18. header.erase(header.end() – 1);
19. pos = header.find(“: “, 0);
20. if (pos != std::string::npos)
21. {
22. std::string key = header.substr(0, pos);
23. std::string value = header.substr(pos + 2);
24. if (key == “Sec-WebSocket-Key”)
25. {
26. ret = WS_STATUS_CONNECT;
27. websocketKey = value;
28. break;
29. }
30. }
31. }
33. if (ret != WS_STATUS_CONNECT)
34. {
35. return ret;
36. }
38. // 填充http响应头信息
39. response = “HTTP/1.1 101 Switching Protocols\r\n”;
40. response += “Upgrade: websocket\r\n”;
41. response += “Connection: upgrade\r\n”;
42. response += “Sec-WebSocket-Accept: “;
44. const std::string magicKey(“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”);
45. std::string serverKey = websocketKey + magicKey;
47. char shaHash[32];
48. memset(shaHash, 0, sizeof(shaHash));
49. sha1::calc(serverKey.c_str(), serverKey.size(), (unsigned char *) shaHash);
50. serverKey = base64::base64_encode(std::string(shaHash)) + “\r\n\r\n”;
51. string strtmp(serverKey.c_str());
52. response += strtmp;
54. return ret;
55. }

2. 完成握手后连接就建立了。然后就是接收h5客户端通过 WebSocket 发过来的数据帧并解码：

1. int wsDecodeFrame(string inFrame, string &outMessage)
2. {
3. int ret = WS_OPENING_FRAME;
4. const char *frameData = inFrame.c_str();
5. const int frameLength = inFrame.size();
6. if (frameLength < 2)
7. {
8. ret = WS_ERROR_FRAME;
9. }
11. // 检查扩展位并忽略
12. if ((frameData[0] & 0x70) != 0x0)
13. {
14. ret = WS_ERROR_FRAME;
15. }
17. // fin位: 为1表示已接收完整报文, 为0表示继续监听后续报文
18. ret = (frameData[0] & 0x80);
19. if ((frameData[0] & 0x80) != 0x80)
20. {
21. ret = WS_ERROR_FRAME;
22. }
24. // mask位, 为1表示数据被加密
25. if ((frameData[1] & 0x80) != 0x80)
26. {
27. ret = WS_ERROR_FRAME;
28. }
30. // 操作码
31. uint16_t payloadLength = 0;
32. uint8_t payloadFieldExtraBytes = 0;
33. uint8_t opcode = static_cast<uint8_t >(frameData[0] & 0x0f);
34. if (opcode == WS_TEXT_FRAME)
35. {
36. // 处理utf-8编码的文本帧
37. payloadLength = static_cast<uint16_t >(frameData[1] & 0x7f);
38. if (payloadLength == 0x7e)
39. {
40. uint16_t payloadLength16b = 0;
41. payloadFieldExtraBytes = 2;
42. memcpy(&payloadLength16b, &frameData[2], payloadFieldExtraBytes);
43. payloadLength = ntohs(payloadLength16b);
44. }
45. else if (payloadLength == 0x7f)
46. {
47. // 数据过长,暂不支持
48. ret = WS_ERROR_FRAME;
49. }
50. }
51. else if (opcode == WS_BINARY_FRAME || opcode == WS_PING_FRAME || opcode == WS_PONG_FRAME)
52. {
53. // 二进制/ping/pong帧暂不处理
54. }
55. else if (opcode == WS_CLOSING_FRAME)
56. {
57. ret = WS_CLOSING_FRAME;
58. }
59. else
60. {
61. ret = WS_ERROR_FRAME;
62. }
64. // 数据解码
65. if ((ret != WS_ERROR_FRAME) && (payloadLength > 0))
66. {
67. // header: 2字节, masking key: 4字节
68. const char *maskingKey = &frameData[2 + payloadFieldExtraBytes];
69. char *payloadData = new char[payloadLength + 1];
70. memset(payloadData, 0, payloadLength + 1);
71. memcpy(payloadData, &frameData[2 + payloadFieldExtraBytes + 4], payloadLength);
72. for (int i = 0; i < payloadLength; i++)
73. {
74. payloadData[i] = payloadData[i] ^ maskingKey[i % 4];
75. }
77. outMessage = payloadData;
78. delete[] payloadData;
79. }
81. return ret;
82. }

3. 解码完数据帧，服务端做出相应处理后将结果按照 WebSocket 协议编码，然后发给h5客户端：

1. int wsEncodeFrame(string inMessage, string &outFrame, enum WS_FrameType frameType)
2. {
3. int ret = WS_EMPTY_FRAME;
4. const uint32_t messageLength = inMessage.size();
5. if (messageLength > 32767)
6. {
7. // 暂不支持这么长的数据
8. return WS_ERROR_FRAME;
9. }
11. uint8_t payloadFieldExtraBytes = (messageLength <= 0x7d) ? 0 : 2;
12. // header: 2字节, mask位设置为0(不加密), 则后面的masking key无须填写, 省略4字节
13. uint8_t frameHeaderSize = 2 + payloadFieldExtraBytes;
14. uint8_t *frameHeader = new uint8_t[frameHeaderSize];
15. memset(frameHeader, 0, frameHeaderSize);
16. // fin位为1, 扩展位为0, 操作位为frameType
17. frameHeader[0] = static_cast<uint8_t>(0x80 | frameType);
19. // 填充数据长度
20. if (messageLength <= 0x7d)
21. {
22. frameHeader[1] = static_cast<uint8_t>(messageLength);
23. }
24. else
25. {
26. frameHeader[1] = 0x7e;
27. uint16_t len = htons(messageLength);
28. memcpy(&frameHeader[2], &len, payloadFieldExtraBytes);
29. }
31. // 填充数据
32. uint32_t frameSize = frameHeaderSize + messageLength;
33. char *frame = new char[frameSize + 1];
34. memcpy(frame, frameHeader, frameHeaderSize);
35. memcpy(frame + frameHeaderSize, inMessage.c_str(), messageLength);
36. frame[frameSize] = ‘\0’;
37. outFrame = frame;
39. delete[] frame;
40. delete[] frameHeader;
41. return ret;
42. }

4. 握手只需一次，随后反复执行第2步及第3步，就完成了服务端与h5客户端通信。这个只是c++版本的，可以很容易改成java版本的。下面是上述方法用到的一些枚举：

1. enum WS_Status
2. {
3. WS_STATUS_CONNECT = 0,
4. WS_STATUS_UNCONNECT = 1,
5. };
7. enum WS_FrameType
8. {
9. WS_EMPTY_FRAME = 0xF0,
10. WS_ERROR_FRAME = 0xF1,
11. WS_TEXT_FRAME = 0x01,
12. WS_BINARY_FRAME = 0x02,
13. WS_PING_FRAME = 0x09,
14. WS_PONG_FRAME = 0x0A,
15. WS_OPENING_FRAME = 0xF3,
16. WS_CLOSING_FRAME = 0x08
17. };

参考资料：