Websockets file upload is corrupted (or wrongly encoded) – PHP and JS

I´m working on websocket scripts in PHP and JS and have issue with saving a file (img)

Sending from JS:

$('#frmChatFile').on("submit",function(event){
    event.preventDefault(); 
    var file = document.querySelector('input[type="file"]').files[0];
    websocket.send(file, Blob); 
});

Saving in PHP

socket_recv($newSocketArrayResource, $socketData, 61440, 0);
file_put_contents('test.jpg', $socketData);

It saves the file, but it is corrupted, or wrongly encoded…

The uploaded picture is slightly smaller (few bytes) and there is nothing readable in hexeditor (while in original I can read header and so on)

What am I missing? Any flag or something? Thank you very much 🙂

(fopen (w/wb), fwrite, fclose does exactly the same)

Answer

Most likely your data/image, is encoded in a frame as defined by RFC6455, so you are reading that frame in PHP with socket_recv. In fact all data sent from JS via websocket is allways encoded in frames.

You have to decode these frames in order to get your data back.

Have a look at https://github.com/napengam/phpWebSocketServer/blob/master/server/RFC6455.php

There you will find the decode function.

Good luck.