Send a picture file using WebSocket

Websocket is a transport data control in the HTML5 .

Support is now available in the mainstream browser.

The relevant agreement on WebSocket can be found on the Internet, on how to establish a connection and other operations can be queried to obtain the agreement. This paper mainly discusses how to transfer data.

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

Actually in use. will have a certain limit on the length of the data being sent.

For example, for security reasons, the MTU sent at one time is less 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 changed by configuration.

Server side of Php development. The length of the sent data is also defined. This is usually 4096 bytes, which can be adjusted by the configuration file. However, the default setting is generally used for overall performance considerations.

As can be seen from the above, for the sending of picture data (a picture will tend 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.

user-defined Transfer data protocol is located in the head of the data, accounting for up to eight bytes.

each section represents a short type of 2 bytes in the format of a string. For example 0x0016, the string is represented as ' 0016 '

The user defines the protocol header himself:

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:

tag a big data. Prevent confusion during transmission. A big data has just one number. Starting with 1 , the feature generates 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 defined by itself, but should not exceed 128Kbytes size.

Current Packet index:

represents the packet data that is currently being transmitted.

The index 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 in the JavaScript language.

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

The client sends the data to be encrypted, using Mask-key, the encryption work by the WebSocket control itself to complete.

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

The server side sends temporary incorrect data for encryption, and later can consider adding mask-key.

Detailed Mask-key and decryption rules are available for 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. 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 for a packet is primarily based on the server-side processing power.) Processing power enables faster processing of sent packets.

Or it can be transmitted using the answer mode. That is, every packet of data is notified to the sending side to send the next packet of data.

）

Then we can figure out how long it takes for a picture of about 75K to be transmitted from end a to Terminal B ( compared to a millisecond transmission interval, the data transmitted is negligible):

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 ability to transfer image data. Take the 320*240 image as an example. To transmit a range of images per second, the traffic that transmits one frame of video 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:

Send data connection

Data Reception:

receiving data Connections

Steps to use:

1. Open Data send connection and data receive connection

2, to username login, register the address such as the following:

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

3. After the normal login connection, select the picture you need to send, click "sendpicdata" button

4. Wait for the data to be transferred and the receiving end to display the picture.

The next step is to add the image Transfer feature to the YourApp and test the possibility of video transmission at the same time.

Yourtechnic's Blog: www.yourtechnic.com

Contact information for yourtechnic (e-mail):[email protected]

Send picture files using WebSocket