Javascript socket io,node js,从服务器向客户端发送图像/文件的简单示例
关于如何为形象服务,有没有简单明了的例子?从服务器到客户端?通过缓冲还是直接调用下载? (目标是以近乎实时的方式高效地获取图像文件,以排序方式呈现近乎实时的图像流)并附加到html图像标记或html页面主体中 样本代码不完整:(主要来自官方样本或仅来自stackoverflow的代码) index.jsJavascript socket io,node js,从服务器向客户端发送图像/文件的简单示例,javascript,node.js,sockets,socket.io,socket.io-1.0,Javascript,Node.js,Sockets,Socket.io,Socket.io 1.0,关于如何为形象服务,有没有简单明了的例子?从服务器到客户端?通过缓冲还是直接调用下载? (目标是以近乎实时的方式高效地获取图像文件,以排序方式呈现近乎实时的图像流)并附加到html图像标记或html页面主体中 样本代码不完整:(主要来自官方样本或仅来自stackoverflow的代码) index.js // basic variables var app = require('express')(); var http = require('http').Server(app); var io
// 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(我们将只讨论服务于图像的部分)我们在客户端可以做什么来获取文件并在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?
}
});
到
一种可能的解决方案是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);
}
});
谢谢,我能够让它与您的代码片段一起工作,并将变量从buffer更改为image.buffer!如下所示:img.src='data:image/jpeg;base64,“+image.buffer;谢谢谢谢你的帮助@mscdex这种base64发送图像的方法对我来说很有效,但在我的聊天应用程序中,每当我尝试发送一个超过3MB、尺寸超过1k的大型图像时,每次套接字io断开聊天连接时,可能是因为我的互联网上传速度慢。是否有一种更好的、可扩展的方式将图像或文件上传到服务器,并以一种轻巧的方式显示给客户端,这种方式也可以处理大文件上传。?您要求图像/文件,但仅发送图像即可。另请参见
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);
}
});