HTML5 WebSocket File Tranfer

Websockets Introduction

Websockets API establish a persistent connection between the client and the server. It provides bi-directional communication, client and server can communicate each other directly, It helps to avoids long polling. Webscokets enables communication between any domain. Several implementations available to use websockets in different languages.

Implementing file transfer using websockets is complex part, but transfer rate is really high compared to HTTP file transfer. Websocket file transfer gives more features like pause, resume, transfer stats, etc..

Uploading files using websockets

1. Assign unique id to each file. 
2. Slice file into chucks as per chuck size using File Slice.
3. Read the chunk using File Reader.
4. Send the each chunk as buffered object using websocket.
5. After receive of chunk acknowledgement from server, send the next chunk.
6. At the end of file, send complete message to notify server.
7. Server side, on start of each file create file with unique id in temporary folder.
8. On receive of each chuck from client add it to the corresponding file.
9.  Send acknowledgement to client on each update.
10. After receive of complete message rename and move it to specified folder.

Uploading large files using websockets

Large file uploading may hang the application, to avoid application hang run file reading and slicing in thread. Threading in javascript can implement using webworkers, So move slicing and reading of file to webworker.

Author : Raju Konga

Share this

Related Posts