Send a picture file using WebSocket

Websocket is a data transfer control in the HTML5 .

Support is now available in the mainstream browser.

About WebSocket The relevant agreement can be found on the Internet, on how to establish a connection and other operations you can query the agreement obtained, this article mainly discusses how to carry out data transmission.

The client uses the Chrome Browser to develop the websocket protocol on the server side using PHP .

Websocket protocol A frame 's standard format:

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 ... |

    +---------------------------------------------------------------+

The Payload Len in the figure indicates the length of the data being sent.

When the data length is less than 126 (0-125), the length is represented by 7 bits.

The extended length (extendedpayloadlength) is required when Payload len equals 126 , at which time the length is expressed in terms of0-65535 ).

When Payload len equals 127 , the length of the extension is the number of bits (the maximum data length is 2 ).

So theoretically, the protocol can satisfy the requirement of transmitting big data once (it is believed that there is very little need to transmit 2 of the data in a single time).

In practice, there is a certain limit to the length of the data being sent.

For example, for security reasons, the MTU length is not more than one byte.

The length of the websocket control in Chrome is limited to 128Kbytes, which is 2 of the length of the page. And this maximum length seems to be unable to be modified by configuration.

PHP Development of the server side, the length of the sent data is also defined, usually 4096 bytes, this size can be adjusted through the configuration file, but for the overall performance of the general use of the default settings.

As can be seen from the above, for the sending of picture data (a picture tends to be larger than 128KB) We need to slice the image data.

the Application layer protocol needs to control the segmented picture data. At the same time for the sent image data to do some transcoding processing.

The user-defined data Transfer Protocol is located at the head of the data, accounting for up to eight bytes.

each section represents a 2 -byte short type in the form of a string, such as 0x0016, and the string is represented as ' 0016 '

User-defined protocol header:

Data number	Short Type (4 bytes)
Keep	Char Type (4 bytes)
Total number of data packets	Short Type (4 bytes)
Current Packet Index	Short Type (4 bytes)

Data ID:

mark a big data to prevent confusion during transmission. A big data has only one number, starting from 1 , the function produces 65535 big data at the same time.

Total number of data packets:

represents the total number of packets that a large data is split into, at least 1 packets, up to 65535 packets. The size of each packet of data can be customized, but should not exceed 128Kbytes size.

Current Packet index:

represents the packet data that is currently being transmitted. The index number starts at 1 and ends at 65534 .

When you receive and send big data, you need to process the split packets.

Split processing when it is sent.

Merge processing on receive.

The client's websocket data is based on the Chrome kernel and is supported using the JavaScript language.

Server-side websocket data is supported using the PHP language.

When the client sends the data to be encrypted, using Mask-key, the encryption work is done automatically by the WebSocket control.

The server side needs to decrypt the encrypted data sent by the client when it receives the data.

The server side sends the data temporarily does not encrypt, later may consider adds the mask-key.

The specific Mask-key and decryption rules can refer to the websocket protocol.

Select picture to send

To select a picture to send to the server side, and then return from the server side to the specified customer pair display.

The resolution of the picture is 320*240, and the image size is around 75Kbytes .

At the time of sending, the data is split into 2Kbytes size packets, 75k/2k*2=75 packet data altogether.

(one byte is encoded with two bytes encoded)

The interval for sending data per packet is set at milliseconds. (the definition of the sending interval of a packet is mainly based on the processing power of the server side, and the processing power can process the sent packets more quickly.) Or you can use the answer mode to transmit, that is, every packet of data to notify the sending side to send the next packet of data. ）

Then we can calculate a picture of about 75K from the end of a to the B end of the time required is (compared to the transmission interval of milliseconds, the transmitted data can be ignored):

T=75*500ms=37.5s

That is, a picture of 320*240 transmission time around 37.5s .

The above is an example of transferring pictures. Further, the image data can be transferred. Also take 320*240 image As an example, set the transmission of the image per second, the transmission of one frame of video traffic is 75kbytes*24=1.8mbytes/s.

Obviously the current transmission speed is not enough for video transmission. It also needs to be optimized on the server side.

Here is the test address:

Data sending:

http://www.yourtechnic.com:7080/YourAPP/YAI/Demo/yaisocketstreampostimagedata.php

Data Reception:

http://www.yourtechnic.com:7080/YourAPP/YAI/Demo/yaisocketstreamgetimagedata.php

Steps to use:

1. Open Data send connection and data receive connection

2, login with user name, registered address as follows:

http://www.yourtechnic.com:7080/login.php

3, after the normal login connection, select the picture you want to send, click the "sendpicdata" button

4, wait for the data transfer to complete, the receiving side display picture.

The next step is to add the image Transfer feature to YourApp and test the video transmission possibilities.

Technology (yourtechnic) Blog: http://www.yourtechnic.com:7080

Technology (Yourtechnic) Contact information:[email protected]

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Send a picture file using WebSocket