Question

我面临着前所未有的非凡的副作用。让我详细描述一下：

客户端（浏览器）有一个输入标记，正在选择文件。单击特定按钮时，将发出一个操作，其中这些文件通过websockets（通过库Socket.io）传输到服务器。

// Starts an upload after clicking on an upload button.
async upload() {
    if (this.state.fileList.length === 0) { return; }

    // Dispatch a start uploading action.
    this.props.startUp();

    // We map original files from the state's file list.
    let originFiles = _.map(this.state.fileList, (file: any) => {
        return file.originFileObj;
    });

    // Send files over the socket streams to the server.
    await ApiService.upload(originFiles, () => {
        // Update the state whenever a file has been uploaded.
        this.setState({ ...this.state, finishedFiles: this.state.finishedFiles + 1 })
    });

    this.clearItemList();
    // Dispatch an end uploading action.
    this.props.endUp();
}

只要单击按钮，就会调用此函数。如您所见，有一个api服务，在该文件列表上调用，并将这些文件流式传输到服务器。这些文件通过套接字进行流式传输。

import * as io from 'socket.io-client';
import * as ios from 'socket.io-stream';

export function upload(data: any[], onUpload?: () => void): Promise<any> {
    return new Promise((res, rej) => {
        const up = io.connect("ws://localhost:8000/");
        // Right after we connect.
        up.on('connect', () => {
            // Connect to the upload socket point.
            up.emit('upload', {});
            // Whenever we receive an 'ok' status, we send files over the wire.
            up.on('ok', async () => {
                // If we sent all the files, notify the server to end.
                if (data.length === 0) {
                    up.emit('end', {});
                    up.disconnect();
                    // Resolve this promise.
                    res();
                // Otherwise, emit a 'data' action, that sends the files.
                } else {
                    let blob = data.pop();
                    let stream = ios.createStream();
                    ios(up).emit('data', stream, { size: blob.size });
                    ios.createBlobReadStream(blob, { highWaterMark: 500000 }).pipe(stream);
                    // Callback for the onUpload event.
                    onUpload();
                }
            });
            up.on('error', () => {
                rej();
            });
        });
    });
}

一切正常，直到我在客户端（浏览器）上切换标签并且进度暂停。切换到客户端选项卡后，进度自动恢复。

我的同事推测，这可能是浏览器本身的一个问题，每当我失去标签的焦点时，就会停止管道传输文件。

有关如何解决此问题和/或稍微调整代码的任何想法都将非常感激。

谢谢。

Answer 1

它不会暂停流，只会减慢其速度。在Chrome中选中此选项：“-disable-background-timer-throttling”

在浏览器（客户端）上切换选项卡时Websocket进度暂停

1 个答案: