WebSocket JavaScript:发送复杂对象

WebSocket JavaScript: Sending complex objects

本文关键字：复杂 对象 JavaScript WebSocket      更新时间：2023-09-26

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

我想通过套接字发送许多不同的媒体类型(文本、音频、视频、图像(。这当然不难。Blob 的 message.data 实例将文本与媒体文件分开。问题是，我想为这些媒体文件包含几个额外的属性。

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(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 而不是音频/视频数据，并直接从服务器读取文件。不过，我不喜欢安全隐患。

相关文章：