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 commented Feb 3, 2017

<3

Works like a charm.

Cheers.

@shide1989

This comment has been minimized.

Copy link

shide1989 commented Feb 27, 2018

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

@knoxcard

This comment has been minimized.

Copy link

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 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 commented Jun 8, 2019

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

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.