使用websocket發送圖片檔案

標籤：cdata   xtend   限制   功能   ntc   stream   idt   base   padding   

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發送圖片檔案