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>

<3

Works like a charm.

Cheers.

what's the point of using socket.io-stream here ?

@shide1989 - this is actually genius, here's why...

1. You can prevent 404 error images on a page, which can affect your SEO. You can have logic on the server side which servers a blank image if the image isn't found.

2. If you have a page with a 100 images, you have to visit the server a 100 times. Each time you are opening/closing an HTTP connection. You are also sending cookie headers, if there any and other headers useragent, etc. (Lots of bandwidth)

how do we send back the client's image via socket.io ,instead of sending local server file (i.e. 'image.png') ? can you help on this one?

This works perfectly. I'm using this to send an image that changes over time.

Works! 👍

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

Works!
Thanks a lot.

It isn't work. Can you help me? Am i missing something? The servers runs but the image doesnt show up.

Works! Thanks.
FYI, I changed it like this

.
├── image.png
├── node_modules
├── package-lock.json
├── package.json
├── public
│   └── index.html
└── server.js

install library
npm i express socket.io

add example image
+ image.png

server.js

- app.use(express.static(__dirname, '/'));
+ app.use(express.static("public"));

public/index.html

- <script src="/jquery-2.1.1.js"></script>
- <script src="/socket.io/socket.io.js"></script>
- <script src="/socket.io-stream.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io-stream/0.9.1/socket.io-stream.min.js"></script>

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

found any solution?

yeah, i found it somewhere. I have the code on my machine.

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

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

It is work! very cool ! Is it possible image size more than 1 mb future?

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.

if you want you can leave a star on repo

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.

Thank you very much for your detailed explanation.

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!