如何解决在 SSE 流之后获取文本框值
我正在将数据从我的文本框发送到服务器端点,然后在文本框中显示服务器流回的数据。在服务器完成流式传输并且文本框完全更新后,我需要存储文本框的值以对数据执行进一步的操作。我正在使用这个 sse.js 库将数据发布到服务器。
<button type="button" onclick="post()">get</button>
<script type="text/javascript" src="sse.js"></script>
<script>
url = "API-ENDPOINT";
let textArea = document.getElementById("value");
function post(callback){
//GET TEXTBOX VALUE TO SEND TO THE SERVER
var v = String(textArea.value);
console.log(v);
var source = new SSE(url,{
method: 'POST',headers: { 'Content-Type': 'text/plain' },payload: v //SPECIFY TEXTBOX VALUE TO SEND TO THE SERVER
});
var arr = [];
source.addEventListener('message',function (e) {
arr.push(e.data); //ADD THE DATA FROM THE SERVER-STREAM TO AN ARRAY,TO PRINT THE WHOLE MESSAGE
textArea.value = arr.map(el => el || " ").join(''); //FORMAT AND DISPLAY ARRAY IN THE TEXTBOX
});
source.stream();
}
上面的代码获取文本框的值,将其发送到服务器,并用服务器响应填充文本框。现在我想在完成更新后获取文本框的值。但问题是:我的服务器端点使用 SSE 连续流式传输数据,这意味着不会接收到单个数据块,而是会连续接收许多数据(这就是创建 arr
数组来附加片段并显示整个数据。)服务器发送的数据是句子,它一次一个字地发送它们。因此,当您按下 get
按钮时,文本框会动态填充越来越多的文本。文本框更新完成后,我需要存储文本框值以对文本执行进一步操作,例如剪切最后 5 个字符。
function clip(){
s = textArea.value;
s = s.slice(0,-5);
textArea.value = s;
console.log('clipped');
}
我尝试在 callback()
`EventHandler 中使用 message
,但这不起作用,因为 EventHandler 一次接收一个单词,并将回调放置在每个单词的剪辑部分而不是完成输出结束:
<button type="button" onclick="post(clip)">get</button>
source.addEventListener('message',function (e) {
arr.push(e.data);
textArea.value = arr.map(el => el || " ").join('');
callback();
});
将 callback()
放在 post()
的末尾也不起作用,它甚至在流开始之前就剪切了文本框值:
source.stream();
callback();
有谁知道在post()
函数完成文本框更新后如何获取文本框值并对其进行操作?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。