我希望使用SSE将消息动态发送到浏览器。理想情况下,我希望使用一个最小的应用程序,其中浏览器在调用一个函数或方法(将消息作为参数)之前不执行任何操作,并且浏览器收到此消息并只记录一次。我试图用下面的例子来说明:
const http = require("http");
const server = http.createServer(<not sure what code goes here>);
server.listen(8000);
// this can be called at any time after creating the server so the browser
// can receive the message and log it to the console.
sendMessageToBrowser(`data: this is a dynamic message\n\n`)
但是,下面的以下基本SSE应用程序仅每3秒(默认值)将“ hello world”记录到浏览器控制台中。我不明白这与通过常规路线和使用类似方法来提供数据有何不同:
setInterval(fetch("/events").then(res => res.text()).then(data => console.log(data)));
我的请求是否可以通过SSE进行,还是我误解了它的工作原理?我知道我的请求可以通过websockets / socket.io来实现,但是我希望使用SSE,因为我不想使用一个库,而SSE更易于理解和实现。
每3秒记录一次Hello World的最小示例:
const http = require("http");
const server = http.createServer((req, res) => {
// Server-sent events endpoint
if (req.url === "/events") {
res.writeHead(200, {
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache",
Connection: "keep-alive",
});
res.end(`data: hello world\n\n`);
return;
}
// Client side logs message data to console
res.writeHead(200, { "Content-Type": "text/html" });
res.end(`
<script>
var eventSource = new EventSource('/events');
eventSource.onmessage = function(event) {
console.log(event.data);
};
</script>
`);
});
server.listen(8000);
我不知道我是否真的了解您的需求。我更改了代码,现在,如果您转到/sendEvent
网址,则在根页面中会看到一个新日志。您可以在任何函数中使用resEvents
var在根页面中记录新消息。
const http = require("http");
var resEvents;
const server = http.createServer((req, res) => {
// Server-sent events endpoint
if (req.url === "/events") {
resEvents = res;
res.writeHead(200, {
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache",
Connection: "keep-alive"
});
res.write(
`data: Go to http://localhost:8000/sendEvent to log a new Messages \n\n`
);
return;
}
if (req.url === "/sendEvent") {
if (resEvents != undefined) {
res.writeHead(200, { "Content-Type": "text/html" });
res.end(`Logged a new Message<br>Refresh the page to log a new Message`);
resEvents.write(
`data: Random Number: ${Math.floor(Math.random() * 5000) + 1}\n\n`
);
} else {
res.writeHead(200, { "Content-Type": "text/html" });
res.end(`First go to http://localhost:8000/`);
}
return;
}
// Client side logs message data to console
res.writeHead(200, { "Content-Type": "text/html" });
res.end(`
<script>
var eventSource = new EventSource('/events');
eventSource.onmessage = function(event) {
console.log(event.data);
};
</script>
`);
});
server.listen(8000);