Question

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

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

F.e：

图片尺寸
图像名称。。。

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

imageObject = {

xDimension : '50px',

yDimension : '50px', 

name : 'PinkFlowers.jpg'

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

}

通过socket.send(imageObject)发送此对象。

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

我已经篡改了一段时间了，我会感激任何想法。

致以最诚挚的问候，

棒

Answer 1

我确实使用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));

新的Buffer（）是确保有效的utf编码所必需的。如果没有使用，Chrome（不知道Firefox和其他人）会抛出错误，检测到无效的utf8编码并在JSON.parse（消息）之后关闭执行。注意：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而不是音频/视频数据，并直接从服务器读取文件。我不喜欢安全隐患。

WebSocket JavaScript：发送复杂对象

1 个答案: