使用websocket发送图片文件
Websocket是HTML5中的一个传输数据控件。
眼下在主流的浏览器中都提供了支持。
关于websocket的相关协议能够在网上查到，关于怎样建立连接等操作大家能够查询协议获得。本文主要讨论怎样进行传输数据。
在client使用的是Chrome浏览器，在server端使用PHP开发websocket协议。
Websocket协议一个frame的标准格式：
0 1 2 3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len | Extended payload length |
|I|S|S|S| (4) |A| (7) | (16/64) |
|N|V|V|V| |S| | (if payload len==126/127) |
| |1|2|3| |K| | |
+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
| Extended payload lengthcontinued, if payload len == 127 |
+ - - - - - - - - - - - - - - - +-------------------------------+
| |Masking-key, if MASK set to 1 |
+-------------------------------+-------------------------------+
| Masking-key (continued) | Payload Data |
+-------------------------------- - - - - - - - - - - - - - - - +
: Payload Datacontinued ... :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
| Payload Datacontinued ... |
+---------------------------------------------------------------+
图中的Payload Len表示发送数据长度。
当数据长度小于126时（0-125），长度使用7位表示。
当Payload len等于126时，须要使用扩展长度（Extendedpayload length），此时用16位表示长度（0-65535）。
当Payload len等于127时，扩展长度的位数是64位（数据最大长度为2的64次方）。
所以理论上来讲，该协议能满足一次传输大数据的要求（相信也非常少有一次性传输2的64次方数据的需求吧）。
实际使用中。会对发送数据的长度有一定限制。
比方出于安全考虑一次发送的MTU长度不大于1500个字节。
而chrome中对websocket的控件一次发送数据的长度限定在128Kbytes，也就是2的17次方的长度。
而且这个最大长度貌似是不能通过配置改动的。
Php开发的server端。对发送数据的长度也有定义。一般是4096字节，这个大小是能够通过配置文件调整的。但出于总体性能的考虑一般採用默认设置。
通过以上情况能够看出，对于发送图片数据来说（一张图片往往会大于128KB）我们须要将图片数据进行切分。
应用层的协议须要对切分的图片数据进行控制。同一时候对于发送的图片数据进行一些转码的处理。
用户自己定义传输数据协议位于数据的头部，占16个字节。
每一部分以字符串的格式表示2个字节的short类型。比方0x0016，则字符串表示为’0016’
用户自己定义协议头：
|
数据编号 |
Short类型（4个字节） |
|
保留 |
Char类型（4个字节） |
|
数据总包数 |
Short类型（4个字节） |
|
当前数据包索引 |
Short类型（4个字节） |
数据编号：
标记一个大数据。防止在传输过程中产生错乱。一个大数据仅仅有一个编号。从1開始，功能同一时候产生65535个大数据。
数据总包数：
表示一个大数据一共拆分成的数据包个数，最少1包，最多65535包。每一包数据的大小能够自己定义，但不应超过128Kbytes大小。
当前数据包索引：
表示当前传输的是第几包数据。
索引號从1開始，到65534结束。
接收和发送大数据的时候都须要对拆分的数据包进行处理。
发送时进行拆分处理。
接收时进行合并处理。
client的websocket数据收发基于chrome内核，使用JavaScript语言进行支持。
server端的websocket数据收发使用PHP语言进行支持。
client发送时须要对数据进行加密，使用Mask-Key，加密工作由websocket控件自己主动完毕。
server端接收数据时须要对客户发发送的加密数据进行解密。
server端发送时临时不正确数据进行加密，后期能够考虑加上Mask-Key。
详细的Mask-Key和加解密的规则能够參考websocket协议。
选择图片发送
上图为选择一张图片发送到server端，再从server端返回到指定客户对显示。
图片的分辨率在320*240。图像大小在75Kbytes左右。
在发送时将数据拆分成2Kbytes大小的数据包，一共75K/2K*2=75包数据。
（编码时将一个字节拆成了两个字节编码）
每包发送数据的间隔定在500毫秒。（数据包的发送间隔的定义主要还是依据server端的处理能力制定。处理能力强能够更快的处理发送的数据包。
或者能够使用应答方式进行传输。即每收到一包数据就通知发送端发送下一包数据。
）
则我们能够计算出一幅75K左右的图片从A端传送到B端须要的时间是（相比較500毫秒的传送间隔，传送的数据能够忽略不计）：
T=75*500ms=37.5s
也就是一幅320*240的图片传送时间在37.5s左右。
以上是以传输图片为例。进一步能够传输图像数据。还是以320*240图像为例。设每秒传输24幅图像，则传输一帧视频的流量为75KBytes*24=1.8Mbytes/s。
显然眼下的传输速度对于传输视频是不够的。还须要在server端进行优化。
下面是測试地址：
数据发送：
数据接收：
使用步骤：
1，打开数据发送连接和数据接收连接
2，以username登录，注冊地址例如以下：
http://www.yourtechnic.com/login.php
3。正常登录连接之后，选择须要发送的图片，点击“SendPicData”button
4。等待传输数据完毕，接收端显示图片。
下一步尝试将图片传输的功能加入到YourAPP中，同一时候測试一下视频传输的可能性。
優態客（YourTechnic）的博客: www.yourtechnic.com
優態客（YourTechnic）的联系方式：postmaster@yourtechnic.com
