JavaScript 如何接收服务器发送的事件通知

服务器发送的事件是服务器和客户端之间进行单向通信的一种方式。当我们只需要从服务器向客户端发送数据，而不需要从客户端向服务器发送数据时，我们可以使用服务器发送的事件。

我们可以通过在客户端和服务器之间建立连接来使用服务器发送的事件。在这里，服务器发送数据，客户端接收数据并处理数据以显示在网页上。服务器可以是任何东西，比如Node，PHP或Ruby应用程序。

因此，当服务器发送数据时，客户端JavaScript上的’message’事件会触发，并且可以通过事件监听器处理数据。

下面是一个示例，演示了如何通过服务器发送的事件接收事件通知。

示例

步骤1 - 首先，我们需要在客户端发送请求到服务器，以在客户端之间建立连接。
步骤2 − 创建一个index.html文件。在<script>标签中，使用eventSource构造函数初始化新的eventSource对象。

const source = new EventSource('URL');

在上面的语法中，URL是服务器的API端点，我们必须请求JavaScript来建立连接。

步骤3 − 为message事件添加一个事件监听器。因此，每当服务器向客户端发送消息时，事件监听器的回调函数就可以处理消息数据。
步骤4 − 将下面的代码添加到index.html文件中。

<html>
<body>
   <h2>Using the <i> Server-sent events </i> for unidirectional communication in 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 += "Updated message is: " + message.data + "<br>";
      });
   </script>
</body>
</html>

步骤5 − 现在，我们需要创建一个Node应用程序作为服务器。在项目目录中运行下面的命令来创建一个新的node应用程序。

npm init -y

步骤6 − 接下来，运行以下命令来安装express和cors NPM包。这里，express用于构建服务器，而cors用于允许访问所有源。

npm i cors express

步骤7 − 使用express初始化应用服务器，并确保应用程序使用cors。
步骤8 − 创建一个可以调用subscribeClient()函数的subscribe API端点。
步骤8.1 − subScribeClient()函数接受两个参数。第一个是请求，第二个是响应。
步骤8.2 − 创建标题并将它们添加到函数的响应中。
步骤8.3 − 使用push()方法将一个client对象添加到allConnectedClient数组中，该数组存储了所有已连接和活动的客户端。
步骤8.4 − 创建一个字符串数据的数组。现在，使用无限while循环，它在每次迭代后等待5秒，选择随机数据，并将其发送给客户端。
步骤9 − 将下面的代码添加到node应用的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(`App listening on port ${PORT}`);
});