javascript - 无法控制Websocket的send和receive事件

问题描述

问 题

我想使用Websocket来上传大文件.
为了避免将大文件一次性读入内存,我将文件进行切块发送.
下面是我的JS代码:

function upload() {
        var slicesize = 10485760;
        var file = document.getElementById("file").files[0];
        var ws = new WebSocket("ws://127.0.0.1:8080/file");
        var startsize = 0;
        var endsize = 0;
        ws.onopen = function () {
            console.log("成功连接到服务器");
            ws.send(file.name);
            console.log("size : ", file.size);
            console.log("name size : ", file.name.length)
        };
        ws.onmessage = function (resp) {
            console.log("收到来自服务器的信息: ", resp.data)
            if (endsize < file.size + file.name.length) {
                console.log("test")
                startsize = endsize;
                endsize += slicesize;
                var blob = file.slice(startsize, endsize);
                var reader = new FileReader();
                reader.readAsArrayBuffer(blob);
                reader.onload = function loaded(event) {
                    var arrayBuffer = event.target.result;
                    ws.send(arrayBuffer);
                    console.log("发送切片")
                }
            } else {
                startSize = endSize = 0;
                console.log("全部发送完成!")
            }
        };
        ws.onclose = function () {
            console.log("成功关闭了连接")
        }
    }

后端我使用Go语言进行处理,使用的是"golang.org/x/net/websocket"这个包.
相关代码如下:

func UploadFile(ws *websocket.Conn) {
    var err error
    var count int
    var recData bytes.Buffer
    var filename string
    var savepath string
    for {
        var receive []byte
        if err = websocket.Message.Receive(ws, &receive); err != nil {
            log.Fatal(err)
            break
        }

        if count == 0 {
            filename = string(receive)
            fmt.Println("文件名为: ", filename)
        } else {
            recData.Write(receive)
        }

        count++
        sent := strconv.Itoa(len(receive))
        fmt.Println("本次接受到的文件长度为: ", len(receive))
        fmt.Println("发送了: ", sent)
        if err = websocket.Message.Send(ws, sent); err != nil {
            log.Fatal(err)
            break
        }
    }
}

现在遇到的问题是尝试发送一个6m的文件,前端和后端不断进行了send和receive,但是6m多的文件只需要在js里面send两次就好了,一次是send文件名,另外一次是真实传送文件数据.后端接受js这两次send事件后,返回收到的数据(字节)的长度给js.
但是浏览器的控制台输出是这样的:

成功连接到服务器
upload.html:53 size :  6376324
upload.html:54 name size :  15
upload.html:57 收到来自服务器的信息:  15
upload.html:59 test
upload.html:68 发送切片
upload.html:57 收到来自服务器的信息:  131057
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  131072
upload.html:72 全部发送完成!
upload.html:57 收到来自服务器的信息:  84883
upload.html:72 全部发送完成!

我很疑惑为什么后面会出现这么多send和receive事件 ?
有谁能不能帮我解答下?这是我第一次使用Websocket

解决方案

ws 读取数据并不是等你把所有数据全部上传完毕在一次性读出来的
比如我有10m数据我带宽只能1ms传1m
go端的ws for无限监听ws内的待读取数据，这个循环是有时间差的，比如1ms读取一次，读到后就返回，这个时候是不管你send完没send完都会返回
我1ms上传1m，后端1ms读取一次，那每次就只能读到1m，然后10次读完。
js端你send了两次，中间是有时间间隔，所以后端读取第一次filename后是完整读的，这个发送速度快，一次完成
send 文件内容6m这个慢，在send没完成前，后端就会一次一次的读取，每次都是for时间间隔内所发送的数据。
所以上传这种大文件，最好加上文件上传结束标识，来告诉后端我send结束了。
ws我理解着应该是这样子的，不知道对不对

这篇关于javascript - 无法控制Websocket的send和receive事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！