Socket.io開始支持從1.0的二進制流，是否有一個完整的例子，特別是圖像

我是一個初學者node.js和socket.io。 Socket.io開始支持1.0的二進制流，有沒有一個完整的例子，特別是圖像推送到客戶端和在畫布中顯示？謝謝Socket.io開始支持從1.0的二進制流，是否有一個完整的例子，特別是圖像

2014-06-08 guoleii

我想你只需要讀取節點源上的斑點，然後將其發射到插座，所有的聽衆將獲得團塊。在客戶端，我建議你用base64編碼它（或者如果你確信你不會有cpu問題，請將它編碼爲服務器端），然後按照這個指示操作：http://stackoverflow.com/questions/16449445/how- can-i-set-image-source-with-base64 – matteospampani

的解決方案是一個有點複雜，但應該在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 :)

來源

2014-06-09 16:51:59 Curious

謝謝，@CuriousGuy，但我總是得到錯誤「Uncaught TypeError：無法讀取未定義的屬性'緩衝區'，客戶端沒有圖像。任何建議？ – guoleii

難道你不會像這樣從服務器發出你的事件：'socket.emit（'image'）;'？如果是這樣，試着這樣做：'socket.emit（'image'，{buffer：buf}）;' – Curious

哦，我的錯，非常感謝，@CuriousGuy，它的工作原理。 – guoleii

謝謝，@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** 
    } 

});

來源

2014-06-09 01:40:25 guoleii

從socket.io 1.0就可以發送二進制數據出發只需更換yourCanvasId。 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！

乾杯

來源

2015-12-03 02:19:34

Socket.io開始支持從1.0的二進制流，是否有一個完整的例子，特別是圖像

回答

相關問題