Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Image over Socket.IO
//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>
@wiill

This comment has been minimized.

Copy link

@wiill wiill commented Feb 3, 2017

<3

Works like a charm.

Cheers.

@shide1989

This comment has been minimized.

Copy link

@shide1989 shide1989 commented Feb 27, 2018

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

@knoxcard

This comment has been minimized.

Copy link

@knoxcard knoxcard commented Apr 30, 2019

@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)

@sudhir-pradhan

This comment has been minimized.

Copy link

@sudhir-pradhan sudhir-pradhan commented May 27, 2019

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?

@OrsoEric

This comment has been minimized.

Copy link

@OrsoEric OrsoEric commented Jun 8, 2019

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

@Trickfilm400

This comment has been minimized.

Copy link

@Trickfilm400 Trickfilm400 commented Feb 1, 2020

Works! πŸ‘

@Danielhoifodt

This comment has been minimized.

Copy link

@Danielhoifodt Danielhoifodt commented Apr 4, 2020

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

@silentC0der

This comment has been minimized.

Copy link

@silentC0der silentC0der commented Apr 28, 2020

Works!
Thanks a lot.

@learningSocketUser

This comment has been minimized.

Copy link

@learningSocketUser learningSocketUser commented May 2, 2020

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

@MozyOk

This comment has been minimized.

Copy link

@MozyOk MozyOk commented May 16, 2020

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>
@ossycodes

This comment has been minimized.

Copy link

@ossycodes ossycodes commented Jun 4, 2020

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

found any solution?

@Danielhoifodt

This comment has been minimized.

Copy link

@Danielhoifodt Danielhoifodt commented Jun 5, 2020

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

@Rajesh-Royal

This comment has been minimized.

Copy link

@Rajesh-Royal Rajesh-Royal commented Jun 15, 2020

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

@ZavierXIV

This comment has been minimized.

Copy link

@ZavierXIV ZavierXIV commented Jul 8, 2020

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?

@Rajesh-Royal

This comment has been minimized.

Copy link

@Rajesh-Royal Rajesh-Royal commented Jul 8, 2020

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.

@Rajesh-Royal

This comment has been minimized.

Copy link

@Rajesh-Royal Rajesh-Royal commented Jul 8, 2020

if you want you can leave a star on repo

@ZavierXIV

This comment has been minimized.

Copy link

@ZavierXIV ZavierXIV commented Jul 8, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.