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

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

Answer 1

该解决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 🙂

Answer 2

谢谢@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** } }); 

Answer 3

从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！

干杯