Socket.io начал поддерживать бинарный поток с 1.0, есть ли полный пример специально для образа

Я новичок в node.js и socket.io. Socket.io начал поддерживать двоичный поток с 1.0, есть ли полный пример, особенно для передачи изображения на клиент и показа на холсте? Спасибо

Источник

3 ответа

Решение

Решение немного сложное, но должно работать в 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;
});

Просто замени 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);

Я предлагаю вам взглянуть на этот ответ, где вы можете найти реализацию кода для сервера и клиента (javascript, java):

/questions/38847966/kak-otpravit-dvoichnyie-dannyie-s-pomoschyu-socketio/38847978#38847978

Хорошей частью является то, что он также работает на Android!

ура

Источник
Другие вопросы по тегам