3
WebSocket 学习笔记--IE，IOS，Android等设备的兼容性问题与代码实现
source link: https://www.cnblogs.com/bluedoctor/p/3534087.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
公司最近准备将一套产品放到Andriod和IOS上面去，为了统一应用的开发方式，决定用各平台APP嵌套一个HTML5浏览器来实现，其中数据通信，准备使用WebSocket的方式。于是，我开始在各大浏览器上测试。
二、协议分析
2.1 WebSocket的请求包
首先把原来做Socket通信的程序拿出来，跟踪下浏览器在WebSocket应用请求服务端的时候发的数据包的内容：
IE11：
GET /chat HTTP/1.1 Origin: http://localhost Sec-WebSocket-Key: 98JFoEb6pMLFYhAQATn6hw== Connection: Upgrade Upgrade: Websocket Sec-WebSocket-Version: 13 User-Agent: Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko Host: 127.0.0.1:1333 Cache-Control: no-cache Cookie: s_pers=%20s_20s_nr%3D1390552565333-Repeat%7C1422088565333%3B
FireFox 26.0：
GET /chat HTTP/1.1 Host: 127.0.0.1:1333 User-Agent: Mozilla/5.0 (Windows NT 6.3; rv:26.0) Gecko/20100101 Firefox/26.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate Sec-WebSocket-Version: 13 Origin: http://localhost Sec-WebSocket-Key: kO4aF1Gpm1mBwOr6j30h0Q== Connection: keep-alive, Upgrade Pragma: no-cache Cache-Control: no-cache Upgrade: websocket
Google Chrome 33.0.1707.0 ：
GET /chat HTTP/1.1 Upgrade: websocket Connection: Upgrade Host: 127.0.0.1:1333 Origin: http://192.168.137.1 Pragma: no-cache Cache-Control: no-cache Sec-WebSocket-Key: NvxdeWLLsLXkt5DirLJ1yA== Sec-WebSocket-Version: 13 Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits, x-webkit-deflate-frame User-Agent: Mozilla/5.0 (Windows NT 6.3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1707.0 Safari/537.36
Apple Safari 5.1.7(7534.57.2)Windows 版本
GET /chat HTTP/1.1
Upgrade: WebSocket
Connection: Upgrade
Host: 127.0.0.1:1333
Origin: http://localhost
Sec-WebSocket-Key1: 25 58 510 64 > = 7
Sec-WebSocket-Key2: 13q9% 974M${fdj6 2`Qn32
�����R�q
分析了下这几种不同的浏览器，除了 Safari，其它均使用了最新的 WebSocket版本 即
Sec-WebSocket-Version: 13
但是 Safrai 使用的还是老式的 WebSocket 7.5-7.6版本。
有下面一些文章，对于WebSocket的版本进行了说明：
WebSocket握手总结 http://www.hoverlees.com/blog/?p=1413
基于Websocket草案10协议的升级及基于Netty的握手实现 http://blog.csdn.net/fenglibing/article/details/6852497
WebSocket握手协议 http://blog.163.com/liwei1987821@126/blog/static/17266492820133190211333/
2.2，IE 对WebSocket的支持问题
这里有必要单独拿出来说，IE10以后才支持HTML5，因此也要这个版本后的浏览器才支持WebSocket，所以默认的Win7下面的浏览器都没法支持。我测试用的是Win8.1的IE11，可以支持WebSocket，效果跟FireFox、Chrome一样，但有一个恼火的问题，IE的WebSocket它会自动向服务器端发起“心跳包”，而此时服务端使用SockeAsyncEventArgs 组件，会出问题，需要客户端多次发数据之后，才会取到正确的客户端请求的数据。
另外，.NET 4.5内置支持了WebSocket，但要求操作系统是Win8或者 Server2012以上的版本。所以如果生产环境的服务器没有这么新，那么WebSocketServer只有自己写了。
2.3，IOS系统上WebSoket问题
Apple 内置的浏览器就是 Safrai，那么IOS上面的浏览器 支持的 WebSocket 版本怎么样呢 ？
找了下同事的 iPhone 4s,IOS 7.0.1 的版本 ，经过测试 ，正常，跟其它浏览器一样，但不知道其它版本的IOS下面的浏览器支持得 怎么样。这就奇怪了，为何Windows 桌面版本的Safrai 不行呢 ？
2.4，安卓上的WebSocket问题
很不幸，目前安卓最新的版本 ，内置的浏览器插件仍然不支持WebSocket，而下载的QQ浏览器等是可以支持的。但是安卓上面的 App默认使用的都是 Andriod内核的浏览器插件，因此它们没法支持WebSocket。但是，既然是系统上面运行的 APP了，为何不直接走Socket 通信方式呢？同事说是为了2个平台能够使用同一套Web应用，毕竟应用嵌套在一个浏览器里面对于开发维护还是最方便的。
所以，解决的路径还是想办法让安卓的默认浏览器插件能够支持WebSocket，查找了下资料，大概有这些资料：
android怎么集成支持websocket的浏览器内核 http://www.oschina.net/question/1049351_116337
在android的webview中实现websocket http://xuepiaoqiyue.blog.51cto.com/4391594/1285791
但同事说，这些方法用过了，就是现在测试的效果，跟真正的WebSocket 兼容得不好,使用我的程序测试可以握手连接，但是解析内容上不成功。后来分析，是同事的程序对数据有特殊格式的要求，只要按照他的要求去分析，那么是可以解析得到正确的结果的。
三、WebSocket 服务端和客户端实现
最新的WebSocket 13 版本支持的服务端代码：
SocketServer 对于WebSocket信息的处理：
private void ProcessReceive(SocketAsyncEventArgs e)
{
// check if the remote host closed the connection
AsyncUserToken token = (AsyncUserToken)e.UserToken;
if (e.BytesTransferred > 0 && e.SocketError == SocketError.Success)
{
//increment the count of the total bytes receive by the server
Interlocked.Add(ref m_totalBytesRead, e.BytesTransferred);
Console.WriteLine("The server has read a total of {0} bytes", m_totalBytesRead);
//echo the data received back to the client
//增加自定义处理
string received = System.Text.Encoding.UTF8.GetString(e.Buffer, e.Offset, e.BytesTransferred);
Byte[] sendBuffer = null;
//IE:Upgrade: Websocket
//FireFox: Upgrade: websocket
//Chrome: Upgrade: websocket
if (received.IndexOf("Upgrade: websocket", StringComparison.OrdinalIgnoreCase) > 0)
{
//Web Socket 初次连接
token.Name = "WebSocket";
Console.WriteLine("Accept WebSocket.");
sendBuffer=PackHandShakeData(GetSecKeyAccetp(received));
}
else
{
if (token.Name == "WebSocket")
{
string clientMsg;
if (e.Offset > 0)
{
byte[] buffer = new byte[e.BytesTransferred];
Array.Copy(e.Buffer, e.Offset, buffer, 0, buffer.Length);
clientMsg = AnalyticData(buffer, buffer.Length);
Console.WriteLine("--DEBUG:Web Socket Recive data offset:{0}--",e.Offset);
}
else
{
clientMsg = AnalyticData(e.Buffer, e.BytesTransferred);
}
Console.WriteLine("接受到客户端数据：" + clientMsg);
if (!string.IsNullOrEmpty(clientMsg))
{
//解析来的真正消息，执行服务器处理
//To Do
//
//发送数据
string sendMsg = "Hello," + clientMsg;
Console.WriteLine("发送数据：“" + sendMsg + "” 至客户端....");
sendBuffer = PackData(sendMsg);
}
else
{
sendBuffer = PackData("心跳包");
}
}
else
{
Console.WriteLine("服务器接收到的数据：[{0}]，将进行1000ms的处理。CurrentThread.ID:{1}", received, System.Threading.Thread.CurrentThread.ManagedThreadId);
System.Threading.Thread.Sleep(1000);
Console.WriteLine("线程{0} 任务处理结束，发送数据", System.Threading.Thread.CurrentThread.ManagedThreadId);
// 格式化数据后发回客户端。
sendBuffer = Encoding.UTF8.GetBytes("Returning " + received);
}
}
//设置传回客户端的缓冲区。
e.SetBuffer(sendBuffer, 0, sendBuffer.Length);
//结束
bool willRaiseEvent = token.Socket.SendAsync(e);
if (!willRaiseEvent)
{
ProcessSend(e);
}
}
else
{
CloseClientSocket(e);
}
}
下面是一些相关的WebSocket 处理代码，包括握手、打包数据等：
// <summary>
/// 打包握手信息
/// <remarks> http://www.hoverlees.com/blog/?p=1413 Safari 早期版本不支持标准的version 13，握手不成功。
/// 据测试，最新的IOS 7.0 支持
/// </remarks>
/// </summary>
/// <param name="secKeyAccept">Sec-WebSocket-Accept</param>
/// <returns>数据包</returns>
private static byte[] PackHandShakeData(string secKeyAccept)
{
var responseBuilder = new StringBuilder();
responseBuilder.Append("HTTP/1.1 101 Switching Protocols" + Environment.NewLine);
responseBuilder.Append("Upgrade: websocket" + Environment.NewLine);
responseBuilder.Append("Connection: Upgrade" + Environment.NewLine);
responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine + Environment.NewLine);
//如果把上一行换成下面两行，才是thewebsocketprotocol-17协议，但居然握手不成功，目前仍没弄明白！
//responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine);
//responseBuilder.Append("Sec-WebSocket-Protocol: chat" + Environment.NewLine);
return Encoding.UTF8.GetBytes(responseBuilder.ToString());
}
/// <summary>
/// 生成Sec-WebSocket-Accept
/// </summary>
/// <param name="handShakeText">客户端握手信息</param>
/// <returns>Sec-WebSocket-Accept</returns>
private static string GetSecKeyAccetp(string handShakeText) //byte[] handShakeBytes, int bytesLength
{
//string handShakeText = Encoding.UTF8.GetString(handShakeBytes, 0, bytesLength);
string key = string.Empty;
Regex r = new Regex(@"Sec\-WebSocket\-Key:(.*?)\r\n");
Match m = r.Match(handShakeText);
if (m.Groups.Count != 0)
{
key = Regex.Replace(m.Value, @"Sec\-WebSocket\-Key:(.*?)\r\n", "$1").Trim();
}
byte[] encryptionString = SHA1.Create().ComputeHash(Encoding.ASCII.GetBytes(key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"));
return Convert.ToBase64String(encryptionString);
}
/// <summary>
/// 解析客户端数据包
/// </summary>
/// <param name="recBytes">服务器接收的数据包</param>
/// <param name="recByteLength">有效数据长度</param>
/// <returns></returns>
private static string AnalyticData(byte[] recBytes, int recByteLength)
{
if (recByteLength < 2) { return string.Empty; }
bool fin = (recBytes[0] & 0x80) == 0x80; // 1bit，1表示最后一帧
if (!fin)
{
return string.Empty;// 超过一帧暂不处理
}
bool mask_flag = (recBytes[1] & 0x80) == 0x80; // 是否包含掩码
if (!mask_flag)
{
return string.Empty;// 不包含掩码的暂不处理
}
int payload_len = recBytes[1] & 0x7F; // 数据长度
byte[] masks = new byte[4];
byte[] payload_data;
if (payload_len == 126)
{
Array.Copy(recBytes, 4, masks, 0, 4);
payload_len = (UInt16)(recBytes[2] << 8 | recBytes[3]);
payload_data = new byte[payload_len];
Array.Copy(recBytes, 8, payload_data, 0, payload_len);
}
else if (payload_len == 127)
{
Array.Copy(recBytes, 10, masks, 0, 4);
byte[] uInt64Bytes = new byte[8];
for (int i = 0; i < 8; i++)
{
uInt64Bytes[i] = recBytes[9 - i];
}
UInt64 len = BitConverter.ToUInt64(uInt64Bytes, 0);
payload_data = new byte[len];
for (UInt64 i = 0; i < len; i++)
{
payload_data[i] = recBytes[i + 14];
}
}
else
{
Array.Copy(recBytes, 2, masks, 0, 4);
payload_data = new byte[payload_len];
//修改，WebSocket如果自动触发了心跳，之后再发送数据，可能出错，增加下面的判断
if (recBytes.Length < 6 + payload_len)
Array.Copy(recBytes, 6, payload_data, 0, recBytes.Length - 6);
else
Array.Copy(recBytes, 6, payload_data, 0, payload_len);
}
for (var i = 0; i < payload_len; i++)
{
payload_data[i] = (byte)(payload_data[i] ^ masks[i % 4]);
}
return Encoding.UTF8.GetString(payload_data);
}
/// <summary>
/// 打包服务器数据
/// </summary>
/// <param name="message">数据</param>
/// <returns>数据包</returns>
private static byte[] PackData(string message)
{
byte[] contentBytes = null;
byte[] temp = Encoding.UTF8.GetBytes(message);
if (temp.Length < 126)
{
contentBytes = new byte[temp.Length + 2];
contentBytes[0] = 0x81;
contentBytes[1] = (byte)temp.Length;
Array.Copy(temp, 0, contentBytes, 2, temp.Length);
}
else if (temp.Length < 0xFFFF)
{
contentBytes = new byte[temp.Length + 4];
contentBytes[0] = 0x81;
contentBytes[1] = 126;
contentBytes[2] = (byte)(temp.Length & 0xFF);
contentBytes[3] = (byte)(temp.Length >> 8 & 0xFF);
Array.Copy(temp, 0, contentBytes, 4, temp.Length);
}
else
{
// 暂不处理超长内容
}
return contentBytes;
}
测试配套的客户端 HTML代码：
<html>
<head>
<meta charset="UTF-8">
<title>Web sockets test</title>
<script type="text/javascript">
var ws;
function ToggleConnectionClicked() {
try {
var ip = document.getElementById("txtIP").value;
ws = new WebSocket("ws://" + ip + ":1333/chat"); //连接服务器 ws://localhost:1818/chat
ws.onopen = function(event){alert("已经与服务器建立了连接\r\n当前连接状态："+this.readyState);};
ws.onmessage = function(event){alert("接收到服务器发送的数据：\r\n"+event.data);};
ws.onclose = function(event){alert("已经与服务器断开连接\r\n当前连接状态："+this.readyState);};
ws.onerror = function(event){alert("WebSocket异常！");};
} catch (ex) {
alert(ex.message);
}
};
function SendData() {
try{
ws.send("张三.");
}catch(ex){
alert(ex.message);
}
};
function seestate(){
alert(ws.readyState);
}
</script>
</head>
<body>
Server IP:<input type="text" id="txtIP" value="127.0.0.1"/> <button id='ToggleConnection' type="button" onclick='ToggleConnectionClicked();'>连接服务器</button><br /><br />
<button id='ToggleConnection' type="button" onclick='SendData();'>发送我的名字：beston</button><br /><br />
<button id='ToggleConnection' type="button" onclick='seestate();'>查看状态</button><br /><br />
</body>
</html>
但是上面的代码依然无法处理IE的“心跳”数据引起的问题。此时需要修改一下WebSocket对接受到数据的处理方式，如果客户端发送的是无效的数据，比如IE的心跳数据 ，那么直接过滤，不写入任何数据，将服务端的代码做下面的修改即可：
if (sendBuffer != null)
{
//设置传回客户端的缓冲区。
e.SetBuffer(sendBuffer, 0, sendBuffer.Length);
//结束
bool willRaiseEvent = token.Socket.SendAsync(e);
if (!willRaiseEvent)
{
ProcessSend(e);
}
}
else
{
ProcessSend(e);
}
这样，就得到了最终正确的结果了。此问题困扰了我好几天。下面是运行结果图：
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK