Node JS Socket io send image/file to client chat application

问题

I have a working chat application that sends messages to users one on one. See it working here: Live working site

I am now trying to add feature that will let connected users select and send images from their local machines.

I am able to upload the images on my server using Multer Multer ajax file upload for file upload

The file gets uploaded successfully on the server each time a client select and uploads, but I am unable to send/display that saved image from server to the client properly. I want to display the image to both the sender and receiver in the chat window. Sometimes it sends but only to the first connected users. and it keeps on displaying the same image after regular interval (looks like the upload function is called repeatably).

My client code HTML Code:

<!--This is where the image should be displayed once uploaded-->

    <img src ="" class="img-rounded img-responsive" id="canvas"></img>

<!-- image upload -->
      <form id        =  "uploadForm"
     enctype   =  "multipart/form-data"
     action    =  "/api/photo"
     method    =  "post"
>
<div class="input-group "> 
   <div tabindex="100" class=" file-caption  kv-fileinput-caption">
   <div class="file-caption-name" title=""></div>
</div>

   <div class="input-group-btn">

       <div tabindex="500" class="btn btn-primary btn-file"><i class="glyphicon glyphicon-folder-open"></i>&nbsp; <span class="hidden-xs">Browse …</span><input id="input-1" type="file" name="userPhoto" class="file"></div>


       <button id="upload-btn" type="submit" name="submit" tabindex="500" title="Upload selected files" class="btn btn-default fileinput-upload fileinput-upload-button"><i class="glyphicon glyphicon-upload"></i> <span class="hidden-xs">Upload</span></button>


   </div>
</div>

</form>

My client side JS Code:

$("#upload-btn").click(function(e) {
    var hi = "dd";
    alert("clicked on flash_holder");

    //show to sender itself the image


      //send to server

   socket.emit("uploaded", hi );

});

     socket.on('display uploaded img', function(fileserverpath) {
    /* ... */
        //$('#canvas').empty().append('<img src="/uploads/"'fileserverpath+' height="64px" width="64px">');
 //$('#canvas').attr('src','/uploads/'+fileserverpath);
    var fullpath = '/uploads/'+fileserverpath;

     // addChatMessage('<img src ="/uploads/'+fileserverpath+'" class="img-rounded img-responsive" id="canvas"></img>');

      message = "<img src ='/uploads/"+fileserverpath+"' class='img-rounded img-responsive' id='canvas'></img>";
        addChatMessage({
        username: username,
        message: message
      });

     socket.emit('message', message);

     console.log("cleints receves this from server");

    //$('mssages').prepend($('<img>',{id:'theImg',src: fullpath}))
  });

My server side JS code:

socket.on("uploaded", function (data) {


      var room = rooms[socket.id];

       console.log("in upload"+data);
 //to save to file
var fs2 = require('fs');

var savedfilename = "";


var d = new Date(); 
var storage =   multer.diskStorage({
  destination: function (req, file, callback) {
    //callback(null, './uploads');
    callback(null, 'public/uploads');
  },
  filename: function (req, file, callback) {
      var uniquename = uuid.v4();
    callback(null, file.fieldname + '-' + uniquename + '.jpg');
    var actualdate = Date.now()- 1;
    savedfilename = file.fieldname + '-'+ uniquename + '.jpg';




  }

});
var upload = multer({ storage : storage}).single('userPhoto');


app.post('/api/photo',function(req,res){




    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
     //res.end("File is uploaded");
     console.log(savedfilename);

      socket.broadcast.to(room).emit('display uploaded img', savedfilename);




     //socket.emit('display uploaded img', savedfilename);

     savedfilename = " ";

        });

/*   //actually show the image (This is commented out as i am not sure why it does not work
      //Login for sending image working
    // fs2.readFile(__dirname + '/uploads/'+savedfilename, function(err, buf){
     fs2.readFile(__dirname + '/uploads/userPhoto-19.jpg', function(err, buf){
    // it's possible to embed binary data
    // within arbitrarily-complex objects
  socket.emit('image', { image: true, buffer: buf.toString('base64') });
    //console.log(buf);
  }); 



    }); */
});


  });

来源：https://stackoverflow.com/questions/37111655/node-js-socket-io-send-image-file-to-client-chat-application