socket.io, node.js forwarding image from server to client

Question

I want to receive an image via socket.io on node.js and would like forward it to a client (browser), but the image sent via the message to the browser is not recognised and therefore not show.

However, when I save the message/image first on the node.js server and load the saved file again to forward the image it works fine. I can also open the jpeg file on the server from the file system without a problem. Sending a different jpeg directly from the server works also as expected.

socket.on('image', function(msg) {
        var fileName = 'clientImage.jpg';

        // First save the file 
        fs.writeFile(fileName, msg.buffer, function() {});

        // reload the image and forward it to the client
        fs.readFile(__dirname +'/clientImage.jpg', function(err, buf){
            socket.emit('serverImage', {image: true, buffer: buf});
        });
    }

If I simplify the function to forward the message (msg) received without the "fs" workaround, like:

socket.emit('serverImage',  {image: true, buffer: msg.buffer});

or in the simples expected way

socket.emit('serverImage',  msg);

the message will not be recognised as an image on the browser and the client does not fire the "onload" event for the Image. Client code (works with jpeg files fine):

socket.on('serverImage', function(msg) { 
    var blob = new Blob([msg.buffer], {type: 'image/jpeg'} );
    var url = URL.createObjectURL(blob);
    var limg = new Image();
    limg.onload = function () {
        console.log(' -- image on load!');
        rcontext.drawImage(this, 0, 0);
        URL.revokeObjectURL(url);
    };
    limg.src = url; 
});

Is there a way that the message can be adopted/converted somehow i.e. encoding, to be recognised directly without the "fs" library, or any other suggestions?

many thanks!

cloud4every1 · Accepted Answer · 2017-08-29 14:06:33Z

1

Many thanks for the responses,

I did further tests and found a workaround / solution by using an additional buffer variable specifying the type in front of the socket.emit :

var nbuffer = new Buffer(msg.buffer,'image/jpeg');           
socket.emit('serverImage',  {image: true, buffer: nbuffer});

with this additional step, the browser recognises now the message as image. Many thanks for your help!

answered Aug 29, 2017 at 14:06

cloud4every1

917 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeremy Thille · Accepted Answer · 2017-08-29 13:14:34Z

0

writeFile is asynchronous. It takes time to write a file to the disk. You passed it a callback function, but it's empty. Re-read the image inside that callback function.

// First save the file 
fs.writeFile(fileName, msg.buffer
    , function() { // When writing is done (that's the important part)
       // reload the image and forward it to the client
       fs.readFile(__dirname +'/clientImage.jpg', function(err, buf){
            socket.emit('serverImage', {image: true, buffer: buf});
        });
});

answered Aug 29, 2017 at 13:14

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

2 Comments

cloud4every1 Over a year ago

Many thanks for your response. But this would still need to save and reload the message to disk! Would like to forward without fs activities.

Jeremy Thille Over a year ago

Why don't you just send back msg.buffer then?

Collectives™ on Stack Overflow

socket.io, node.js forwarding image from server to client

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related