Question

我是node.js和socket.io的初学者。 Socket.io开始支持1.0的二进制流，是否有一个完整的例子特别适用于图像推送到客户端并在画布中显示？感谢

Answer 1

解决方案有点复杂，但应该适用于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;
});

只需用画布ID替换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);

我建议你看看这个答案，在那里你可以找到服务器和客户端的代码实现（javascript，java）：

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

好的部分是它也适用于Android！

干杯

Socket.io开始支持1.0的二进制流，是否有一个特别适用于图像的完整示例

3 个答案: