WebSocketFileTransfer is a small class which can send big files using web sockets and a web socket server.

This class use the Mootools's class system. You may include only the class file system and not all the mootools features (see the Installation section).

WebSocketFileTransfer is only compatible with browsers that support the following features of HTML 5:

• Web Sockets
• File API
• File Reader
• Blob (included in File API ?)

1. You must have a Web Socket server compatible with WebSocketFileTransfer. See the Server section for more details

2. You must first import the mootools class System. WebSocketFileTransfer requires at least this features from mootools:

   • Core
   • Event
   • Class
   • Class.Extras
   • JSON

   Here is the download link: http:https://mootools.net/core/d6edd91125b538672227900235ce1b56

3. Next, you have to include WebSocketFileTransfer.js

   <script src="sylesheet" href="mootools-core-1.4.3.js"></script> <script src="sylesheet" href="WebSocketFileTransfer.js"></script>

4. Create a WebSocketFileTransfer object for each File you want to upload to the web socket server and start the download

    var transfer = new WebSocketFileTransfer({
    	url: 'ws:https://ip:port/path/to/upload_web_socket_server',
    	file: files[i],
    	progress: function(event) {
    		// Update the progress bar
    	},
    	success: function(event) {
    		// Do something
    	}
    });
   
    transfer.start();
   

If you want to authenticate before upload the file, your can pass the username and password to the start method :

	transfer.start(myUsername, myPassword);

You can see the in the diagram folder, a diagram explaining the communication between WebSocketFileTransfer and a server.

The WebSocketFileTransfer class accepts an dict of options as parameter.

these options can be:

• url: the url of the server
• file: the file to upload
• progress: an handler to follow the progress of the upload
• success: an handler called when the upload is finished
• open: an handler called when the connection to the server is established
• close: an handler called when the connection to the server is closed
• blockSize: the size of packets to send. Default is 1024
• type: the type of transfer : binary or base64. Default is 'base64'

The url and file are required.

The type of transfer supported by the major browsers is only 'base64'. At this time, only Chrome 16 (the current last version), support binary. If you have loaded the Browser feature of Mootools, you can do this :

var transfer = new WebSocketFileTransfer({
	...,
	type: WebSocketFileTransfer.binarySupported() ? 'binary' : 'base64',
});

Note that, this is better to use binary because :

1. You don't have to convert it to base64
2. base64 encoding make data longer, so you have more data to upload.

You are free to use or implement any Web Socket server you want, in any which language you want. The only thing required is to support a specific API.

The WebSocketFileTransfer sends three types of message:

• AUTH [json_data]

  Example:

    AUTH: {
    	'login': 'username',
    	'password': 'password'
    }
  

• STOR [json_data]

  Example:

    STOR: {
    	'filename': 'test.txt',
    	'size': 4200,
    	'type': 'binary',
    }
  

• [base64_data]

The server must respectively answer this:

• JSON response to AUTH message:

    {
    	"type": "AUTH",
    	"message": "Authentification success",
    	"code": 200
    }
  

• JSON response to STOR message:

    {
    	"type": "STOR",
    	"message": "Upload initialized. Wait for data",
    	"code": 200
    }
  

Note that the message value can be changed

• JSON response to a DATA message

    {
    	"type": "DATA",
    	"code": 200,
    	"bytesRead": numberOfBytesReceivedAndReadByTheServer
    }
  

You can find a example of PHP Web Sockets Server compatible with this client on my repositories: * PhpWebSocketFileTransferServer * and his dependency phpws

If you have questions, feel free to ask on my Twitter. Alternatively if you find a bug or have some improvement you can open an issue