2

我使用 WebSockets 作为 Node.js 服务器和我的客户端 JS 代码之间的连接。

我想通过套接字发送许多不同的媒体类型（文本、音频、视频、图像）。这当然不难。message.data instanceof Blob 将文本与媒体文件分开。问题是，我想在这些媒体文件中包含几个附加属性。

铁：

  • 图像的尺寸
  • 图像的名称。. .

现在我可以以文本形式发送一条包含这些信息的消息，然后用另一条包含 blob 的消息跟进它。不过，我非常希望能够构建一个对象：

imageObject = {

xDimension : '50px',

yDimension : '50px', 

name : 'PinkFlowers.jpg'

imageData : fs.readFileSync(".resources/images/PinkFlowers.jpg")

}

并通过socket.send(imageObject).

到目前为止一切顺利，这确实有效，但是我如何收集对象并使其字段再次在客户端中可访问？

我已经对其进行了一段时间的篡改，如果有任何想法，我将不胜感激。

此致，

棍子

4

1 回答 1

4

好吧，我确实使用base64让它工作。

在服务器端，我正在运行这段代码：

var imageObject = newMessageObject('img', 'flower.png');
imageObject.image = new Buffer(fs.readFileSync('./resources/images/flower.png'), 'binary').toString('base64');
imageObject.datatype = 'png';
connection.send(JSON.stringify(imageObject));

new Buffer() 是确保有效 utf 编码所必需的。如果不使用，Chrome（不知道 Firefox 和其他）会抛出错误，检测到无效的 utf8 编码并在 JSON.parse(message) 之后关闭执行。注意：newMessageObject 只是一个对象构造方法，有两个字段，我使用的类型和名称。

在客户端，它真的很简单：

websocketConnection.onmessage = function(evt) {
   var message = JSON.parse(evt.data);
   ... // Some app specific stuff
   var image = new Image();
   image.onload = function() {
     canvas.getContext("2d").drawImage(image, 0, 0);
   }

   image.src = "data:image/" + message.datatype + ";base64," + message.image;

}

这将在画布上绘制图像。

我不相信这对于音频或视频文件是可行的，但对于图像它可以完成工作。我可能会退回到简单地发送一个模糊的 URL 而不是音频/视频数据，并直接从服务器读取文件。我不喜欢安全隐患。

于 2012-05-17T15:24:18.700 回答