сокет io, узел js, простой пример для отправки изображения / файлов с сервера на клиент
есть ли простые и прямые примеры того, как служить изображению? от сервера к клиенту? через буферизацию или просто прямой вызов для загрузки? (цель состоит в том, чтобы получить файлы изображений в режиме реального времени эффективно, чтобы представить почти живой поток изображений) и добавить к тегу html-изображения или просто в теле html-страницы.
неполный код образца: (главным образом приобретенный от официального образца или как раз кодов от сайте StackOverflow)
.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');
});
});
(клиентская html-страница) индекс.html (мы перейдем к погоне только с той частью, которая обслуживает изображение) что мы можем сделать на стороне клиента, чтобы получить файл и обслуживать изображение на 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?
}
});
спасибо за чтение
обновление:
после кода снизу также необходимо было изменить переменную "buffer" на image.буфер для отображения изображения правильно
изменить строку с
img.src = 'data:image/jpeg;base64,' + buffer;
до
img.src = 'data:image/jpeg;base64,' + image.buffer;
1 ответов
одним из возможных решений является base64-кодирование данных изображения и использование этого в браузере через image.src
:
на стороне сервера, попробуйте изменить это:
socket.emit('image', { image: true, buffer: buf });
для этого:
socket.emit('image', { image: true, buffer: buf.toString('base64') });
затем на стороне клиента:
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);
}
});