javascript - rooms - socket io, node js, ejemplo simple para enviar imágenes/archivos del servidor al cliente

socket.io chat rooms example

Question

¿Hay algún ejemplo sencillo y directo sobre cómo servir una imagen? de servidor a cliente? a través del almacenamiento en búfer o simplemente una llamada directa para descargar? (el objetivo es obtener archivos de imagen casi en tiempo real de manera eficiente para presentar una transmisión de imágenes casi en vivo) y anexar a una etiqueta de imagen html o simplemente en el cuerpo de la página html.

código de muestra incompleto: (principalmente adquirido a partir de muestra oficial o solo códigos de stackoverflow)

index.js

// basic variables
var app = require(''express'')();
var http = require(''http'').Server(app);
var io = require(''socket.io'')(http);
var fs = require(''fs''); // required for file serving
http.listen(3000, function(){
console.log(''listening on *:3000'');
});
// location to index.html
app.get(''/'', function(req, res){
res.sendFile(__dirname + ''/index.html'');
});
// only to test chat sample code from sample
io.on(''connection'', function(socket){
console.log(''a user connected'');
// broadcast a message
socket.broadcast.emit(''chat message'', ''System Broadcast Message: a user has been connected'');
socket.on(''chat message'', function(msg){
io.emit(''chat message'', msg);
});
// trying to serve the image file from the server
io.on(''connection'', function(socket){
fs.readFile(__dirname + ''/images/image.jpg'', function(err, buf){
// it''s possible to embed binary data
// within arbitrarily-complex objects
socket.emit(''image'', { image: true, buffer: buf });
console.log(''image file is initialized'');
});
});

(página html del lado del cliente) index.html (vamos a ir al grano solo con la porción que sirve la imagen) ¿Qué podemos hacer en el lado del cliente para obtener el archivo y servir la imagen en la página html?

 socket.on("image", function(image, buffer) {
if(image)
{
console.log(" image: from client side");
// code to handle buffer like drawing with canvas** <--- is canvas drawing/library a requirement? is there an alternative? another quick and dirty solution?
console.log(image);
// what can we do here to serve the image onto an img tag?
}
});

gracias por leer

Actualizar:

después de los fragmentos de código de abajo, también se necesita cambiar la variable "buffer" a image.buffer para que la imagen se muestre correctamente

básicamente cambiar la línea de

img.src = ''data:image/jpeg;base64,'' + buffer;

A

img.src = ''data:image/jpeg;base64,'' + image.buffer;

Answer 1

Una posible solución es codificar64 base los datos de la imagen y usarlos en el navegador a través de image.src :

Del lado del servidor, intente cambiar esto:

socket.emit(''image'', { image: true, buffer: buf });

a esto:

socket.emit(''image'', { image: true, buffer: buf.toString(''base64'') });

Luego en el lado del cliente:

var ctx = document.getElementById(''canvas'').getContext(''2d'');
// ...
socket.on("image", function(info) {
if (info.image) {
var img = new Image();
img.src = ''data:image/jpeg;base64,'' + info.buffer;
ctx.drawImage(img, 0, 0);
}
});