Javascript 如何在前端显示youtube视频的下载进度

我只使用过控制台nodejs应用程序，我对express-like软件包很陌生。我想将youtube视频链接粘贴到前端输入框，按“转换”什么触发后端下载。 所有这些都可以，但我不知道在点击“转换”按钮后如何在前端实时显示下载进度。我使用的下载包有事件“进度”，但我不知道如何在前端显示它

因此，我想知道在这种情况下，什么是最佳做法，我应该如何继续。提前感谢您提供的所有建议和提示

这是我使用yt.pug的模板

doctype html
html
    head
        title YouTube Downloader
        link(rel='stylesheet', href='css/yt.css')
        script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js')
        script(src='js/yt.js')

    body
        h1.heading My Own YouTube Downloader !
        input.URL-input(placeholder='Video URL e.g. https://www.youtube.com/watch?v=MtN1YnoL46Q')
        button.convert-button Convert

下面是加载模板的server.js

const server_start = async function(){
    const app = express()
    app.set('view engine', 'pug')
    app.use(express.static(__dirname + '/public'))
    app.use(cors())

    const server = app.listen(7000, () => {
        console.log(`Express running → PORT ${server.address().port}`)
    })

    app.get('/yt', async (req, res) => {        
        res.render('yt')  
    })

    app.get('/yt/save', function(req, res){
      let file = '/usr/share/nginx/html/downloads/' + req.query.file
      res.download(file)
    })

    app.get('/yt/download', async (req,res) => {
        try{
            var VIDEO_URL = req.query.URL;
            var VIDEO_ID = youtube_parser(req.query.URL);


            var YD = new YoutubeMp3Downloader({
                "ffmpegPath": "/usr/bin/ffmpeg",        // Where is the FFmpeg binary located?
                "outputPath": "/usr/share/nginx/html/downloads",    // Where should the downloaded and encoded files be stored?
                "youtubeVideoQuality": "highest",       // What video quality should be used?
                "queueParallelism": 2,                  // How many parallel downloads/encodes should be started?
                "progressTimeout": 1000                 // How long should be the interval of the progress reports
            })

            //Download video and save as MP3 file
            YD.download(VIDEO_ID)

            YD.on("finished", function(err, data) {
                res.json(JSON.stringify({
                    url: "yt/save?file=" + data.videoTitle + ".mp3"
                }))                                
            });

            YD.on("error", function(error) {
                res.json(JSON.stringify(error))
            });

            YD.on("progress", function(progress) {
                console.log(JSON.stringify(progress))
            });

        }catch(err){
            res.json(JSON.stringify(err))
        }
    })
}

server_start()

这里是yt.js，它在单击时发送下载请求

$(document).ready(function() {
    $('.convert-button').on('click', () => {
        $.ajax({
            url: '/yt/download',
            method: 'GET',
            data: {
                'URL' : $('.URL-input').val()
            },
            success: function(data) {
                console.log("Video was downloaded");
            }
        })
    });
});

我建议使用将进度数据发送给客户。我不确定这是不是最好的办法，但这是我解决你问题的最初想法

创建了一个示例环境来演示我的想法

---

希望了解其他人提出的其他方法。

谢谢，我将尝试实施它。没问题，很乐意帮助：）