Question

74

socket io, node js, Simple example to send image/files from server to client

rated 0 times [ 78] [ 4] / answers: 1 / hits: 69090 / 10 Years ago, mon, october 13, 2014, 12:00:00

Is there any plain and straight forward examples on how to serve an image? from server to client? through buffering or just a direct call to download?
(the goal is to get image files in near real time efficiently to sort of present a near live stream of images) and append to a html image tag or just in the body of the html page.

incomplete sample code: (mostly acquired from official sample or just codes from stackoverflow)

index.js

// basic variables

var app = require('express')();

var http = require('http').Server(app);

var io = require('socket.io')(http);



var fs = require('fs'); // required for file serving



http.listen(3000, function(){

  console.log('listening on *:3000');

});



// location to index.html

app.get('/', function(req, res){

  res.sendFile(__dirname + '/index.html');

});



// only to test chat sample code from sample

io.on('connection', function(socket){



  console.log('a user connected');

    // broadcast a message

  socket.broadcast.emit('chat message', 'System Broadcast Message: a user has been connected');

  socket.on('chat message', function(msg){

    io.emit('chat message', msg);

  });



// trying to serve the image file from the server

io.on('connection', function(socket){

  fs.readFile(__dirname + '/images/image.jpg', function(err, buf){

    // it's possible to embed binary data

    // within arbitrarily-complex objects

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

    console.log('image file is initialized');

  });

});

(client side html page) index.html (we'll cut to the chase with only the portion which serves the image) What can we do on the client side to get the file and serve the image on the html page?

  socket.on(image, function(image, buffer) {

     if(image)

     {

         console.log( image: from client side);

         // code to handle buffer like drawing with canvas** <--- is canvas drawing/library a requirement?  is there an alternative? another quick and dirty solution?

        console.log(image);

        // what can we do here to serve the image onto an img tag?

     }



 });

thank you for reading

Update:

after the code snippets from below
it also needed to change buffer variable to image.buffer in order for the image to display correctly

basically change the line from

img.src = 'data:image/jpeg;base64,' + buffer;

To

img.src = 'data:image/jpeg;base64,' + image.buffer;

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

victorr

Add To Favorites

Follow

Total Points: 193

Total Questions: 86

Total Answers: 105

Location: Pitcairn Islands

Member since Thu, Jun 24, 2021

3 Years ago

victorr questions

1 Dot product of two arrays in Javascript

Fri, Nov 13, 20, 00:00, 4 Years ago

1 Rendering a component only after API request is finished React hooks

Thu, Oct 15, 20, 00:00, 4 Years ago

1 Thousand separator input with React Hooks

Sat, Jul 25, 20, 00:00, 4 Years ago

1 Typescript object destructuring is caught by ESLint no-unused-vars rule

Fri, Jul 10, 20, 00:00, 4 Years ago

1 How to pass data to {props.children}

Thu, Jun 11, 20, 00:00, 4 Years ago

View All

answered 10 Years ago bobbyallanh · Accepted Answer

One possible solution is to base64-encode the image data and use that in the browser via image.src:

On the server side, try changing this:

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

to this:

socket.emit('image', { image: true, buffer: buf.toString('base64') });

Then on the client side:

var ctx = document.getElementById('canvas').getContext('2d');



// ...



socket.on(image, function(info) {

  if (info.image) {

    var img = new Image();

    img.src = 'data:image/jpeg;base64,' + info.buffer;

    ctx.drawImage(img, 0, 0);

  }

});