JavaScript - 通过 websocket [鳄梨酱] 将 ArrayBuffer 数据发送到后端

JavaScript - Send ArrayBuffer data to backend over websocket [guacamole]

我需要使用 guacamole-common-js 库通过 websocket 将数据(文件)发送到我的鳄梨酱后端。

场景如下:

  1. 已创建拖放区域
  2. 用户在此区域放置文件
  3. 文件已读取
  4. 创建 guac 文件流并将文件发送到 guac 后端

步骤 1 到 3 已经在工作,但我不知道如何将文件发送到鳄梨酱后端。

这是我在删除文件时的函数:(guac 是初始化 Guacamole-Client 函数的全局变量)

 function drop(ev){
    ev.preventDefault();
    if (ev.dataTransfer.items) {
        for (var i = 0; i < ev.dataTransfer.items.length; i++) {
        if (ev.dataTransfer.items[i].kind === 'file') {
            var file = ev.dataTransfer.items[i].getAsFile();
            var reader = new FileReader();
            reader.onloadend = function fileContentsLoaded (e){
                const stream = guac.createFileStream(file.type, file.name);
                const bytes  = new Uint8Array(reader.result);
                stream.sendBlob(bytes.buffer)
                stream.sendEnd()
            };
            console.log(file)
            reader.readAsArrayBuffer(file);
        }
        }
    } else {
        for (var i = 0; i < ev.dataTransfer.files.length; i++) {
        console.log(ev.dataTransfer.files[i].name);
        }
    }
}

后端也在接收数据,我可以在 guacd 发送文件的远程服务器上打开文件,但文件只包含某种二进制数据。

有人已经管理过这个或者知道我如何发送数据吗?

如果您在后端使用 Node.js,请尝试使用 Buffer.toStringBuffer.from 来处理它。

我已经找到解决办法了...

guacamole-common-js 库已经提供了将缓冲区发送到后端的功能...

我的“drop”函数现在如下所示:

function drop(ev){
    ev.preventDefault();
    if (ev.dataTransfer.items) {
        for (var i = 0; i < ev.dataTransfer.items.length; i++) {
        if (ev.dataTransfer.items[i].kind === 'file') {
            var file = ev.dataTransfer.items[i].getAsFile();
            var reader = new FileReader();
            reader.onloadend = function fileContentsLoaded (e){
                const stream = guac.createFileStream(file.type, file.name);
                var bufferWriter = new Guacamole.ArrayBufferWriter(stream)
                bufferWriter.sendData(reader.result)
                bufferWriter.sendEnd()
            };
            reader.readAsArrayBuffer(file);
        }
    }
    } else {
        for (var i = 0; i < ev.dataTransfer.files.length; i++) {
        console.log(ev.dataTransfer.files[i].name);
        }
    }
}