如何将JavaScript变量传递给Flask的SocketIO函数？

1. 修改前端JavaScript代码，传递参数到后端 #

你需要在调用socket.emit时把text作为参数一起发送，同时要确保每个按钮能获取到对应列表项的内容，把text的获取放在按钮点击事件的作用域内：

function createSpan() {
    var c = 1
    for (let i of document.getElementsByTagName('li')) {
        var span = document.createElement('span');
        span.id = 'outlineSpan'
        var clonedLI = i.cloneNode(true);
        span.appendChild(clonedLI);
        console.log(i.innerHTML)
        var genNotesBtn = document.createElement('button');
        genNotesBtn.className = 'genNotesBtn';
        genNotesBtn.id = 'genNotesBtn' + c;
        c++;
        genNotesBtn.innerHTML = 'Generate notes.';
        // 保存当前列表项的内容到变量
        const text = i.innerHTML;
        genNotesBtn.onclick = function() {
            // 发送SocketIO事件时带上text参数
            socket.emit('notesGen', text)
        }
        span.appendChild(genNotesBtn);
        i.parentNode.replaceChild(span, i);
    }
}

2. 修改后端Flask SocketIO代码，接收参数 #

后端的notesGen函数只需添加对应参数，就能直接接收前端传来的text值：

@socketio.on('notesGen')
def notesGen(subheading):  # 这里的subheading就是前端传来的text
    assistantID = notesGenAssistant()
    # 现在subheading已获取到前端的动态值
    notesGenThread(subheading, detail)
    notesGenRun(assistantID, threadid)

为什么之前的方法无效 #

你尝试的var text = '{{ subheading }}'是Jinja2模板语法，这种语法是服务器渲染页面时执行的，而i.innerHTML是客户端浏览器运行JavaScript时才生成的动态内容，服务器渲染页面时根本无法预知这个值，所以不能通过模板语法传递。必须用SocketIO的事件参数来传递客户端的动态数据。

内容的提问来源于stack exchange，提问作者Joseph Moshal