WebSocket JavaScript：发送复杂对象

我使用WebSocket作为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）

按原样发送此对象

到目前为止还不错，这确实有效，但是如何收集对象并使其字段再次在客户端中可访问呢

我已经篡改它一段时间了，如果有任何想法，我将不胜感激

致以最良好的祝愿

---

棒

我确实用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只是一个对象构造方法，有两个字段，我使用的是type和name

在客户端，这是非常直接的：

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，而不是音频/视频数据，并直接从服务器读取文件。但是我不喜欢安全方面的影响

我确实是用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只是一个对象构造方法，有两个字段，我使用的是type和name

在客户端，这是非常直接的：

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，而不是音频/视频数据，并直接从服务器读取文件。但是我不喜欢安全方面的影响