Image over Socket.IO

Image over Socket.IO.js

//NodeJS
var express = require('express');
var app = express();
var http = require('http').Server(app);
var fs = require('fs');
var io = require('socket.io')(http);

app.use(express.static(__dirname, '/'));

io.on('connection', function(socket){
  fs.readFile('image.png', function(err, data){
    socket.emit('imageConversionByClient', { image: true, buffer: data });
    socket.emit('imageConversionByServer', "data:image/png;base64,"+ data.toString("base64"));
  });
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

/////////////////

<!-- Browser JavaScript -->
<img id="img" width="40%">
<img id="img2" width="40%">

<script src="/jquery-2.1.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/socket.io-stream.js"></script>

<script>
function b64(e){var t="";var n=new Uint8Array(e);var r=n.byteLength;for(var i=0;i<r;i++){t+=String.fromCharCode(n[i])}return window.btoa(t)}

$(document).ready(function() {
  
  var socket = io();

  socket.on('imageConversionByClient', function(data) {
    $("#img").attr("src","data:image/png;base64,"+b64(data.buffer));
  });

  socket.on('imageConversionByServer', function(data) {
    $("#img2").attr("src",data);
  });

});

</script>

I want to make the client upload the picture and send it to all sockets, possible?

found any solution?

Yes I made it to the solution using ............................... hheh

demo: https://peaceful-ravine-28739.herokuapp.com/

you can upload videos, images, audio you can also handle documents too.

codebase: https://github.com/Rajesh-Royal/ChatAppSocketIO

You didn't read the codebase correct. You can upload any size of image and video the problem is when you upload high size files let's say more than 25mb and your network is also not that fast than how could you transfer 25mb of data over sockets in base64 encoding.
There can be more feasible ways like sending bytes instead of sending whole data at once.

and don't worry about images you can upload any size of the image it will get compressed to max 200KB size. You can change the compression size too if you want just check the Index.js file for the particular code.

Thanks very much. I checked the index.js file but the main content is in index.html file. I followed your code and wrote my own logic for uploading images and videos , but when I upload video my client disconnect , I struggled finding out what was the mistake , then I came to know that latest version of socket doesn't support sending large data , I degraded the version to ^2.4.0 and it worked well,
please use the same implement video sharing system.
Please feel free to correct me. Just posted this comment so that other do not suffer like me

If you are using Python in the backend (Flask, Django, FastAPI, etc.), you can use the following code to send an image:

photo = cv2.imread(photo_path)
photo = cv2.imencode('.jpg', photo)
bin_photo = base64.b64encode(photo)
socketio.emit('receive_image', 'data:image/jpg;base64,' + bin_photo.decode('utf-8'))

You will need OpenCV for this.

If you are using Python in the backend (Flask, Django, FastAPI, etc.), you can use the following code to send an image:

photo = cv2.imread(photo_path)
photo = cv2.imencode('.jpg', photo)
bin_photo = base64.b64encode(photo)
socketio.emit('receive_image', 'data:image/jpg;base64,' + bin_photo.decode('utf-8'))

You will need OpenCV for this.

for Flask-socket-io python side you can also use this to read the file
with open(filepath, "rb") as f: image_bytes = f.read() bin_photo = base64.b64encode(image_bytes) socketio.emit('receive_image', 'data:image/jpg;base64,' + bin_photo.decode('utf-8'))

Thanks a lot Rick!