Question

我正在开发一个Web应用程序，用于从管理界面向两台显示器发送图像，视频等。我在Node.js中使用ws作为服务器端。我已经实现了选择服务器上可用的图像和外部URL并将它们发送给客户端，但我还希望能够通过文件输入直接发送从设备中选择的图像。我设法使用base64来做，但我觉得效率很低。

目前，我发送一个字符串化的JSON对象，其中包含资源必须发送到的客户端，资源类型和资源本身，在服务器中解析它并将其发送到适当的客户端。我知道我可以将Websocket binaryType设置为blob并只发送File对象，但是我无法告诉服务器它必须将它发送到哪个客户端。我尝试使用typeson和BSON来实现这一目标，但它没有用。

还有其他方法吗？

Answer 1

我使用的是没有 io 的纯 WebSocket，您不能混合内容 - 字符串或二进制。然后我的工作解决方案是这样的：

客户：

    import { serialize } from 'bson';
    import { Buffer } from 'buffer';

    const reader = new FileReader();
    let rawData = new ArrayBuffer();
    ws = new WebSocket(...)
    reader.onload = (e) => {
      rawData = e.target.result;
      const bufferData = Buffer.from(rawData);
      const bsonData = serialize({  // whatever js Object you need
        file: bufferData,
        route: 'TRANSFER',
        action: 'FILE_UPLOAD',
      });
      ws.send(bsonData);
    }

然后在 Node 服务器端，消息被捕获并解析如下：

        const dataFromClient = deserialize(wsMessage, {promoteBuffers: true}) // edited
        fs.writeFile(
          path.join('../server', 'yourfiles', 'yourfile.txt'),
          dataFromClient.file, // edited
          'binary',
          (err) => {
            console.log('ERROR!!!!', err);
          }
        );

杀手是反序列化函数中的 promoteBuffer 选项。

Answer 2

您可以通过WebSocket发送原始二进制数据。

管理起来很容易。

一个选项是在＃34;魔术字节前加上＃34; （将消息标记为非JSON的标识符）。例如，使用B字符前置二进制消息。

所有服务器必须做的是在收集二进制数据之前测试第一个字符（如果魔术字节不在那里，它可能是正常的JSON消息）。

更严重的实现将在魔术字节之后附加标题（即文件名，总长度，发送数据的位置等等）。

这允许在断开连接时恢复上传（仅发送未被确认为已收到的部分。

您的服务器需要在处理之前将数据拆分为magic byte，header和binary_data。但它很容易完成。

Answer 3

希望这可以帮助某人。根据socket.io文档，您可以发送字符串，Buffer或将它们混合使用

在客户端：

function uploadFile(e, socket, to) {
  let file = e.target.files[0];

  if (!file) {
    return
  }
  if (file.size > 10000000) {
    alert('File should be smaller than 1MB')
    return
  }

  var reader = new FileReader();
  var rawData = new ArrayBuffer();

  reader.onload = function (e) {
    rawData = e.target.result;
    socket.emit("send_message", {
      type: 'attachment',
      data: rawData
    } , (result) => {
      alert("Server has received file!")
    });
    alert("the File has been transferred.")
  }

  reader.readAsArrayBuffer(file);
}

在服务器端：

socket.on('send_message', async (data, cb) => {
  if (data.type == 'attachment') {
      console.log('Found binary data')
      cb("Received file successfully.")
      return
    }
// Process other business...
});

如何通过Websocket发送文件以及其他信息？

3 个答案: