socket io，node js，从服务器向客户端发送图像/文件的简单示例 [英] socket io, node js, Simple example to send image/files from server to client

问题描述

有关如何提供图像的简单明了的例子吗？从服务器到客户端？通过缓冲或只是直接下载电话？
（目标是近乎实时地获取图像文件以排序呈现近乎实时的图像流）并附加到html图像标记或仅在html页面的主体中。

Is there any plain and straight forward examples on how to serve an image? from server to client? through buffering or just a direct call to download? (the goal is to get image files in near real time efficiently to sort of present a near live stream of images) and append to a html image tag or just in the body of the html page.

不完整的示例代码:(主要从官方样本中获取，或者只是从stackoverflow中获取代码）

incomplete sample code: (mostly acquired from official sample or just codes from 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');
  });
});

（客户端html页面）index.html（我们将切入追逐只有服务图像的部分）我们可以在客户端做什么ge文件并在html页面上提供图像？

(client side html page) index.html (we'll cut to the chase with only the portion which serves the image) What can we do on the client side to get the file and serve the image on the html page?

  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.buffer in为了让图像正确显示

after the code snippets from below it also needed to change "buffer" variable to image.buffer in order for the image to display correctly

基本上改变了这一行

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

到

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

推荐答案

一种可能的解决方案是对图像数据进行base64编码并在浏览器中通过 image.src 使用它：

One possible solution is to base64-encode the image data and use that in the browser via image.src:

在服务器端，尝试更改此：

On the server side, try changing this:

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);
  }
});

这篇关于socket io，node js，从服务器向客户端发送图像/文件的简单示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！