使用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）的聯系方式：[email protected]
使用websocket發送圖片文件