Socket.io从1.0开始支持二进制stream,特别是对于图像有一个完整的例子

我是node.jssocket.io的初学者。 Socket.io开始从1.0开始支持二进制stream,有没有一个完整的例子,特别是图像推送到客户端,并在canvas上显示? 谢谢

       

网上收集的解决方案 "Socket.io从1.0开始支持二进制stream,特别是对于图像有一个完整的例子"

该解决scheme有点复杂,但应该在Chrome,Firefox和IE10 +(不知道Opera和Safari)中工作:

服务器端的某个地方:

io.on('connection', function(socket){ fs.readFile('/path/to/image.png', function(err, buffer){ socket.emit('image', { buffer: buffer }); }); }); 

这就是你如何在客户端处理它:

 socket.on('image', function(data) { var uint8Arr = new Uint8Array(data.buffer); var binary = ''; for (var i = 0; i < uint8Arr.length; i++) { binary += String.fromCharCode(uint8Arr[i]); } var base64String = window.btoa(binary); var img = new Image(); img.onload = function() { var canvas = document.getElementById('yourCanvasId'); var ctx = canvas.getContext('2d'); var x = 0, y = 0; ctx.drawImage(this, x, y); } img.src = 'data:image/png;base64,' + base64String; }); 

只需用您的canvasIDreplace您的yourCanvasId 🙂

谢谢@sovente,在这个1.0的介绍http://socket.io/blog/introducing-socket-io-1-0/ ,这是二进制支持的代码片段。

 var fs = require('fs'); var io = require('socket.io')(3000); io.on('connection', function(socket){ fs.readFile('image.png', function(err, buf){ // it's possible to embed binary data // within arbitrarily-complex objects socket.emit('image', { image: true, buffer: buf }); }); }); 

我想知道如何处理客户端的缓冲区,代码如下所示:

  socket.on("image", function(image, buffer) { if(image) { console.log(" image: "); **// code to handle buffer like drawing with canvas** } }); 

从socket.io 1.0开始,可以发送二进制数据。 http://socket.io/blog/introducing-socket-io-1-0/

在官方文档中,发送和接收二进制数据的方式还不清楚。 唯一的文档是:

 var socket = new WebSocket('ws://localhost'); socket.binaryType = 'arraybuffer'; socket.send(new ArrayBuffer); 

我build议你看看这个答案,在那里你可以find服务器和客户端(JavaScript,Java)的代码实现:

https://stackoverflow.com/questions/34056705/how-to-send-binary-data-with-socket-io/

好的部分是,它也适用于Android!

干杯