I want to upload img data from webpage input through websocket to node.js server.
On my browser client:
var socket = new WebSocket('wss://host.com');
document.getElementById("img").addEventListener("change",function(evt) {
var f = document.getElementById("img").files[0];
if (f) {
var reader = new FileReader();
var rawData = new ArrayBuffer();
$('div#image button').unbind().bind('click', function() {
reader.onload = function(evt) {
rawData = evt.target.result;
var rawData8 = new Uint8Array(rawData);
console.log(rawData8);
socket.send(dateStr()+rawData8);
}
reader.readAsArrayBuffer(f);
});
}
});
Node.js server:
var https = require('https');
var wsock = require('ws');
var server = https.createServer({
cert: fs.readFileSync('fullchain.pem'),
key: fs.readFileSync('privkey.pem')
});
var wss = new wsock.WebSocketServer({ server: server });
wss.binaryType = 'arraybuffer';
ws.on('message', function message(postDataRaw) {
console.log(postDataRaw);
});
server.listen(3001);
});
When I select a JPG and click on $('div#image button') in browser console I see:
Uint8Array(161404) [255, 216, 255, 224, 0, 16, 74, 70, 73, 70, 0, 1, 2, 1, 0, 200, 0, 200, 0, 0, 255, 237, 17, 254, 80, 104, 111, 116, 111, 115, 104, 111, 112, 32, 51, 46, 48, 0, 56, 66, 73, 77, 3, 233, 0, 0, 0, 0, 0, 120, 0, 3, 0, 0, 0, 72, 0, 72, 0, 0, 0, 0, 3, 13, 2, 26, 255, 225, 255, 228, 3, 43, 2, 55, 3, 71, 5, 123, 3, 224, 0, 2, 0, 0, 0, 72, 0, 72, 0, 0, 0, 0, 2, 216, 2, 40, 0, 1, 0, 0, …]
But in Node.js console i receive:
<Buffer 32 35 35 2c 32 31 36 2c 32 35 35 2c 32 32 34 2c 30 2c 31 36 2c 37 34 2c 37 30 2c 37 33 2c 37 30 2c 30 2c 31 2c 32 2c 31 2c 30 2c 32 30 30 2c 30 2c 32 ... 573151 more bytes>
Which is exact reppresation in HEX of String 255,216,255,224,0,16,74,70,73,70,0,1,2,1,0,200,0,2
and NOT correct: FF D8 FF E0 .... which is the JPG file, so the received file on the server is currupt.
Where is my bad?