Socket.io began to support binary stream from 1.0, is there a complete example especially for image

Question

I'm a beginner on node.js and socket.io. Socket.io began to support binary stream from 1.0, is there a complete example especially for image push to client and show in canvas? thanks

I think you only need to read the blob on the node source and then emit it to the socket, all the listeners will receive the blob. On the client side I suggest you to encode it in base64 (or encode it server side if you are sure you will not have cpu problems) and then follow this instructions: http://stackoverflow.com/questions/16449445/how-can-i-set-image-source-with-base64 — matteospampani, Jun 09 '14 at 01:13

Oleg · Accepted Answer · 2014-12-20T12:04:22.043

19

The solution is a bit complicated but should work in Chrome, Firefox, and IE10+ (not sure about Opera and Safari):

Somewhere on the server-side:

io.on('connection', function(socket){
    fs.readFile('/path/to/image.png', function(err, buffer){
        socket.emit('image', { buffer: buffer });
    });
});

And here is how you handle it on a client:

socket.on('image', function(data) {
    var uint8Arr = new Uint8Array(data.buffer);
    var binary = '';
    for (var i = 0; i < uint8Arr.length; i++) {
        binary += String.fromCharCode(uint8Arr[i]);
    }
    var base64String = window.btoa(binary);

    var img = new Image();
    img.onload = function() {
        var canvas = document.getElementById('yourCanvasId');
        var ctx = canvas.getContext('2d');
        var x = 0, y = 0;
        ctx.drawImage(this, x, y);
    }
    img.src = 'data:image/png;base64,' + base64String;
});

Just replace yourCanvasId with your canvas id :)

edited Dec 20 '14 at 12:04

answered Jun 09 '14 at 16:51

Oleg

22,300
9
68
84

Thanks, @CuriousGuy, but i always get the error "Uncaught TypeError: Cannot read property 'buffer' of undefined " and no image in the client side.any suggestion? – guoleii Jun 10 '14 at 04:04
Don't you emit your event from the server like this: `socket.emit('image');`? If so, try to do it like this: `socket.emit('image', { buffer: buf });` – Oleg Jun 10 '14 at 05:31
2

Great anwser. No idea why `Socket.io` documentation only explains server-side. I never heard of `Uint8Array` and `btoa` before. – Laurens Kling Jul 10 '14 at 21:51
1

Thank you. I discovered these functions/classes at StackOverflow and [Mozilla Developer Network](https://developer.mozilla.org/en-US/) -- IMHO the best places to learn JavaScript :) – Oleg Jul 11 '14 at 06:06
1

For anyone getting 'maximum call stack size exceeded error' when doing String.fromCharCode.apply you may want to checkout http://stackoverflow.com/a/9458996/632735 from @mobz as a workaround – Neil Billingham Aug 17 '14 at 04:47
@NeilBillingham good point, thanks! I edited my answer according to the link you've posted – Oleg Dec 22 '14 at 08:11
1

How could this solution be used for audio files? – GravyPlaya May 21 '16 at 17:32
Any ideas how to make it work for audio recording? Sending to the server from client, sending to other clients from server and receiving on the client? – Rohit Goyal Jul 27 '17 at 09:07

score 1 · Answer 2 · answered Jun 09 '14 at 01:40

thanks, @sovente, in this 1.0 introduction http://socket.io/blog/introducing-socket-io-1-0/ , this is code snippet on binary support.

var fs = require('fs');
var io = require('socket.io')(3000);
io.on('connection', function(socket){
  fs.readFile('image.png', function(err, buf){
    // it's possible to embed binary data
    // within arbitrarily-complex objects
    socket.emit('image', { image: true, buffer: buf });
  });
});

i want to know how to handle the buffer on client side, codes are like:

 socket.on("image", function(image, buffer) {
     if(image)
     {
         console.log(" image: ");
         **// code to handle buffer like drawing with canvas**
     }

 });

score 0 · Answer 3 · edited May 23 '17 at 10:30

Starting from socket.io 1.0 it is possible to send binary data. http://socket.io/blog/introducing-socket-io-1-0/

How ever the way of sending and receiving binary data is not clear in the official documentation. The only documentation is:

var socket = new WebSocket('ws://localhost');
socket.binaryType = 'arraybuffer';
socket.send(new ArrayBuffer);

I suggest you to take a look at this answer, where you can find code implementation for server and client (javascript, java):

https://stackoverflow.com/questions/34056705/how-to-send-binary-data-with-socket-io/

The good part is that it also works on Android!

Cheers

Socket.io began to support binary stream from 1.0, is there a complete example especially for image

3 Answers3

Linked