我是node.js和socket.io的初学者。套接字。IO从1.0开始支持二进制流,是否有一个完整的例子,特别是将图像推送到客户端并显示在画布上?由于
解决方案有点复杂,但应该适用于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
替换为您的画布id:)
谢谢@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)的代码实现:
https://stackoverflow.com/questions/34056705/how-to-send-binary-data-with-socket-io/好的部分是它也可以在Android上运行!
欢呼