Html 使用SSE响应HTTP Get

我正在试验HTML5和node.js。我已经测试了服务器发送的事件，它们运行良好（参考）

接下来，我试着用SSE来回答按下按钮的问题。按下“增量”按钮时，我从文本框中选择一个数字，并使用GET消息将其传递给服务器。然后，服务器将响应一个包含递增数字的事件。eventListener随后将使用收到的号码更新文本框。我还在HTML页面上添加了一个“消息区”来记录消息

这就是计划。但当我点击按钮时，浏览器显示窗口底部正在进行“下载”操作，但从未完成，结果不会在屏幕上更新，也不会在页面底部显示消息

当我在加载页面时发送事件时，它们工作正常。但是当我发送它来响应GET消息时，HTML页面不会显示任何响应

这里是HTML部分

<form action="/upload" method="get">
<p>Set the temperature and click on send</p>
<input name="temperature" id="TemperatureBox" type="text" value = "33" />
<button type="submit" onclick="form.action='http://localhost:8888/Increment'">Increment</button>

在node.js脚本中，我发送了一条消息和一个TemperatureValueUpdate

function constructTemperature(response, id, data) {
console.log("Sending Temperature event");
//  response.write('id: ' + (new Date()).toLocaleTimeString()+ '\n');
 // response.write("data: " + 'Teperature event sent '+ '\n\n');

response.write('event: ' + 'TemperatureValueUpdate' + '\n');
response.write('id: ' + id + '\n');
response.write("data: " + data + '\n\n');

console.log("Finished Temperature event"); }

我还以200回复了页面加载上的“/events”URL：

response.writeHead(200, {'Content-Type': 'text/event-stream','Cache-Control': 'no-cache', 'Connection': 'keep-alive' });

我甚至试过以下方法

• 在发送事件之前发送202/204响应
• 在发送事件之前/之后发送响应。end（）
• 在每个事件之前发送“内容类型”：“文本/事件流”

---

但它们并没有产生预期的结果。我在这里做错了什么？

听起来您在执行表单提交时调用了constructTemperature（）函数。如果是这种情况，则您与EventSource处于不同的连接上。因此，您需要存储数据以返回到服务器上某个位置的客户端，并在源自EventSource的请求中调用constructTemperature（）。

让我看看是否理解。当我开始页面时，url是

http://localhost:8888//MyApp

当我按下按钮时，发送的url是

http://localhost:8888/Increment?temperature=33

。通过不同的连接，您的意思是说我的路径名在整个应用程序中应该保持不变吗？因此，为了增加数字，我应该使用类似

http://localhost:8888//MyApp?operation=Increment&temperature=33

而不是当前版本。不完全正确。EventSource查找事件的URL为

http://localhost:8888/events

。来自该URL的响应应该包含来自

constructTemperature（）

函数的响应。我尝试将所有HTTP请求的URL更改为

http://localhost:8888/MyApp

并将事件源注册为

var source=new EventSource（“/MyApp”）。我根据'req.headers.accept=='text/event stream'条件进行区分；唯一的区别是浏览器不会永远显示下载框，但问题仍然存在。
response.writeHead(200, {'Content-Type': 'text/event-stream','Cache-Control': 'no-cache', 'Connection': 'keep-alive' });