Tengo un código para leer una imagen del directorio y enviarla a index.html.
Estoy tratando de reemplazar fs.readFile con fs.createReadStream pero no tengo idea de cómo implementar esto porque no puedo encontrar un buen ejemplo.
Esto es lo que obtuve (index.js)
var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); var fs = require('fs'); http.listen(3000, function () { console.log('listening on *:3000'); }); app.get('/', function (req, res) { res.sendFile(__dirname + '/public/views/index.html'); }); io.on('connection', function (socket) { fs.readFile(__dirname + '/public/images/image.png', function (err, buf){ socket.emit('image', { image: true, buffer: buf.toString('base64') }); }); });índice.html
<!DOCTYPE html> <html> <body> <canvas id="canvas" width="200" height="100"> Your browser does not support the HTML5 canvas tag. </canvas> <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> <script> var socket = io(); 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); } }); </script> </body > </html >El siguiente enfoque solo usa módulos principales y lee los fragmentos de la instancia stream.Readable devuelta desde fs.createReadStream() y devuelve esos fragmentos como un Buffer . Este no es un enfoque tan bueno si no va a transmitir los fragmentos de vuelta. Mantendrá el archivo dentro de un Buffer que reside en la memoria, por lo que solo es una buena solución para archivos de tamaño razonable.
io.on('connection', function (socket) { fileToBuffer(__dirname + '/public/images/image.png', (err, imageBuffer) => { if (err) { socket.emit('error', err) } else { socket.emit('image', { image: true, buffer: imageBuffer.toString('base64') }); } }); }); const fileToBuffer = (filename, cb) => { let readStream = fs.createReadStream(filename); let chunks = []; // Handle any errors while reading readStream.on('error', err => { // handle error // File could not be read return cb(err); }); // Listen for data readStream.on('data', chunk => { chunks.push(chunk); }); // File is done being read readStream.on('close', () => { // Create a buffer of the image from the stream return cb(null, Buffer.concat(chunks)); }); } Casi siempre es una mejor idea usar HTTP para la transmisión de datos, ya que está integrado en el protocolo y nunca necesitará cargar todos los datos en la memoria a la vez, ya que puede pipe() la transmisión del archivo directamente a la respuesta.
Este es un ejemplo muy básico sin las campanas y silbidos y solo es para demostrar cómo pipe() una secuencia. stream.Readable a un http.ServerResponse . el ejemplo usa Express pero funciona exactamente de la misma manera usando http o https de la API principal de Node.js.
const express = require('express'); const fs = require('fs'); const server = express(); const port = process.env.PORT || 1337; server.get ('/image', (req, res) => { let readStream = fs.createReadStream(__dirname + '/public/images/image.png') // When the stream is done being read, end the response readStream.on('close', () => { res.end() }) // Stream chunks to response readStream.pipe(res) }); server.listen(port, () => { console.log(`Listening on ${port}`); });