JavaScript - 通过 websocket 将 ArrayBuffer 数据发送到后端 [guacamole]答案

【问题标题】：JavaScript - Send ArrayBuffer data to backend over websocket [guacamole]JavaScript - 通过 websocket 将 ArrayBuffer 数据发送到后端 [guacamole]
【发布时间】：2021-07-12 06:03:55
【问题描述】：

我需要使用 guacamole-common-js 库通过 websocket 将数据（文件）发送到我的 guacamole 后端。

场景如下：

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

步骤 1 到 3 已经开始工作，但我不知道如何将文件发送到 guacamole 后端。

这是我删除文件时的函数：（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 发送的文件，但该文件只包含一种二进制数据。

是否有人已经解决了这个问题或知道如何发送数据？

【问题讨论】：

标签： javascript websocket guacamole

【解决方案1】：

如果您在后端使用 Node.js，请尝试使用 Buffer.toString 或 Buffer.from 处理它。

【讨论】：

是的，我在后端使用节点。我正在使用 guacamole-lite 库，该库通常会自动处理流量并将所有内容转发到 guacd 代理，所以我不知道在库中的何处进行更改...

【解决方案2】：

我已经找到了解决方案...

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);
        }
    }
}

【讨论】：