如何通过单击页面上的按钮触发服务器发送 SSE？

Question

我正在学习服务器发送的事件并想尝试我自己的示例。 我发现的所有示例都设置了一个服务器，该服务器仅使用一个时间间隔将新事件发送到 HTML 页面上的 EventSource。 我想做的是在页面上有一个按钮来调用服务器，该按钮将触发一个新事件发送到 EventSource 对象。

索引.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Home</title>
</head>
<body>
    <h1>Home</h1>

    <div id="click-container">

    </div>

    <script type="text/javascript">
        var source = new EventSource('/clicks');
        var clickContainer = document.getElementById("click-container");
        source.addEventListener("message", function(e) {
            clickContainer.innerHTML = e.data + '<br>';
        });
    </script>

    <h1>Clicker</h1>

    <button type="button" id="clicker">Click Me</button>

    <script type="text/javascript">
        var btn = document.getElementById("clicker");

        btn.addEventListener("click", function(e) {
            var req = new XMLHttpRequest();
            req.onreadystatechange = function() {
                if (xhr.readyState == XMLHttpRequest.DONE) {
                    console.log(req.responseText);
                }
            };

            req.open('GET', '/click', true);
            req.send(null);
        });
    </script>
</body>

但是对于我在 Node 中做的服务器，我不知道该怎么做。 我尝试将请求发送到 EventSource 正在侦听的同一 URL，但这只会导致该请求陷入打开的连接中并且永远不会完成。 我只是无法理解我需要做什么，我能解释一下这应该如何工作吗？ 谢谢

Answer 1

你需要使用像 Redis 这样的东西作为你的发布/订阅代理。 我写了一个由两部分组成的博客系列，介绍如何使用 Node.js 做到这一点。

第 1 部分
第 2 部分

Answer 2

为此，您可以使用fetch()

客户端.js：

document.getElementById("clicker").onclick = function() {
  data = { something: "123"}
  fetch("/sendData", {
    method: "POST",
    body: data,
    headers: { "Content-Type": "application/json"
  }).then(res => res.json())
  .then(resp => {
    //do something with returned data
    alert(resp) // { message: "hello" }
  })
}

服务器.js：

const express = require("express")
const app = express()
const bodyParser = require("body-parser")
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

app.post("/sendData", (req, res) => {
  console.log(req.body.something) // "123"

  //return a response to the client side
  res.send({ message: "hello" })
})

如何通过单击页面上的按钮触发服务器发送 SSE？

问题描述

索引.html

2 个解决方案

解决方案1
1 2016-09-30 21:09:51

解决方案2
1 2020-10-19 11:27:00

如何通过单击页面上的按钮触发服务器发送 SSE？

问题描述

索引.html

2 个解决方案

解决方案1 1 2016-09-30 21:09:51

解决方案2 1 2020-10-19 11:27:00

解决方案1
1 2016-09-30 21:09:51

解决方案2
1 2020-10-19 11:27:00