极客教程<html>
<body>
<h2>使用<i>服务器发送的事件</i>在JavaScript中进行单向通信。</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
const source = new EventSource('http://localhost:5000/subscribe');
source.addEventListener('message', message => {
output.innerHTML += "更新后的消息是：" + message.data + "<br>";
});
</script>
</body>
</html>
npm init -y
npm i cors express
步骤 7 − 使用表达式初始化应用程序服务器，并确保应用程序使用cors。
步骤 8 − 创建一个可以调用“subscribeClient（）”函数的“subscribe”API端点。
步骤 8.1 − subScribeClient（）函数接受两个参数。第一个是请求，第二个是响应。
步骤 8.2 − 创建标题并将其添加到函数的响应中。
步骤 8.3 − 使用push（）方法将客户端对象添加到存储所有连接和活动客户端的“allConnectedClient”数组中。
步骤 8.4 − 创建一个字符串数据数组。现在，使用无限while循环，每次迭代后等待5秒钟，选择随机数据并将其发送到客户端。
步骤 9 − 将以下代码添加到节点应用程序的app.js文件中。
const express = require("express");
const cors = require("cors");
const app = express();
// use cors
app.use(cors());
const PORT = 5000;
// array to store all connected clients
let allConnectedClients = [];
// add the client to the list
async function subscribeClient(req, res) {
// set headers
const headers = {
"Content-Type": "text/event-stream",
Connection: "keep-alive",
};
// adding 200 response code
res.writeHead(200, headers);
// create a client object and add it to the list
const id = Date.now();
const client = {
id,
res,
};
allConnectedClients.push(client);
console.log(`Client is connected Successfully and its id is: {id}`);
let cnt = 0;
// Create data of strings and choose a random string
let data = [
"Hello",
"World",
"How",
"Are",
"You",
"Today",
"I",
"Am",
"Fine",
];
while (true) {
// wait for 5 seconds
await new Promise((resolve) => setTimeout(resolve, 5000));
console.log("Data updated", ++cnt);
// send data to the client
res.write(`data:{data[Math.floor(Math.random() * data.length)]}
`);
}
}
// adding endpoints
app.get("/subscribe", subscribeClient);
// run the server
app.listen(PORT, () => {
console.log(`应用程序在端口${PORT}上监听`);
});
node app.js
运行节点应用程序服务器后，打开或刷新在Web浏览器中打开的index.html文件。用户可以观察到它每5秒打印一次数据。 通过使用服务器发送的事件获得JavaScript通知。在这里，我们每5秒从服务器发送数据，但开发人员只能在数据更新时发送数据。 因此，通过使用服务器发送的事件，我们可以在客户端JavaScript中获得通知，无论何时在服务器端更新了数据。
服务器端事件类似于轮询技术。在轮询中，客户端在每个时间间隔后向服务器发送请求，并请求更新，这会增加服务器的负载，即使服务器没有更新也会发出请求。但服务器发送的事件在数据更新时向客户端发送数据，客户端无需请求服务器更新。